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

腾赚网 62 0

新春交易大奖赛:百万奖池等你来拿>>【>>戳我进入<<】

在线活动入口:【欧易OKX安卓注册>>戳我戳我<<】【欧易OKX苹果注册>>戳我戳我<<】

本文遵循 EIP-4361 Sign-In with Ethereum 规则。

SIWE(Sign-In with Ethereum)是通过签名验证用户对以太坊钱包控制权的方法,类似于发起一笔交易。

当前的身份验证方式非常简单,只需在钱包插件中签名信息即可,常见钱包已支持。

本文讨论的签名场景仅限于以太坊,其他链如 Solana、SUI 不在此范围内。

SIWE使用指南:增强Dapp的强大功能-第1张图片-腾赚网

你的项目需要 SIWE 吗?

SIWE 解决了钱包地址的身份验证问题。如果你有以下需求,可以考虑使用 SIWE:

  • Dapp 有自己的用户体系;
  • 查询的信息涉及用户隐私。

如果 Dapp 主要用于查询,如 etherscan,无需 SIWE。

连接钱包后,前端确实表明了身份,但后端接口调用时仍需验证身份,因为地址是公开信息。

SIWE 的原理和流程

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

SIWE使用指南:增强Dapp的强大功能-第2张图片-腾赚网

SIWE使用指南:增强Dapp的强大功能-第3张图片-腾赚网

SIWE使用指南:增强Dapp的强大功能-第4张图片-腾赚网

连接钱包

通过钱包插件在 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 后,验证时间显著减少。

抱歉,评论功能暂时关闭!