📢 #Gate广场征文活动第二期# 正式啓動!
分享你對 $ERA 項目的獨特觀點,推廣ERA上線活動, 700 $ERA 等你來贏!
💰 獎勵:
一等獎(1名): 100枚 $ERA
二等獎(5名): 每人 60 枚 $ERA
三等獎(10名): 每人 30 枚 $ERA
👉 參與方式:
1.在 Gate廣場發布你對 ERA 項目的獨到見解貼文
2.在貼文中添加標籤: #Gate广场征文活动第二期# ,貼文字數不低於300字
3.將你的文章或觀點同步到X,加上標籤:Gate Square 和 ERA
4.徵文內容涵蓋但不限於以下創作方向:
ERA 項目亮點:作爲區塊鏈基礎設施公司,ERA 擁有哪些核心優勢?
ERA 代幣經濟模型:如何保障代幣的長期價值及生態可持續發展?
參與並推廣 Gate x Caldera (ERA) 生態周活動。點擊查看活動詳情:https://www.gate.com/announcements/article/46169。
歡迎圍繞上述主題,或從其他獨特視角提出您的見解與建議。
⚠️ 活動要求:
原創內容,至少 300 字, 重復或抄襲內容將被淘汰。
不得使用 #Gate广场征文活动第二期# 和 #ERA# 以外的任何標籤。
每篇文章必須獲得 至少3個互動,否則無法獲得獎勵
鼓勵圖文並茂、深度分析,觀點獨到。
⏰ 活動時間:2025年7月20日 17
SIWE身分驗證:提升Dapp安全性的關鍵技術
SIWE:讓你的Dapp身分驗證更安全可靠
SIWE(Sign-In with Ethereum)是一種在以太坊上驗證用戶身分的方法,類似於錢包發起交易,用於證明用戶對該錢包擁有控制權。目前主流錢包插件都已支持這種簡單的身分驗證方式,只需在錢包中對信息進行籤名即可。
本文主要討論以太坊上的SIWE籤名場景,不涉及Solana、SUI等其他公鏈。
何時需要使用SIWE?
如果你的Dapp具有以下需求,可以考慮使用SIWE:
對於以查詢功能爲主的Dapp(如區塊瀏覽器),則不一定需要SIWE。
你可能會疑問,通過錢包連接Dapp後,不就已經表明了錢包所有權嗎?這個說法並不完全準確。對前端來說,錢包連接確實可以證明身分,但對於需要後端支持的接口調用,僅傳遞地址是無法驗證身分的,因爲地址是公開信息。
SIWE的原理和流程
SIWE的流程可以概括爲三個步驟:連接錢包 - 籤名 - 獲取身分標識。讓我們詳細了解這三個步驟:
連接錢包
這是一個常見的Web3操作,通過錢包插件可以在Dapp中連接用戶錢包。
籤名
SIWE的籤名步驟包括獲取Nonce值、錢包籤名和後端籤名校驗。
首先需要調用後端接口獲取Nonce值。後端會生成隨機Nonce並與當前地址關聯,爲後續籤名做準備。
前端獲取Nonce值後,構建籤名內容,通常包括Nonce、域名、鏈ID和籤名內容等。然後使用錢包提供的籤名方法對內容進行籤名。
最後將籤名發送給後端進行驗證。
獲取身分標識
後端驗證籤名通過後,會返回對應的用戶身分標識,通常是JWT token。前端在後續請求中帶上地址和身分標識,即可證明對錢包的所有權。
實踐SIWE
我們可以通過實際操作來實現SIWE功能,目標是讓Dapp能返回JWT用於用戶身分校驗。需要注意,以下demo僅用於演示基本流程,生產環境中可能存在安全隱患。
準備工作
本文使用Next.js開發應用,需要準備Node.js環境。使用Next.js的好處是可以直接開發全棧項目,無需拆分前後端。
安裝依賴
首先安裝Next.js:
npx create-next-app@14
按提示完成安裝後,進入項目目錄並啓動項目:
npm run dev
安裝SIWE相關依賴
我們使用Ant Design Web3組件庫來實現錢包連接和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配置:
jsx "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} > <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider> ); };
export default WagmiProvider;
然後添加連接錢包的按鈕:
jsx "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 ( <>
至此,我們就實現了一個簡單的SIWE登入框架。
接口實現
Nonce
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, }); }
verifyMessage
後端需要驗證籤名內容,並返回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);
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等節點服務,獲取對應的RPC連接後替換代碼中的默認RPC:
javascript const publicClient = createPublicClient({ chain: mainnet, transport: http('), //ZAN節點服務RPC });
這樣可以顯著減少驗證時間,提升接口速度。