以太坊身分驗證新選擇：SIWE實現詳解與實戰指南

RugResistant

2025-07-08 19:29:57

以太坊身分驗證: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} ); };

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);

return ( <> <connector.siwebutton renderbuttontext="{renderSignBtnText}"> </connector.siwebutton>

JWT: {jwt}

); }

實現後端接口

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