📢 Gate廣場 #创作者活动第一期# 火熱開啓,助力 PUMP 公募上線!
Solana 爆火項目 Pump.Fun($PUMP)現已登入 Gate 平台開啓公開發售!
參與 Gate廣場創作者活動,釋放內容力量,贏取獎勵!
📅 活動時間:7月11日 18:00 - 7月15日 22:00(UTC+8)
🎁 活動總獎池:$500 USDT 等值代幣獎勵
✅ 活動一:創作廣場貼文,贏取優質內容獎勵
📅 活動時間:2025年7月12日 22:00 - 7月15日 22:00(UTC+8)
📌 參與方式:在 Gate 廣場發布與 PUMP 項目相關的原創貼文
內容不少於 100 字
必須帶上話題標籤: #创作者活动第一期# #PumpFun#
🏆 獎勵設置:
一等獎(1名):$100
二等獎(2名):$50
三等獎(10名):$10
📋 評選維度:Gate平台相關性、內容質量、互動量(點讚+評論)等綜合指標;參與認購的截圖的截圖、經驗分享優先;
✅ 活動二:發推同步傳播,贏傳播力獎勵
📌 參與方式:在 X(推特)上發布與 PUMP 項目相關內容
內容不少於 100 字
使用標籤: #PumpFun # Gate
發布後填寫登記表登記回鏈 👉 https://www.gate.com/questionnaire/6874
🏆 獎勵設置:傳播影響力前 10 名用戶,瓜分 $2
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
現在有許多組件和庫支持快速接入錢包連接和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需要一些接口來幫助後端驗證用戶身分。現在我們來簡單實現一下。
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登入時,如果使用默認RPC節點,驗證過程可能需要近30秒。因此,強烈建議使用專門的節點服務來提升接口響應時間。
獲取到以太坊主網的HTTPS RPC連接後,在代碼中替換publicClient的默認RPC:
javascript const publicClient = createPublicClient({ chain: mainnet, transport: http('), //獲取到的節點服務RPC });
替換後,驗證時間可顯著減少,接口速度明顯提升。