📢 Gate廣場 #MBG任务挑战# 發帖贏大獎活動火熱開啓!
想要瓜分1,000枚MBG?現在就來參與,展示你的洞察與實操,成爲MBG推廣達人!
💰️ 本期將評選出20位優質發帖用戶,每人可輕鬆獲得50枚MBG!
如何參與:
1️⃣ 調研MBG項目
對MBG的基本面、社區治理、發展目標、代幣經濟模型等方面進行研究,分享你對項目的深度研究。
2️⃣ 參與並分享真實體驗
參與MBG相關活動(包括CandyDrop、Launchpool或現貨交易),並曬出你的參與截圖、收益圖或實用教程。可以是收益展示、簡明易懂的新手攻略、小竅門,也可以是現貨行情點位分析,內容詳實優先。
3️⃣ 鼓勵帶新互動
如果你的帖子吸引到他人參與活動,或者有好友評論“已參與/已交易”,將大幅提升你的獲獎概率!
MBG熱門活動(帖文需附下列活動連結):
Gate第287期Launchpool:MBG — 質押ETH、MBG即可免費瓜分112,500 MBG,每小時領取獎勵!參與攻略見公告:https://www.gate.com/announcements/article/46230
Gate CandyDrop第55期:CandyDrop x MBG — 通過首次交易、交易MBG、邀請好友註冊交易即可分187,500 MBG!參與攻略見公告:https://www.gate.com/announcements
SIWE技術指南:爲Dapp構建以太坊身分驗證系統
SIWE技術實現指南:構建強大的Dapp身分驗證系統
SIWE(Sign-In with Ethereum)是一種在以太坊上驗證用戶身分的方式,類似於發起交易,證明用戶對錢包的控制權。目前主流錢包插件都支持這種簡單的身分驗證方式,只需在插件中籤名即可。
本文主要討論以太坊上的籤名場景,不涉及其他公鏈。
何時需要使用SIWE
如果你的Dapp具有以下需求,可以考慮使用SIWE:
對於以查詢爲主的應用,如類似etherscan的區塊瀏覽器,則可以不使用SIWE。
雖然在Dapp前端連接錢包後似乎已經證明了身分,但對於需要後端支持的接口調用,僅傳遞地址是不夠的,因爲地址是公開信息,容易被冒用。
SIWE的原理和流程
SIWE流程可概括爲三個步驟:連接錢包、籤名、獲取身分標識。
連接錢包
這是常見的Web3操作,通過錢包插件在Dapp中連接錢包。
籤名
包括獲取Nonce值、錢包籤名和後端籤名校驗三個步驟:
從後端獲取隨機生成的Nonce值,與當前地址關聯。
前端構建籤名內容,包括Nonce值、域名、鏈ID等信息,使用錢包提供的方法籤名。
將籤名發送給後端進行校驗。
獲取身分標識
後端校驗籤名通過後,返回用戶身分標識(如JWT)。前端後續請求帶上地址和身分標識,即可證明錢包所有權。
實踐指南
以下將介紹如何在Nextjs項目中實現SIWE功能,返回JWT用於身分校驗。
環境準備
npx create-next-app@14
npm install antd @ant-design/web3 @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save
引入Wagmi
在layout.tsx中引入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;
添加連接按鈕
在組件中添加連接錢包和籤名按鈕:
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 ( <>
接口實現
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, }); }
驗證籤名接口
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節點服務爲例,獲取以太坊主網HTTPS RPC連接後,替換publicClient的默認RPC:
javascript const publicClient = createPublicClient({ chain: mainnet, transport: http('), //ZAN節點服務RPC });
這樣可以顯著減少驗證時間,提高接口響應速度。