📢 #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)是一种在以太坊上验证用户身份的方法,类似于发起交易,证明用户对钱包的控制权。目前大多数主流钱包插件都已支持这种简单的身份验证方式,只需在插件中对信息进行签名即可。
本文将重点讨论以太坊上的签名场景,不涉及其他公链如Solana、SUI等。
何时需要使用SIWE?
如果你的Dapp具有以下需求,可以考虑使用SIWE:
对于主要提供查询功能的Dapp(如区块浏览器),可以不使用SIWE。
虽然在Dapp上连接钱包后似乎已经证明了身份,但这只对前端有效。对于需要后端支持的接口调用,仅传递地址是不够的,因为地址是公开信息,容易被冒用。
SIWE的原理和流程
SIWE的流程可以概括为三个步骤:连接钱包 - 签名 - 获取身份标识。让我们详细了解这三个步骤。
连接钱包
这是常见的Web3操作,通过钱包插件在Dapp中连接用户钱包。
签名
SIWE的签名步骤包括获取Nonce值、钱包签名和后端签名校验。
首先需要调用后端接口获取Nonce值。后端会生成随机Nonce并与当前地址关联,为后续签名做准备。
前端获取Nonce值后,构建签名内容,通常包括Nonce值、域名、链ID和签名内容等。然后使用钱包提供的方法对内容进行签名。
最后将签名发送给后端进行验证。
获取身份标识
后端校验签名通过后,会返回用户身份标识,如JWT。前端后续请求时带上地址和身份标识,即可证明对钱包的所有权。
实践SIWE
我们将使用Next.js开发一个简单的SIWE应用,目标是让Dapp能够返回JWT用于身份验证。注意,此演示仅用于介绍基本流程,生产环境中可能存在安全隐患。
准备工作
我们需要准备好Node.js环境,并使用Next.js开发全栈项目。
安装依赖
首先安装Next.js:
npx create-next-app@14
按提示完成安装后,进入项目目录并运行:
npm run dev
访问localhost:3000即可看到基本的Next.js项目。
安装SIWE相关依赖
我们将使用Ant Design Web3,它免费、持续维护,使用体验类似普通组件库,且支持SIWE。安装命令如下:
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 ( <>
至此,我们已经实现了基本的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, }); }
signMessage
signMessage通常由钱包插件完成,我们使用Wagmi的签名方法。
verifyMessage
后端需要验证签名内容并进行安全性校验:
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, }); }
优化建议
为提高验证速度,建议使用专门的节点服务。可以使用ZAN的节点服务,获取HTTPS RPC连接后替换代码中的默认RPC:
javascript const publicClient = createPublicClient({ chain: mainnet, transport: http('), //ZAN节点服务RPC });
这将显著减少验证时间,提升接口速度。