Web3钱包：钱包集成与签名验证

Web3钱包钱包集成与签名验证大家好我是欧阳瑞Rich Own。今天想和大家聊聊Web3钱包这个重要话题。作为一个全栈/Web3开发者钱包集成是DApp开发的核心功能。今天就来分享一下钱包集成和签名验证的实战经验。Web3钱包概述常见钱包钱包说明类型MetaMask浏览器插件钱包热钱包WalletConnect跨平台钱包协议协议Coinbase WalletCoinbase官方钱包热钱包Ledger硬件钱包冷钱包核心功能连接钱包 → 获取用户地址 签名交易 → 授权转账 签名消息 → 身份验证 监听事件 → 账户/网络变化MetaMask集成基础连接async function connectWallet() { if (window.ethereum) { try { const accounts await window.ethereum.request({ method: eth_requestAccounts }); return accounts[0]; } catch (error) { console.error(连接失败:, error); throw error; } } else { throw new Error(请安装MetaMask); } }获取账户信息async function getAccountInfo() { const provider new ethers.providers.Web3Provider(window.ethereum); const signer provider.getSigner(); const address await signer.getAddress(); const balance await provider.getBalance(address); const chainId await provider.getNetwork().then(net net.chainId); return { address, balance: ethers.utils.formatEther(balance), chainId }; }监听变化// 监听账户变化 window.ethereum.on(accountsChanged, (accounts) { if (accounts.length 0) { console.log(账户已断开); } else { console.log(账户已切换:, accounts[0]); } }); // 监听网络变化 window.ethereum.on(chainChanged, (chainId) { console.log(网络已切换:, chainId); window.location.reload(); });WalletConnect集成初始化连接import WalletConnect from walletconnect/client; import QRCodeModal from walletconnect/qrcode-modal; const connector new WalletConnect({ bridge: https://bridge.walletconnect.org, qrcodeModal: QRCodeModal }); async function connectWithWalletConnect() { if (!connector.connected) { await connector.createSession(); } connector.on(connect, (error, payload) { if (error) { throw error; } const { accounts, chainId } payload.params[0]; console.log(已连接:, accounts[0]); }); connector.on(disconnect, (error, payload) { console.log(已断开连接); }); }签名验证签名消息async function signMessage(message) { const provider new ethers.providers.Web3Provider(window.ethereum); const signer provider.getSigner(); const signature await signer.signMessage(message); return signature; }验证签名function verifySignature(message, signature, address) { const signer ethers.utils.verifyMessage(message, signature); return signer address; }登录示例async function login() { const nonce generateNonce(); localStorage.setItem(nonce, nonce); const message 欢迎登录\n\nNonce: ${nonce}; const signature await signMessage(message); // 发送到后端验证 const response await fetch(/api/login, { method: POST, body: JSON.stringify({ address: await getAddress(), signature, nonce }) }); return response.json(); }实战案例DApp钱包集成class WalletService { constructor() { this.provider null; this.signer null; this.address null; this.chainId null; } async connect() { if (!window.ethereum) { throw new Error(请安装Web3钱包); } this.provider new ethers.providers.Web3Provider(window.ethereum); const accounts await this.provider.send(eth_requestAccounts, []); this.address accounts[0]; this.signer this.provider.getSigner(); this.chainId await this.provider.getNetwork().then(net net.chainId); this.setupListeners(); return this.address; } setupListeners() { window.ethereum.on(accountsChanged, (accounts) { if (accounts.length 0) { this.address accounts[0]; this.signer this.provider.getSigner(); } }); window.ethereum.on(chainChanged, () { window.location.reload(); }); } async getBalance() { if (!this.provider || !this.address) { throw new Error(请先连接钱包); } const balance await this.provider.getBalance(this.address); return ethers.utils.formatEther(balance); } async sendTransaction(to, amount) { if (!this.signer) { throw new Error(请先连接钱包); } const tx await this.signer.sendTransaction({ to, value: ethers.utils.parseEther(amount) }); return tx.hash; } } // 使用 const wallet new WalletService(); await wallet.connect(); console.log(地址:, wallet.address); console.log(余额:, await wallet.getBalance());最佳实践1. 多钱包支持// 支持多种钱包 const wallets { metamask: connectMetaMask, walletconnect: connectWalletConnect, coinbase: connectCoinbase };2. 错误处理try { await connectWallet(); } catch (error) { if (error.code 4001) { // 用户拒绝连接 console.log(用户拒绝连接); } else { console.error(连接失败:, error); } }总结Web3钱包集成是DApp开发的基础。通过正确的钱包连接、签名验证和事件监听可以提供良好的用户体验。我的鬃狮蜥Hash对钱包也有自己的理解——它总是安全地保护自己的领地这也许就是自然界的钱包吧如果你对Web3钱包集成有任何问题欢迎留言交流我是欧阳瑞极客之路永无止境技术栈Web3钱包 · MetaMask · WalletConnect