SIWE：爲Dapp提供身分驗證的強大工具

SIWE（Sign-In with Ethereum）是一種在以太坊上驗證用戶身分的方法,類似於發起交易,證明用戶對錢包的控制權。目前大多數錢包插件都支持這種簡單的籤名方式。

本文主要討論以太坊上的籤名場景,不涉及其他公鏈。

你的項目是否需要SIWE?

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

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

對於主要提供查詢功能的Dapp(如etherscan),可以不使用SIWE。

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

SIWE的原理和流程

SIWE的流程包括三個步驟:連接錢包、籤名、獲取身分標識。

連接錢包

這是常見的Web3操作,通過錢包插件連接到Dapp。

籤名

SIWE的籤名步驟包括:

1. 獲取Nonce值:調用後端接口獲取隨機Nonce值,與地址關聯。

2. 構建籤名內容:包括Nonce值、域名、鏈ID等信息。

3. 錢包籤名:使用錢包提供的方法對內容籤名。

4. 發送籤名:將籤名發送給後端驗證。

獲取身分標識

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

實踐SIWE

我們將使用Next.js開發一個支持SIWE的全棧應用。

準備工作

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

引入Wagmi

在layout.tsx中引入WagmiProvider:

jsx import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";

const WagmiProvider = ({ children }) => { return ( <wagmiweb3configprovider config="｛｛" siwe:="" {="" getnonce:="" async="" (address)=""> (await getNonce(address)).data, createMessage: (props) => 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(), }, wallets: [MetaMask(), WalletConnect(), TokenPocket(), OkxWallet()] ｝｝ > {children} ); };

添加連接按鈕

創建一個連接錢包和籤名的按鈕:

jsx export default function App() { const jwt = React.useContext(JwtProvider);

return ( <connectbutton.connector> {({ account, connect }) => ( {account ? 已連接: ${account.address.slice(0,6)}...${account.address.slice(-4)} : "連接錢包"} )} </connectbutton.connector> ); }

實現後端接口

Nonce接口

javascript export async function GET(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 }); }

驗證籤名接口

javascript export async function POST(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 }); }

性能優化

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

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

這將顯著提升接口響應速度。