SIWE實現指南:增強Dapp身分驗證功能

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使用手冊:如何讓你的Dapp更加強大?

實踐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使用手冊:如何讓你的Dapp更加強大?

接口實現

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使用手冊:如何讓你的Dapp更加強大?

優化建議

在進行SIWE登入時,如果使用默認RPC節點,驗證過程可能需要近30秒。因此,強烈建議使用專門的節點服務來提升接口響應時間。

獲取到以太坊主網的HTTPS RPC連接後,在代碼中替換publicClient的默認RPC:

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

替換後,驗證時間可顯著減少,接口速度明顯提升。

SIWE使用手冊:如何讓你的Dapp更加強大?

查看原文
此页面可能包含第三方内容,仅供参考(非陈述/保证),不应被视为 Gate 认可其观点表述,也不得被视为财务或专业建议。详见声明
  • 讚賞
  • 6
  • 分享
留言
0/400
空投刷子姐vip
· 19小時前
嗯 这东西还算主流 爷早用了
回復0
落叶不归根vip
· 19小時前
签名就要给隐私?让我再想想
回復0
熊市苦修僧vip
· 19小時前
身份验证?又一轮割韭菜的新把戏罢了
回復0
午夜快照猎人vip
· 19小時前
签名不就是个插件的事儿
回復0
Degentlemanvip
· 19小時前
SIWE这功能早该来了好吧
回復0
GateUser-75ee51e7vip
· 19小時前
普通钱包签名就够用了
回復0
交易,隨時隨地
qrCode
掃碼下載 Gate APP
社群列表
繁體中文
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)