使用 Next.js、React 与 Moralis 构建 Web3 身份验证系统

身份验证是确保服务仅提供给合法用户的关键环节，传统方式通常依赖用户名和密码进行验证。随着技术发展，智能卡、令牌设备和生物识别等用户凭证也逐渐普及。本文将引导您使用 Next.js、React 与 Moralis 构建一个现代化的 Web3 登录页面。在开始之前，请确保您的设备已安装 Node.js 和 Next.js（版本 12）。

Moralis 是什么？为何选择它？

如果您刚接触 Web3 或区块链技术，可能对 Moralis 还不太熟悉。Moralis 是一款能够快速构建跨链去中心化应用（dApp）的开发平台。它提供统一的工作流，帮助开发者高效创建高性能 dApp，并完全兼容各类主流 Web3 工具与服务。

Moralis 的核心优势包括：

快速部署：支持在 Ethereum、BSC、Polygon、Solana 和 Elrond 等多条区块链上迅速部署 dApp。
跨链兼容：所有基于 Moralis 构建的 dApp 默认具备跨链能力，确保应用能够适应未来新兴的区块链网络。
开发友好：无论您是初学者还是经验丰富的开发者，Moralis 都能简化区块链应用的创建、维护和扩展流程。

初始化 Next.js 项目

Next.js 是一个灵活的 React 框架，提供了构建快速 Web 应用的基础模块。根据官方文档，我们首先需要通过终端命令创建新的 Next.js 项目：

npx create-next-app@latest

执行此命令后，系统会提示输入项目名称。本文以“Sign-In”为例，您也可自定义名称。命令末尾的 @latest 确保安装的是最新版本（当前为 v12）。项目目录中，public 文件夹存放公共图标，pages 文件夹则包含所有页面文件。

前端界面开发

本节将构建一个美观的登录页面，实现点击登录按钮后连接 MetaMask 钱包的功能。首先，编辑 index.js 文件如下：

export default function Home() {
  return <div></div>;
}

接着，在 styles > globals.css 中调整全局样式：

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Figtree, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
* {
  box-sizing: border-box;
  margin: 0px;
}

此处仅在下方的 globals.css 中添加了 0px 的外边距。接下来，在项目根目录创建 components 文件夹，用于存放非页面组件。在该文件夹内新建 Login.js 组件，并创建 images 文件夹存放 Moralis 图标（可从文末 Github 链接获取）。

完成后的目录结构应包含这些新增项目。随后，更新 index.js 文件以引入登录组件：

import Login from "../components/Login";

export default function Home() {
  return <Login />;
}

为完善登录页视觉设计，需创建 Login.module.css 文件并编写 CSS 代码。接着编辑 Login.js 文件：

import styles from "../styles/Login.module.css";
import Image from "next/image";
import icon from "./Images/Moralis-Favicon.svg";

function Login() {
  return (
    <div className={styles.login_container}>
      <div className={styles.login_card}>
        <div className={styles.sign_in_container}>
          <Image src={icon} alt="Moralis Icon" width={50} height={50} />
          <button>Login with Moralis</button>
        </div>
      </div>
    </div>
  );
}

export default Login;

在 Login.module.css 中输入以下样式代码：

.login_container {
  background-color: rgb(14 165 233);
  height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
}
.login_card {
  background-color: white;
  width: 200px;
  height: 250px;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
}
.sign_in_container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sign_in_container > button {
  padding: 10px;
  border: none;
  border-radius: 40px;
  background-color: rgb(14 165 233);
  color: white;
}

运行 npm run dev 命令后，即可在浏览器中查看登录页面效果。下一步是将此界面与 Moralis 登录功能集成。

配置 Moralis 环境

首先，通过终端安装 Moralis SDK for React：

npm install moralis --save
npm install react-moralis --save

安装完成后重新运行项目，确保一切正常。接下来需要创建 Moralis 服务器：访问 Moralis 官网注册账户并登录管理面板。点击“Create a New Server”，选择“Local Devchain Server”（因为这不是主网或测试网环境）。填写服务器名称、选择区域和链类型（Eth LocalDevChain），最后点击“Add Instance”。

创建成功后，在服务器详情中获取 appId 和 serverUrl。随后编辑 App.js 文件，用 MoralisProvider 包裹整个组件：

import '../styles/globals.css';
import { MoralisProvider } from 'react-moralis';

function MyApp({ Component, pageProps }) {
  return (
    <MoralisProvider appId="YOUR_APP_ID" serverUrl="YOUR_SERVER_URL">
      <Component {...pageProps} />
    </MoralisProvider>
  );
}

export default MyApp;

将 YOUR_APP_ID 和 YOUR_SERVER_URL 替换为实际值。接着更新 Login.js 以实现用户认证：

import styles from "../styles/Login.module.css";
import Image from "next/image";
import icon from "./Images/Moralis-Favicon.svg";
import { useMoralis } from "react-moralis";

function Login() {
  const { authenticate, authError } = useMoralis();
  return (
    <div className={styles.login_container}>
      <div className={styles.login_card}>
        <div className={styles.sign_in_container}>
          <Image src={icon} alt="Moralis Icon" width={50} height={50} />
          <button onClick={() => authenticate()}>Login with Moralis</button>
        </div>
      </div>
    </div>
  );
}
export default Login;

还需安装必要的依赖包：

npm i magic-sdk --save
npm i @walletconnect/web3-provider --save
npm i @web3auth/web3auth --save

最后，在浏览器中安装 MetaMask 扩展。完成以上步骤后，即可实现通过 MetaMask 钱包登录的功能。

错误处理机制

为了在登录过程中显示错误信息，修改 Login.js 以加入错误处理逻辑：

function Login() {
  const { authenticate, authError } = useMoralis();
  return (
    <div className={styles.login_container}>
      <div className={styles.login_card}>
        <div className={styles.sign_in_container}>
          {authError && (
            <p className={styles.error}>
              {authError.name}: {authError.message}
            </p>
          )}
          <Image src={icon} alt="Moralis Icon" width={50} height={50} />
          <button onClick={() => authenticate()}>Login with Moralis</button>
        </div>
      </div>
    </div>
  );
}

在 Login.module.css 中添加错误消息的样式：

.error {
  color: red;
  text-align: center;
  font-size: 10px;
  font-style: italic;
  margin: 5px;
}

这样，任何认证错误都会以红色小号字体显示在登录按钮上方。

实现用户退出功能

对于已登录的用户，需要提供退出选项。编辑 index.js 文件如下：

import Login from "../components/Login";
import { useMoralis } from "react-moralis";

export default function Home() {
  const { isAuthenticated, logout } = useMoralis();
  return isAuthenticated ? (
    <div>
      <p>You are logged in</p>
      <button onClick={() => logout()}>Sign Out</button>
    </div>
  ) : (
    <Login />
  );
}

实现后，登录状态将显示“You are logged in”并提供退出按钮。

总结

本文详细介绍了如何使用 Next.js、React 和 Moralis 构建功能完整的 Web3 登录页面。通过学习，您不仅掌握了 Moralis 的基本应用，还了解了现代化 Web 界面开发的全流程。👉 探索更多区块链开发技巧

常见问题

Web3 身份验证与传统身份验证有何不同？
Web3 身份验证基于区块链技术，用户通过加密钱包（如 MetaMask）证明身份，无需依赖中心化服务器的用户名和密码。这种方式更注重用户隐私和数据主权，减少了中间环节的风险。

Moralis 支持哪些区块链网络？
Moralis 支持多种主流区块链，包括 Ethereum、BNB Chain、Polygon、Solana 和 Elrond 等。其跨链特性确保应用能适应未来新兴网络，保护开发者的长期投资。

是否需要完全掌握区块链知识才能使用 Moralis？
不需要。Moralis 设计了开发者友好的接口，简化了区块链应用的开发流程。初学者可通过其模块化工具快速上手，而经验丰富的开发者则能利用高级功能构建复杂应用。