如何使用 Web3.js 库构建 Web3 登录功能( 四 ) _小知识

文章插图

在下一步中，我们将创建showUserWalletAddress在仪表板上显示用户钱包地址的函数。
第 8 步 - 显示用户以太坊钱包地址
在这一步中，我们将创建showUserWalletAddress负责在仪表板上显示用户钱包地址的函数。已连接用户的钱包地址已在userWalletAddress全局变量中可用。
取消注释并使用以下代码showUserWalletAddress();更新您的：index.js

// show the user's wallet address from the global userWalletAddress variable const showUserWalletAddress = () => { const walletAddressEl = document.querySelector(".wallet-address"); walletAddressEl.innerHTML = window.userWalletAddress; };

文章插图

现在，刷新页面后，您的以太坊钱包地址将显示在您的仪表板上。
第 9 步 - 显示用户以太坊余额
在这一步中，我们将创建getWalletBalance()函数。此功能将获取用户的余额并将其显示在仪表板上。
我们将使用该window.web3.eth.getBalance(ethWalletAddress);方法来查询连接用户的以太坊账户余额。
取消注释该getWalletBalance();函数并将下面的代码应用到您的index.js文件中。

// get the user's wallet balance const getWalletBalance = async () => { // check if there is global userWalletAddress variable if (!window.userWalletAddress) { return false; } // get the user's wallet balance const balance = await window.web3.eth.getBalance(window.userWalletAddress); // convert the balance to ether document.querySelector(".wallet-balance").innerHTML = web3.utils.fromWei( balance, "ether" ); };

从上面的getWalletBalance函数中，我们正在检查是否有连接的用户，因为需要以太坊钱包地址来获取以太坊账户余额。
然后，我们通过将连接的钱包地址从我们的window.userWalletAddress全局变量作为参数传递给该getBalance方法来查询用户余额。
最后，我们将返回的“Wei”余额转换为“ether”并将其显示在仪表板上。

以太（Eth）的最小单位是“Wei” 。该fromWei方法是 web3 中的一种实用方法，可将任何“Wei”值转换为以太币。

刷新网页后，应该会显示您的以太坊余额。
如下所示，虽然我的余额为零

文章插图

第 10 步 - 添加 Web3 注销功能
本 web3 教程的最后一步是在我们的应用程序中实现注销功能。我们如何从 web3 应用程序中注销？这并不复杂，我们所要做的就是将全局window.userWalletAddress变量设置为null并userWalletAddress从浏览器中删除localStorage 。
此过程也类似于 web2 JWT 令牌[6]注销。
以下代码行将处理 web3 注销功能：

// web3 logout function const logout = () => { // set the global userWalletAddress variable to null window.userWalletAddress = null; // remove the user's wallet address from local storage window.localStorage.removeItem("userWalletAddress"); // show the user dashboard showUserDashboard(); }; // when the user clicks the logout button run the logout function document.querySelector(".logout-btn").addEventListener("click", logout);

就是这样！要测试注销功能，请单击“注销”按钮。您应该被重定向到登录部分，如下所示。
【如何使用 Web3.js 库构建 Web3 登录功能】

文章插图

恭喜
您已经成功地学习了如何将 Web3.js 登录添加到您的应用程序。这是我们最终的应用程序演示：

文章插图

如果您在此处遇到任何问题，请查看完整的源代码[7] 。
结论
在本教程中，我们使用 Web3.js 库创建了一个登录身份验证系统，允许用户使用他们的以太坊钱包连接到您的网站。您学习了如何获取用户的以太坊账户余额，将其转换为以太 (Eth) 并将其显示给用户。
引用链接
[1] 您可以在此处: https://web3.hashnode.com/what-is-web3js-an-introduction-into-the-web3js-libraries
[2] 此处: https://cdnjs.com/libraries/web3