📢 Gate廣場專屬 #WXTM创作大赛# 正式開啓!
聚焦 CandyDrop 第59期 —— MinoTari (WXTM),總獎池 70,000 枚 WXTM 等你贏!
🎯 關於 MinoTari (WXTM)
Tari 是一個以數字資產爲核心的區塊鏈協議,由 Rust 構建,致力於爲創作者提供設計全新數字體驗的平台。
通過 Tari,數字稀缺資產(如收藏品、遊戲資產等)將成爲創作者拓展商業價值的新方式。
🎨 活動時間:
2025年8月7日 17:00 - 8月12日 24:00(UTC+8)
📌 參與方式:
在 Gate廣場發布與 WXTM 或相關活動(充值 / 交易 / CandyDrop)相關的原創內容
內容不少於 100 字,形式不限(觀點分析、教程分享、圖文創意等)
添加標籤: #WXTM创作大赛# 和 #WXTM#
附本人活動截圖(如充值記錄、交易頁面或 CandyDrop 報名圖)
🏆 獎勵設置(共計 70,000 枚 WXTM):
一等獎(1名):20,000 枚 WXTM
二等獎(3名):10,000 枚 WXTM
三等獎(10名):2,000 枚 WXTM
📋 評選標準:
內容質量(主題相關、邏輯清晰、有深度)
用戶互動熱度(點讚、評論)
附帶參與截圖者優先
📄 活動說明:
內容必須原創,禁止抄襲和小號刷量行爲
獲獎用戶需完成 Gate廣場實名
SIWE身分驗證:讓Dapp用戶認證更安全可靠
SIWE簡介:讓你的Dapp身分驗證更安全
SIWE(Sign-In with Ethereum)是一種基於以太坊的用戶身分驗證方式。類似於發起交易,用戶通過籤名來證明對錢包的控制權。目前大多數主流錢包插件都已支持這種簡單的身分驗證方式。
SIWE適用場景
如果你的Dapp具有以下需求,可以考慮使用SIWE:
對於以查詢爲主的Dapp(如區塊瀏覽器),則不一定需要SIWE。
值得注意的是,僅僅通過錢包連接並不能完全證明身分。對於需要後端支持的接口調用,仍需要額外的身分驗證,否則任何人都可能"借用"公開的地址信息。
SIWE工作原理
SIWE的基本流程包括三個步驟:連接錢包、籤名、獲取身分標識。
連接錢包:通過錢包插件連接用戶錢包
籤名:
獲取身分標識: 後端驗證籤名通過後,返回用戶身分標識(如JWT)
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
配置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;
添加連接按鈕
創建一個連接錢包和籤名的按鈕:
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"); }} />
實現後端接口
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, }); }
優化建議
爲提高驗證速度,建議使用專門的節點服務。可以使用ZAN節點服務,替換默認RPC:
javascript const publicClient = createPublicClient({ chain: mainnet, transport: http('), });
這樣可以顯著減少驗證時間,提升接口響應速度。