SIWE:爲Dapp增添身分驗證能力

SIWE(Sign-In with Ethereum)是一種在以太坊上驗證用戶身分的方法,類似於發起交易,證明用戶對錢包的控制權。目前,大多數錢包插件都支持這種簡單的身分驗證方式,只需在插件中對信息進行籤名即可。本文將討論以太坊上的籤名場景。

何時需要SIWE

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

• 擁有獨立的用戶體系
• 需要查詢與用戶隱私相關的信息

對於以查詢爲主的應用,如etherscan,可以不使用SIWE。

雖然通過錢包連接可以在前端表明身分,但對於需要後端支持的接口調用,僅傳遞地址無法證明身分,因爲地址是公開信息。

SIWE的原理與流程

SIWE流程可概括爲:連接錢包 - 籤名 - 獲取身分標識。具體步驟如下:

1. 連接錢包:通過錢包插件在Dapp中連接錢包。

2. 籤名:

   • 獲取Nonce值:調用後端接口獲取隨機Nonce值。
   • 構建籤名內容:包括Nonce值、域名、鏈ID等。
   • 使用錢包籤名方法對內容進行籤名。
   • 將籤名發送給後端。

3. 獲取身分標識:

   • 後端校驗籤名後返回用戶身分標識(如JWT)。
   • 後續請求攜帶地址和身分標識,證明錢包所有權。

實踐SIWE

我們將使用Next.js開發一個支持SIWE的Dapp,目標是返回JWT用於用戶身分校驗。

準備工作

1. 安裝Next.js:

npx create-next-app@14

2. 安裝SIWE相關依賴:

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

實現SIWE

1. 在layout.tsx中引入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;

2. 添加連接按鈕:

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 ( <> {jwt} ); }

接口實現

1. Nonce接口:

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

2. 驗證消息接口:

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

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

優化建議

爲提高SIWE登入驗證速度,建議使用專門的節點服務。可以使用ZAN節點服務,替換publicClient的默認RPC:

javascript const publicClient = createPublicClient({ chain: mainnet, transport: http('), //ZAN節點服務RPC });

這可以顯著減少驗證時間,提升接口響應速度。