SIWE使用指南:增强Dapp的强大功能

在线活动入口:【欧易OKX安卓注册>>戳我戳我<<】;【欧易OKX苹果注册>>戳我戳我<<】
本文遵循 EIP-4361 Sign-In with Ethereum 规则。
SIWE(Sign-In with Ethereum)是通过签名验证用户对以太坊钱包控制权的方法,类似于发起一笔交易。
当前的身份验证方式非常简单,只需在钱包插件中签名信息即可,常见钱包已支持。
本文讨论的签名场景仅限于以太坊,其他链如 Solana、SUI 不在此范围内。
你的项目需要 SIWE 吗?
SIWE 解决了钱包地址的身份验证问题。如果你有以下需求,可以考虑使用 SIWE:
- Dapp 有自己的用户体系;
- 查询的信息涉及用户隐私。
如果 Dapp 主要用于查询,如 etherscan,无需 SIWE。
连接钱包后,前端确实表明了身份,但后端接口调用时仍需验证身份,因为地址是公开信息。
SIWE 的原理和流程
SIWE 流程包括三个步骤:连接钱包、签名、获取身份标识。
连接钱包
通过钱包插件在 Dapp 中连接钱包是常见的 Web3 操作。
签名
签名步骤包括获取 Nonce 值、钱包签名和后端签名校验。
Nonce 值由后端生成并与地址关联,确保每次签名内容不同。
前端获取 Nonce 后构建签名内容,通常包含 Nonce、域名、链 ID 等,并使用钱包提供的方法签名。
签名完成后发送给后端进行校验。
获取身份标识
后端校验签名成功后返回用户身份标识(如 JWT),前端后续请求带上该标识以验证身份。
实践
使用 nextjs 开发应用,安装依赖并配置 Wagmi 和 Ant Design Web3 实现 SIWE 登录。
安装 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,使整个项目使用 Wagmi 提供的 Hooks。
接口实现
Nonce
Nonce 提高签名可靠性,与用户地址关联,代码如下:
import { randomBytes } from "crypto";
import { addressMap } from "../cache";
export async function GET(request: Request) {
const address = new URL(request.url).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 });
}
verifyMessage
后端校验签名内容和 Nonce,返回 JWT:
import { createPublicClient, http } from "viem";
import jwt from "jsonwebtoken";
import { parseSiweMessage } from "viem/siwe";
import { addressMap } from "../cache";
const publicClient = createPublicClient({
chain: mainnet,
transport: http(),
});
export async function POST(request: Request) {
const { signature, message } = await request.json();
const { nonce, address } = 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 }, "your-secret-key", { expiresIn: "1h" });
return Response.json({ data: token });
}
优化建议
使用专门的节点服务(如 ZAN)可显著提升接口响应时间。
const publicClient = createPublicClient({
chain: mainnet,
transport: http('https://api.zan.top/node/v1/eth/mainnet/xxxx'),
});
替换默认 RPC 后,验证时间显著减少。
