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

文章插图

系统会提示您此消息：请安装 MetaMask 或任何以太坊扩展钱包。

文章插图

案例1通过?
案例 2 - 安装了以太坊钱包的用户
在安装了以太坊钱包的普通浏览器窗口中启动您的项目，因此现在您不应该收到提示消息。

文章插图

案例2通过?
但是showUserDashboard第 6 步中的函数还没有定义，我们稍后会创建它。

文章插图

第 6 步 - 添加 Web3 登录功能
对于登录功能，我们的主要兴趣是用户的钱包地址，我们将从以太坊钱包中用户选择的账户中获取该地址。我们只对选定的以太坊钱包地址感兴趣，因为用户可以在他们的钱包上拥有多个以太坊账户。
我们将按照下面的思路来实现我们的以太坊登录功能：

1. 首先，创建一个异步loginWithEth函数并检查是否启用了 web3 实例。
2. 如果启用了 web3 实例，我们将使用该window.ethereum方法触发 Metamask 钱包，供用户选择以太坊帐户。
3. 选择帐户后，我们将userWalletAddress使用用户选择的钱包地址更新全局变量。
4. 接下来，我们将选择的帐户存储在localStorage.
5. 然后，我们将用户重定向到他们的仪表板。
6. 最后，我们将loginWithEth使用 click 事件侦听器将该函数绑定到登录按钮。

上面的思考过程可以翻译成以下几行代码：
index.js使用以下代码更新您的文件：

// 1. Web3 login function const loginWithEth = async () => { // 1.1 check if there is global window.web3 instance if (window.web3) { try { // 2. get the user's ethereum account - prompts metamask to login const selectedAccount = await window.ethereum .request({ method: "eth_requestAccounts", }) .then((accounts) => accounts[0]) .catch(() => { // 2.1 if the user cancels the login prompt throw Error("Please select an account"); }); // 3. set the global userWalletAddress variable to selected account window.userWalletAddress = selectedAccount; // 4. store the user's wallet address in local storage window.localStorage.setItem("userWalletAddress", selectedAccount); // 5. show the user dashboard showUserDashboard(); } catch (error) { alert(error); } } else { alert("wallet not found"); } }; // 6. when the user clicks the login button run the loginWithEth function document.querySelector(".login-btn").addEventListener("click", loginWithEth);

在生产就绪的应用程序中，您可能希望将用户的以太坊钱包地址存储在您的数据库中，以作为用户的唯一标识符。
在我们继续测试我们的实现之前，让我们showUserDashboard在下一步中创建函数。
第 7 步 - 处理重定向
在这一步中，我们将在登录部分和用户仪表板部分之间实现重定向（切换）。
为了处理重定向，我们将检查用户是否连接到他们的钱包地址。如果它们未连接，我们将显示登录部分，一旦连接，我们会将用户重定向到仪表板部分。
我们还想更新网页的页面标题以向用户显示网站的状态。
使用以下代码行更新您的index.js文件：

// function to show the user dashboard const showUserDashboard = async () => { // if the user is not logged in - userWalletAddress is null if (!window.userWalletAddress) { // change the page title document.title = "Web3 Login"; // show the login section document.querySelector(".login-section").style.display = "flex"; // hide the user dashboard section document.querySelector(".dashboard-section").style.display = "none"; // return from the function return false; } // change the page title document.title = "Web3 Dashboard "; // hide the login section document.querySelector(".login-section").style.display = "none"; // show the dashboard section document.querySelector(".dashboard-section").style.display = "flex"; // show the user's wallet address // showUserWalletAddress(); // get the user's wallet balance // getWalletBalance(); };

如果您在应用该showUserDashboard功能后刷新应用程序，您应该能够连接到您的 Metamask 钱包并被重定向到仪表板部分。也看看标题栏！