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

使用以下代码行更新您的index.html文件：
Web3 Login Log in with Web3 Ensure to have an ETHereum based wallet installed i.e MetaMask Wallet Connected! ETH Wallet Address: ETH Balance: Log out
接下来，创建一个新index.js文件，这是我们稍后将编写功能的地方。
最后，创建一个新index.css文件并粘贴以下 CSS 代码行：
/* index.css */ * { margin: 0; box-sizing: border-box; } body { background-color: #182e48; display: flex; justify-content: center; align-items: center; height: 100vh; } /* LOGIN SECTION */ .login-section { display: flex; flex-direction: column; } .login-btn { background: #21bf96; color: #fff; padding: 13px 35px; font-size: 24px; border: none; font-weight: 600; cursor: pointer; } .instruction { text-align: center; color: #21bf96; color: #feba35; margin: 1rem 0; } /* DASHBOARD SECTION */ .dashboard-section { display: none; flex-direction: column; justify-content: center; align-items: center; } .wallet-status { font-size: 54px; color: #21bf96; letter-spacing: 1.5px; } .wallet-address-heading, .wallet-balance-heading { color: white; letter-spacing: 1.5px; margin-top: 1rem; text-align: center; } .wallet-balance, .wallet-address { color: #feba35; letter-spacing: normal; display: block; margin-top: 1rem; background: #000; padding: 8px; border-radius: 19px; } .logout-btn { color: white; background: #cc0000; padding: 13px 35px; font-size: 24px; border: none; font-weight: 600; cursor: pointer; margin-top: 40px; }
当您index.html在浏览器中打开文件时（我使用的是liveserver[5]），您应该有以下界面。

文章插图

由于没有登录用户，因此默认显示登录部分。我们还提醒用户，他们必须在其设备上安装以太坊钱包（请参阅第 2 步中的原因）。
将以下代码复制并粘贴到您的index.css文件中以隐藏登录部分并显示仪表板部分：
/* REMOVE AFTER TESTING */ .login-section { display: none; } .dashboard-section { display: flex; }
您的仪表板应如下所示：

文章插图

这是一个简单的仪表板，显示连接用户的钱包地址和他们的以太坊钱包余额。
我们将在下一步中继续实现登录功能，而不是手动更新 CSS 显示属性，在此我们将使用 JavaScript 来处理登录和仪表板部分之间的切换（基于应用程序的身份验证状态） .

确保删除测试 CSS 样式

第 5 步 - 检查用户是否安装了以太坊钱包
我们希望确保用户在其浏览器上安装了以太坊钱包。我们还希望在页面加载后立即提示未安装钱包的用户。
我们将遵循以下思考过程：

1. 创建一个全局范围userWalletAddress变量，这是我们将存储用户钱包地址的地方。
2. 在页面加载时，检查用户是否安装了以太坊钱包。
3. 如果用户安装了钱包，则创建一个新的 web3 实例。
4. 否则会提示用户安装钱包。
5. 然后我们会检查浏览器中是否已经存在用户的钱包地址localStorage，并将其更新为userWalletAddress变量。
6. 最后，我们将调用该showUserDashboard函数。

上面的思考过程可以翻译成以下几行代码：
将以下代码复制并粘贴到您的index.js文件中：

// 1. Create global userWalletAddress variable window.userWalletAddress = null; // 2. when the browser is ready window.onload = async (event) => { // 2.1 check if ethereum extension is installed if (window.ethereum) { // 3. create web3 instance window.web3 = new Web3(window.ethereum); } else { // 4. prompt user to install Metamask alert("Please install MetaMask or any Ethereum Extension Wallet"); } // 5. check if user is already logged in and update the global userWalletAddress variable window.userWalletAddress = window.localStorage.getItem("userWalletAddress"); // 6. show the user dashboard showUserDashboard(); };

我们将使用以下测试用例来测试我们的实现：
案例 1 - 未安装以太坊钱包的用户
我们将使用一个隐身窗口来测试当没有安装以太坊钱包的用户尝试使用我们的应用程序时会发生什么。
启动浏览器隐身窗口并访问项目 URL：