SIWE身分驗證:讓Dapp用戶認證更安全可靠

SIWE簡介:讓你的Dapp身分驗證更安全

SIWE(Sign-In with Ethereum)是一種基於以太坊的用戶身分驗證方式。類似於發起交易,用戶通過籤名來證明對錢包的控制權。目前大多數主流錢包插件都已支持這種簡單的身分驗證方式。

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

SIWE適用場景

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

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

對於以查詢爲主的Dapp(如區塊瀏覽器),則不一定需要SIWE。

值得注意的是,僅僅通過錢包連接並不能完全證明身分。對於需要後端支持的接口調用,仍需要額外的身分驗證,否則任何人都可能"借用"公開的地址信息。

SIWE工作原理

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

  1. 連接錢包:通過錢包插件連接用戶錢包

  2. 籤名:

    • 獲取Nonce值:調用後端接口獲取隨機Nonce值
    • 構建籤名內容:包括Nonce、域名、鏈ID等信息
    • 使用錢包進行籤名
    • 將籤名發送給後端驗證
  3. 獲取身分標識: 後端驗證籤名通過後,返回用戶身分標識(如JWT)

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

SIWE實踐

下面我們通過一個簡單的Demo來實踐SIWE流程。注意,此Demo僅用於演示基本流程,不宜直接用於生產環境。

環境準備

我們使用Next.js來開發全棧應用,需要準備Node.js環境。

安裝依賴

首先創建Next.js項目:

npx create-next-app@14

進入項目目錄後,安裝SIWE相關依賴:

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

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

配置Wagmi

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

const YOUR_WALLET_CONNECT_PROJECT_ID = "xxx"; const queryClient = new QueryClient();

const WagmiProvider = ({ 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;

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

添加連接按鈕

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

jsx "use client"; import { ConnectButton } from "@ant-design/web3"; import React from "react"; import { JwtProvider } from "./JwtProvider";

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

const renderSignBtnText = (defaultDom, account) => { const { address } = account ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; return Sign in as ${ellipsisAddress}; };

return ( <> <connectbutton.signin label="{renderSignBtnText}" onsignmessagesuccess="{()" ==""> { console.log("Sign message success"); }} />

JWT: {jwt}
); }

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

實現後端接口

Nonce接口

javascript import { randomBytes } from "crypto"; import { addressMap } from "../cache";

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

優化建議

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

javascript const publicClient = createPublicClient({ chain: mainnet, transport: http('), });

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

SIWE使用手冊:如何讓你的Dapp更加強大?</connectbutton.signin>

DAPP4.72%
查看原文
此頁面可能包含第三方內容,僅供參考(非陳述或保證),不應被視為 Gate 認可其觀點表述,也不得被視為財務或專業建議。詳見聲明
  • 讚賞
  • 7
  • 轉發
  • 分享
留言
0/400
永远在逃顶vip
· 07-08 21:12
这不就web2那套花里胡哨
回復0
TradFi难民vip
· 07-08 06:58
挺好 总比冷钱包保管丢了强
回復0
FadCatchervip
· 07-06 02:51
还不如直接用冷钱包~
回復0
熊市搬砖侠vip
· 07-06 01:16
早就该有这种验证了 还蛮靠谱
回復0
资深老韭当家vip
· 07-06 01:15
钱包再安全 不如我韭菜自己安全
回復0
空投碎片收集者vip
· 07-06 01:07
钱包签名能让安全吗?不太放心
回復0
GasGuzzlervip
· 07-06 01:07
还是签名最稳
回復0
交易,隨時隨地
qrCode
掃碼下載 Gate APP
社群列表
繁體中文
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)