SIWE:如何实现以太坊身份验证以增强Dapp功能

SIWE(Sign-In with Ethereum)是一种在以太坊上验证用户身份的方法,类似于发起钱包交易,用来证明用户对钱包的控制权。目前的身份验证过程已经非常简单,只需在钱包插件中对信息进行签名即可,大多数常见钱包插件都已支持。

本文主要讨论以太坊上的签名场景,不涉及Solana、SUI等其他公链。

何时需要使用SIWE

如果你的Dapp有以下需求,可以考虑使用SIWE:

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

但如果你的Dapp主要是查询功能,比如类似etherscan的应用,则不一定需要SIWE。

你可能会问,在Dapp上通过钱包连接后,不就已经证明了钱包所有权吗?这个说法部分正确。对前端而言,钱包连接确实表明了身份,但对于需要后端支持的API调用,仅传递地址是不够的,因为地址是公开信息,任何人都可以"借用"。

SIWE的原理和流程

SIWE的流程可以概括为三个步骤:连接钱包 - 签名 - 获取身份标识。让我们详细了解这三个步骤。

连接钱包

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

签名

SIWE的签名步骤包括获取Nonce值、钱包签名以及后端签名验证。

首先需要调用后端接口获取Nonce值。后端接收请求后,会生成随机Nonce值并与当前地址关联,为后续签名做准备。

前端获取Nonce值后,构建签名内容,包括Nonce值、域名、链ID、签名内容等,通常使用钱包提供的签名方法进行签名。

构建完签名后,将其发送给后端。

获取身份标识

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

实践SIWE

现在有许多组件和库支持快速接入钱包连接和SIWE。我们来实际操作一下,目标是让你的Dapp能返回JWT用于用户身份验证。

注意,这个示例仅用于介绍SIWE的基本流程,在生产环境中使用可能存在安全问题。

准备工作

我们使用Next.js开发应用,需要准备Node.js环境。使用Next.js的好处是可以直接开发全栈项目,无需分离前后端。

安装依赖

首先安装Next.js,在项目目录下运行:

npx create-next-app@14

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

npm run dev

然后访问localhost:3000即可看到基本的Next.js项目运行起来了。

安装SIWE相关依赖

我们使用Ant Design Web3实现SIWE,因为它免费、积极维护,使用体验类似普通组件库,且支持SIWE。

在终端输入:

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

引入Wagmi

Ant Design Web3的SIWE依赖Wagmi库实现。我们在layout.tsx中引入相关Provider,使整个项目都能使用Wagmi提供的Hooks。

首先定义WagmiProvider配置:

javascript "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 siwe="｛｛" 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} ); };

export default WagmiProvider;

我们使用Ant Design Web3提供的Provider,并定义了SIWE的一些接口,具体实现后续会介绍。

然后添加连接钱包的按钮,作为前端连接入口。

至此,我们已经简单接入了SIWE。

接下来定义一个连接按钮,实现连接钱包和签名:

javascript "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 ( <> {(account) => ( <connectbutton.signin accountcomponent="{false}" renderbuttontext="{(dom)" ==""> renderSignBtnText(dom, account)} /> )} </connectbutton.signin> {jwt} ); }

这样我们就实现了一个最简单的SIWE登录框架。

接口实现

SIWE需要一些接口来帮助后端验证用户身份。现在我们来简单实现一下。

Nonce

Nonce用于让钱包每次签名时生成不同的签名内容,提高可靠性。Nonce的生成需要与用户提供的address关联,以提高验证准确性。

Nonce的实现很直接,首先生成一个随机字符串(由字母和数字组成),然后将nonce和address建立关联:

javascript 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, }); }

signMessage

signMessage用于签名内容,通常通过钱包插件完成,我们一般只需指定方法即可。本示例中使用Wagmi的签名方法。

verifyMessage

用户签名后,需将签名前的内容和签名一起发送给后端验证。后端从签名中解析内容进行比较,一致则表示验证通过。

此外,还需对签名内容进行安全性校验,如验证Nonce值是否与分配给用户的一致。验证通过后,返回用户JWT用于后续权限校验:

javascript 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); console.log("nonce", nonce, address, addressMap);

// 校验nonce值是否一致 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"); }

// 生成jwt并返回 const token = jwt.sign({ address }, JWT_SECRET, { expiresIn: "1h" }); return Response.json({ data: token, }); }

至此,一个基本实现SIWE登录的Dapp就开发完成了。

优化建议

在进行SIWE登录时,如果使用默认RPC节点,验证过程可能需要近30秒。因此,强烈建议使用专门的节点服务来提升接口响应时间。

获取到以太坊主网的HTTPS RPC连接后,在代码中替换publicClient的默认RPC:

javascript const publicClient = createPublicClient({ chain: mainnet, transport: http('), //获取到的节点服务RPC });

替换后,验证时间可显著减少,接口速度明显提升。