SIWE使用指南:讓你的Dapp更強大

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

是否需要SIWE

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

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

但如果你的Dapp主要是查詢功能,如類似etherscan的應用,則不一定需要SIWE。

你可能會疑惑,在Dapp上通過錢包連接後,不就已經證明了錢包所有權嗎?這只對前端有效。對於需要後端支持的接口調用,僅傳遞地址是不夠的,因爲地址是公開信息,任何人都可以"借用"你的身分。

SIWE原理和流程

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

連接錢包

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

籤名

籤名步驟包括獲取Nonce值、錢包籤名和後端籤名校驗。

後端生成隨機Nonce值並與地址關聯。前端獲取Nonce值後構建籤名內容,包括Nonce值、域名、鏈ID等,使用錢包提供的方法籤名。最後將籤名發送給後端。

獲取身分標識

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

實踐SIWE

我們將使用Next.js開發一個簡單的SIWE demo,展示基本流程。注意,此demo僅用於介紹,生產環境使用可能存在安全問題。

準備工作

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

3. 在layout.tsx中引入WagmiProvider

4. 實現連接錢包按鈕

5. 實現後端接口

   • Nonce生成
   • 籤名驗證

6. 優化:使用專門的節點服務提升響應速度

通過以上步驟,我們就實現了一個基本的SIWE登入框架。使用專業節點服務可以大幅提升驗證速度,建議在生產環境中採用。