📢 #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)是一种在以太坊上验证用户身份的方法,类似于发起交易,证明用户对钱包的控制权。目前大多数钱包插件都支持这种简单的签名方式。
本文主要讨论以太坊上的签名场景,不涉及其他公链。
你的项目是否需要SIWE?
如果你的Dapp有以下需求,可以考虑使用SIWE:
对于主要提供查询功能的Dapp(如etherscan),可以不使用SIWE。
虽然连接钱包后前端可以确认身份,但对于需要后端支持的接口调用,仅传递地址无法证明身份,因为地址是公开信息。
SIWE的原理和流程
SIWE的流程包括三个步骤:连接钱包、签名、获取身份标识。
连接钱包
这是常见的Web3操作,通过钱包插件连接到Dapp。
签名
SIWE的签名步骤包括:
获取Nonce值:调用后端接口获取随机Nonce值,与地址关联。
构建签名内容:包括Nonce值、域名、链ID等信息。
钱包签名:使用钱包提供的方法对内容签名。
发送签名:将签名发送给后端验证。
获取身份标识
后端验证签名通过后,返回用户身份标识(如JWT)。后续请求携带地址和身份标识,即可证明钱包所有权。
实践SIWE
我们将使用Next.js开发一个支持SIWE的全栈应用。
准备工作
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:
jsx import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
const WagmiProvider = ({ children }) => { return ( <wagmiweb3configprovider config="{{" siwe:="" {="" getnonce:="" async="" (address)=""> (await getNonce(address)).data, createMessage: (props) => 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(), }, wallets: [MetaMask(), WalletConnect(), TokenPocket(), OkxWallet()] }} > {children} ); };
添加连接按钮
创建一个连接钱包和签名的按钮:
jsx export default function App() { const jwt = React.useContext(JwtProvider);
return ( <connectbutton.connector> {({ account, connect }) => ( )} </connectbutton.connector> ); }
实现后端接口
Nonce接口
javascript 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 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('), // ZAN节点服务RPC });
这将显著提升接口响应速度。