以太坊身份验证:SIWE实现指南

SIWE(Sign-In with Ethereum)是一种基于以太坊的用户身份验证方式,类似于钱包发起交易,用于证明用户对特定钱包的控制权。目前主流钱包插件都已支持这种简单的身份验证方式,只需在插件中对信息进行签名即可。

本文将聚焦于以太坊上的SIWE实现,不涉及其他公链如Solana、SUI等。

SIWE使用场景

如果你的去中心化应用(Dapp)具有以下需求,可以考虑使用SIWE:

• 拥有独立的用户体系
• 需要查询与用户隐私相关的信息

对于以查询为主的应用(如区块浏览器),则可以不使用SIWE。

虽然在Dapp中通过钱包连接可以表明身份,但这仅对前端有效。对于需要后端支持的接口调用,仅传递地址信息是不足以证明身份的,因为地址是公开信息。

SIWE工作原理

SIWE的流程可概括为三个步骤:连接钱包、签名、获取身份标识。

连接钱包

这是常见的Web3操作,通过钱包插件在Dapp中连接用户钱包。

签名

签名步骤包括获取Nonce值、钱包签名及后端签名校验。

后端生成随机Nonce值并与地址关联,为后续签名做准备。前端获取Nonce值后构建签名内容,包括Nonce值、域名、链ID等信息,使用钱包提供的方法进行签名。最后将签名发送给后端验证。

获取身份标识

后端验证签名通过后,返回用户身份标识(如JWT)。前端后续请求时携带地址和身份标识,即可证明对钱包的所有权。

SIWE实现示例

以下将演示如何在Nextjs项目中实现SIWE功能,使Dapp能够返回JWT用于用户身份校验。

环境准备

本示例基于Nextjs开发,需要准备Node.js环境。使用Nextjs可以方便地开发全栈项目,无需分离前后端。

安装依赖

首先安装Nextjs:

npx create-next-app@14

按提示完成安装后,进入项目目录并启动:

npm run dev

访问localhost:3000即可看到基础的Nextjs项目。

安装SIWE相关依赖

我们将使用Ant Design Web3实现钱包连接,它免费、持续维护,且使用体验类似普通组件库,支持SIWE功能。

安装相关依赖:

npm install antd @ant-design/web3 @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save

配置Wagmi

在layout.tsx中引入WagmiProvider:

typescript “use client”; import { getNonce, verifyMessage } from “@/app/api”; import { Mainnet, MetaMask, OkxWallet, TokenPocket, WagmiWeb3ConfigProvider, WalletConnect, } from “@ant-design/web3-wagmi”; import { QueryClient } from “@tanstack/react-query”; import React from “react”; import { createSiweMessage } from “viem/siwe”; import { http } from “wagmi”; import { JwtProvider } from “./JwtProvider”;

const YOUR_WALLET_CONNECT_PROJECT_ID = “c07c0051c2055890eade3556618e38a6”; const queryClient = new QueryClient();

const WagmiProvider: React.FC = ({ children }) => { const [jwt, setJwt] = React.useState(null);

return ( <wagmiweb3configprovider siweconfig=“｛｛” getnonce:=“” async=“” (address)=“”> (await getNonce(address)).data, createMessage: (props) => { return createSiweMessage({ …props, statement: “Ant Design Web3” }); }, verifyMessage: async (message, signature) => { const jwt = (await verifyMessage(message, signature)).data; setJwt(jwt); return !!jwt; }, ｝｝ chains={[Mainnet]} transports=｛｛ [Mainnet.id]: http(), ｝｝ walletConnect=｛｛ projectId: YOUR_WALLET_CONNECT_PROJECT_ID, ｝｝ wallets={[ MetaMask(), WalletConnect(), TokenPocket({ group: “Popular”, }), OkxWallet(), ]} queryClient={queryClient} > {children} </wagmiweb3configprovider> ); };

export default WagmiProvider;

实现连接按钮

添加连接钱包和签名的按钮:

typescript “use client”; import type { Account } from “@ant-design/web3”; import { ConnectButton, Connector } from “@ant-design/web3”; import { Flex, Space } from “antd”; import React from “react”; import { JwtProvider } from “./JwtProvider”;

export default function App() { const jwt = React.useContext(JwtProvider);

const renderSignBtnText = ( defaultDom: React.ReactNode, account?: Account ) => { const { address } = account ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}…${address.slice(-6)} : “”; return Sign in as ${ellipsisAddress}; };

return ( <> <flex vertical=“” gap=“middle”> <space> <connectbutton> <connector.siwebutton renderbuttontext=“{renderSignBtnText}”> </connector.siwebutton></connectbutton></space> <div>JWT: {jwt}</div> </flex> <!----> ); }

实现后端接口

Nonce接口

生成随机Nonce并与地址关联:

typescript import { randomBytes } from “crypto”; import { addressMap } from “…/cache”;

export async function GET(request: Request) { const { searchParams } = new URL(request.url); const address = searchParams.get(“address”);

if (!address) { throw new Error(“Invalid address”); } const nonce = randomBytes(16).toString(“hex”); addressMap.set(address, nonce); return Response.json({ data: nonce, }); }

验证消息接口

验证签名并返回JWT:

typescript import { createPublicClient, http } from “viem”; import { mainnet } from “viem/chains”; import jwt from “jsonwebtoken”; import { parseSiweMessage } from “viem/siwe”; import { addressMap } from “…/cache”;

const JWT_SECRET = “your-secret-key”;

const publicClient = createPublicClient({ chain: mainnet, transport: http(), });

export async function POST(request: Request) { const { signature, message } = await request.json();

const { nonce, address = “0x” } = parseSiweMessage(message);

if (!nonce || nonce !== addressMap.get(address)) { throw new Error(“Invalid nonce”); }

const valid = await publicClient.verifySiweMessage({ message, address, signature, });

if (!valid) { throw new Error(“Invalid signature”); }

const token = jwt.sign({ address }, JWT_SECRET, { expiresIn: “1h” }); return Response.json({ data: token, }); }

性能优化

为提高验证速度,建议使用专门的节点服务。以ZAN节点服务为例,获取以太坊主网的HTTPS RPC连接后,替换publicClient的默认RPC:

typescript const publicClient = createPublicClient({ chain: mainnet, transport: http('), //ZAN节点服务RPC });

这可以显著减少验证时间,提高接口响应速度。