如何使用 Web3.js 库构建 Web3 登录功能

Web3 身份验证是具有公共数据的应用程序中常见且重要的功能。 它有助于根据当前登录的用户识别谁在访问该网站以及要传递哪些数据。

介绍

这些年来，Internet 已经从 Web 的第一个版本 (web1) 发展而来，它需要用户名和密码来进行用户身份验证。

从 web1 开始，我们转向了 web 的第二个版本，即 web2。 这是在其他平台上使用社交媒体作为识别和验证手段的地方，无需手动填写用户名和密码。

web2 的主要问题是人们无法控制他们的个人数据。 相反，中央机构（例如政府和您与之签约的大多数大公司）按照他们认为合适的方式持有和管理其用户的数据。

现在，网络的第三个版本，通常被称为 web3，是互联网的去中心化版本，每个用户都可以完全控制他们的个人数据，而前几代互联网用户几乎没有控制权。

Web3 身份验证只需要用户在 OpenSea 等 web3 平台上连接到他们的加密钱包。

本文演示如何使用 Web3.js 库为您的网站添加 web3 登录身份验证。

演示

下面是本文最后我们要搭建的web3登录认证系统的演示视频。

先决条件

在我们继续本指南之前，您应该对 JAVAscript 和安装的基于以太坊的钱包有基本的了解（请参阅第 2 步）。

什么是 Web3.js？

根据以太坊基金会的说法以太坊的账户包含哪几个部分，Web3.js 是一组库，允许您使用 HTTP、IPC 或 WebSocket 与本地或远程以太坊节点进行交互。

Web3.js 可用于应用程序的前端或后端，以从区块链读取数据、进行交易以及将智能合约部署到区块链。 您可以在此处阅读 Web3.js 库的介绍 [1]。

第 1 步 - 安装 Web3.js 库

将 Web3.js 添加到项目的最快方法是在项目 html 文件中包含 Web3.js CDN。

您可以在此处 [2] 从 CDNJS 获取它，或将下面的脚本标记复制到您的 HTML 文件中。

将 Web3.js 库安装到前端或后端应用程序的另一种方法是使用包管理器 yarn add web3 或 npm install web3。 这些命令将在您的应用程序中安装 Web3.js 库。

我们将在此 web3 js 教程中使用 Web3.js CDN。

在您的项目目录中，创建一个新的 index.html 文件并粘贴以下 HTML 代码：

charset="UTF-8" /> Web3 登录

我们已经成功地将 Web3.js 库添加到我们的项目中。

第 2 步 - 设置以太坊钱包

为了让用户从我们的应用程序连接到他们的以太坊账户，他们必须在他们的设备上设置一个基于以太坊的钱包。

以太坊钱包将充当银行应用程序，允许您访问您的银行帐户。 以太坊钱包可以是物理硬件钱包、桌面钱包、移动钱包应用程序或网络浏览器钱包扩展程序（如 Metamask）的形式。

在此处阅读有关钱包的更多信息 [3]。

在这个 web3 js 教程中，我们将使用 Metamask，它允许我们通过网络浏览器与我们的帐户进行交互。 点击此链接 [4] 在您的浏览器上安装 Metamask 钱包。

第 3 步 - 我们将构建什么 - 思考过程

我们将构建一个登录身份验证系统，用户可以在其中使用他们的以太坊钱包登录我们的应用程序。

我们的应用程序将包含以下内容：

1.用户可以连接到他们钱包的登录部分。 2. 显示登录用户钱包地址及其以太坊账户余额的仪表板部分。

如果用户未登录，默认情况下会显示登录部分，而一旦用户连接了他们的以太坊账户，就会显示仪表板部分。 我们将使用 css 来显示属性并切换这两个部分。

第 4 步 - 构建登录和仪表板界面

现在我们已经安装了 Web3.js 和一个以太坊钱包，让我们构建用户可以连接到他们的钱包的界面和一个他们将在登录后被重定向的仪表板。

使用以下代码行更新您的 index.html 文件：

Web3 登录 使用 Web3 登录 确保安装了基于 ETHereum 的钱包，即已连接 MetaMask 钱包！ ETH 钱包地址： ETH 余额： 登出

接下来，创建一个新的 index.js 文件，这是我们稍后将编写功能的地方。

最后，创建一个新的 index.css 文件并粘贴以下 CSS 行：

/* 指数。 css */ * { 边距：0; 框大小：边框框； } body { 背景颜色：#182e48; 显示：弹性； 证明内容：居中； 对齐项目：居中； 高度：100vh； } /* 登录部分 */ . 登录部分{ 显示：flex; 弹性方向：列； } 。 login-btn { 背景：#21bf96; 颜色：#fff； 填充：13px 35px； 字体大小：24px； 边框：无； 字体粗细：600； 游标：指针； } 。 说明 { 文本对齐：居中； 颜色：#21bf96； 颜色：#feba35； 保证金：1rem 0； } /* 仪表板部分 */ . 仪表板部分{显示：无； 弹性方向：列； 证明内容：居中； 对齐项目：居中； } 。

钱包状态{字体大小：54px； 颜色：#21bf96； 字母间距：1.5px； } 。 钱包地址标题，. 钱包余额标题{ 颜色：白色； 字母间距：1.5px； 上边距：1rem； 文本对齐：居中； } 。 钱包余额，. 钱包地址 { 颜色：#feba35; 字母间距：正常； 显示：块； 上边距：1rem； 背景：#000； 填充：8px； 边界半径：19px； } 。 注销-btn { 颜色：白色； 背景：#cc0000； 填充：13px 35px； 字体大小：24px； 边框：无； 字体粗细：600； 游标：指针； 顶部边距：40px；

当您在浏览器中打开您的 index.html 文件时（我使用的是 liveserver[5]），您应该会看到以下界面。

由于没有登录用户，默认情况下会显示登录部分。 我们还提醒用户，他们必须在他们的设备上安装以太坊钱包（请参阅第 2 步中的原因）。

将以下代码复制并粘贴到您的 index.css 文件中以隐藏登录部分并显示仪表板部分：

/* 测试后删除 */ .login-section { display: none; } .dashboard-section { 显示：flex； }

您的仪表板应如下所示：

这是一个简单的仪表板，显示连接用户的钱包地址和他们的以太坊钱包余额。

我们将在下一步中继续实现登录功能，但我们将在此处使用 JavaScript 来处理登录和仪表板部分之间的切换（基于应用程序的身份验证状态），而不是手动更新 CSS 显示属性。

确保删除测试 CSS 样式第 5 步 - 检查用户是否安装了以太坊钱包

我们希望确保用户在他们的浏览器上安装了以太坊钱包。 我们还想在页面加载后立即提示没有安装钱包的用户。

我们将遵循以下思考过程：

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

上面的思考过程可以转化为如下几行代码：

将以下代码复制并粘贴到您的 index.js 文件中：

// 1. 创建全局 userWalletAddress 变量 window.userWalletAddress = null; // 2. 当浏览器准备好 window.onload = async (event) => { // 2.1 检查是否安装了 ethereum 扩展 if (window.ethereum) { // 3. 创建 web3 实例 window.web3 = new Web3(窗口.ethereum); } else { // 4. 提示用户安装 Metamask alert("Please install MetaMask or any Ethereum Extension Wallet"); } // 5. 检查用户是否已经登录并更新全局 userWalletAddress 变量 window.userWalletAddress = window.localStorage.getItem("userWalletAddress"); // 6. 显示用户仪表板 showUserDashboard(); };

我们将使用以下测试用例来测试我们的实现：

案例 1 - 没有安装以太坊钱包的用户

我们将使用隐身窗口来测试当没有安装以太坊钱包的用户尝试使用我们的应用程序时会发生什么。

启动隐身浏览器窗口并访问项目 URL：

您将收到此消息提示：请安装 MetaMask 或任何以太坊扩展钱包。

Case 1通过了✅

案例 2 - 安装了以太坊钱包的用户

在安装了以太坊钱包的正常浏览器窗口中启动您的项目，因此您现在应该不会收到提示消息。

案例2通过了✅

但是第6步中的showUserDashboard函数还没有定义，我们稍后再创建。

第 6 步 - 添加 Web3 登录功能

对于登录功能，我们的主要兴趣是用户的钱包地址，我们将从用户在以太坊钱包中选择的帐户中获取。 我们只对选定的以太坊钱包地址感兴趣，因为用户可以在他们的钱包上拥有多个以太坊账户。

我们将按照以下思路实现我们的以太坊登录功能：

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

上面的思考过程可以转化为如下几行代码：

index.js 使用以下代码更新您的文件：

// 1. Web3 登录函数 const loginWithEth = async () => { // 1.1 检查是否有全局 window.web3 实例 if (window.web3) { try { // 2. 获取用户的以太坊账户 - 提示 metamask 到login const selectedAccount = await window.ethereum .request({ method: "eth_requestAccounts", }) .then((accounts) => accounts[0]) .catch(() => { // 2.1 如果用户取消登录prompt throw Error("请选择账户"); }); // 3. 将全局 userWalletAddress 变量设置为选定的帐户窗口。 userWalletAddress = selectedAccount; // 4. 将用户的钱包地址存入本地存储窗口。 本地存储。 setItem ("用户钱包地址", selectedAccount); // 5. 显示用户仪表板 showUserDashboard(); } 赶上（错误）{ 警报（错误）； } } else { alert("找不到钱包"); } }; // 6 .当用户单击登录按钮时运行 loginWithEth 函数 document.querySelector(".login-btn").addEventListener("click", loginWithEth);

在生产就绪的应用程序中，您可能希望将用户的以太坊钱包地址存储在数据库中作为用户的唯一标识符。

在我们继续测试我们的实现之前，让我们在下一步中创建 showUserDashboard 函数。

第 7 步 - 处理重定向

在此步骤中，我们将在登录部分和用户仪表板部分之间实现重定向（切换）。

为了处理重定向，我们将检查用户是否连接到他们的钱包地址。 如果他们没有连接，我们将显示登录部分，一旦连接，我们将把用户重定向到仪表板部分。

我们还想更新网页的页面标题，以向用户显示网站的状态。

使用以下代码行更新您的 index.js 文件：

// 显示用户仪表板的函数 const showUserDashboard = async () => { // 如果用户未登录 - userWalletAddress 为 null if (!window.userWalletAddress) { // 更改页面标题 document.title = "Web3登录”; // 显示登录部分 document.querySelector(".login-section").style.display = "flex"; // 隐藏用户仪表板部分 document.querySelector(".dashboard-section").style. 显示=“无”； // 从函数返回 return false; } // 改变页面标题 document.title = "Web3 Dashboard "; // 隐藏登录部分 document.querySelector(".login-section").style .display = "none"; // 显示仪表板部分 document.querySelector(".dashboard-section").style.display = "flex"; // 显示用户的钱包地址 // showUserWalletAddress(); // 获取用户的钱包余额 // getWalletBalance(); };

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

在下一步中，我们将创建 showUserWalletAddress 函数以在仪表板上显示用户的钱包地址。

第 8 步 - 显示用户以太坊钱包地址

在此步骤中，我们将创建 showUserWalletAddress 函数，负责在仪表板上显示用户的钱包地址。 已连接用户的钱包地址已在 userWalletAddress 全局变量中可用。

使用此代码取消注释并更新您的：index.js showUserWalletAddress();

// 从全局 userWalletAddress 变量中显示用户的钱包地址 const showUserWalletAddress = () => { const walletAddressEl = document.querySelector(".wallet-address"); walletAddressEl.innerHTML = window.userWalletAddress; };

现在，刷新页面后，您的以太坊钱包地址将显示在您的仪表板上。

第 9 步 - 显示用户以太坊余额

在此步骤中，我们将创建 getWalletBalance() 函数。 此函数将获取用户的余额并将其显示在仪表板上。

我们将使用 window.web3.eth.getBalance(ethWalletAddress); 查询连接用户以太坊账户余额的方法。

取消注释 getWalletBalance(); 函数并将下面的代码应用到您的 index.js 文件。

// 获取用户的钱包余额 const getWalletBalance = async () => { // 检查是否有全局 userWalletAddress 变量 if (!window.userWalletAddress) { return false; } // 获取用户的钱包余额 const balance = await window. web3.eth.getBalance(window.userWalletAddress); // 将余额转换为以太币 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 token [6] 注销。

以下代码行将处理 web3 注销功能：

// web3 logout function const logout = () => { // 将全局 userWalletAddress 变量设置为 null window.userWalletAddress = null; // 从本地存储中删除用户的钱包地址 window.localStorage.removeItem("userWalletAddress");// 显示用户仪表盘 showUserDashboard(); }; // 当用户点击注销按钮时运行注销函数 document.querySelector(".logout-btn").addEventListener("click", logout);

就是这样！ 要测试注销功能，请单击“注销”按钮。 您应该被重定向到登录部分，如下所示。

恭喜

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

如果您在这里遇到任何问题，请查看完整的源代码 [7]。

综上所述

在本教程中，我们使用 Web3.js 库创建了一个登录身份验证系统，允许用户使用他们的以太坊钱包连接到您的网站。 您学习了如何获取用户的以太坊账户余额，将其转换为以太币 (Eth)，并将其显示给用户。

引用链接

[1] 在这里您可以：

[2] 这里：

[3] 这里：

[4] 链接：

[5] 直播服务器：

[6] 智威汤逊代币：

[7] 完整源码：