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

Web3 身份验证是具有公共数据的应用程序中的一项常见且至关重要的功能。它有助于根据当前登录的用户识别谁在访问该网站以及要传递哪些数据。
介绍
多年来，互联网从第一个版本的网络 (web1) 发展而来，该版本需要用户名和密码来进行用户身份验证。

文章插图

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

文章插图

web2 的主要问题是人们无法控制自己的个人数据。相反，中心机构（例如政府和您已签约的大多数大公司）以他们认为合适的方式持有和管理其用户的数据。
现在，通常称为 web3 的第三版网络是互联网的去中心化版本，每个用户都可以完全控制自己的个人数据，而前几代互联网用户几乎无法控制。
Web3 身份验证只需要用户连接到他们在 web3 平台上的加密钱包，例如 OpenSea 。

文章插图

本文演示了如何使用 Web3.js 库将 web3 登录身份验证添加到您的网站。
演示
下面是本文最后我们要搭建的web3登录认证系统的演示视频。
https://youtu.be/Glvg3uX7reE
先决条件
在我们继续本指南之前，您应该对 JAVAscript 有基本的了解并安装基于以太坊的钱包（见第 2 步）。
什么是 Web3.js？
根据以太坊基金会的说法，Web3.js 是一个库集合，允许您使用 HTTP、IPC 或 WebSocket 与本地或远程以太坊节点进行交互。
Web3.js 可用于应用程序的前端或后端，以从区块链读取数据、进行交易并将智能合约部署到区块链。您可以在此处[1]阅读 Web3.js 库的介绍。
第 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 Login
我们已经成功地将 Web3.js 库添加到我们的项目中。
第 2 步 - 设置以太坊钱包
为了让用户从我们的应用程序连接到他们的以太坊帐户，他们必须在他们的设备上设置一个基于以太坊的钱包。
以太坊钱包将充当银行应用程序，允许您访问您的银行账户。以太坊钱包可以是物理硬件钱包、桌面钱包、移动钱包应用程序或 Web 浏览器钱包扩展（如 Metamask）的形式。
在此处[3]阅读有关钱包的更多信息。

文章插图

在这个 web3 js 教程中，我们将使用 Metamask，它允许我们通过 Web 浏览器与我们的帐户进行交互。按照此链接[4]在您的浏览器上安装 Metamask 钱包。
第 3 步 - 我们将构建什么 - 思考过程
我们将构建一个登录认证系统，用户可以使用他们的以太坊钱包登录我们的应用程序。
我们的应用程序将具有以下内容：

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

如果没有登录用户，则默认显示登录部分，而一旦用户连接了他们的以太坊帐户，将显示仪表板部分。我们将使用 css 显示属性和 JavaScript 切换这两个部分。
第 4 步 - 构建登录和仪表板界面
现在我们已经安装了 Web3.js 和以太坊钱包，让我们构建用户可以连接到他们的钱包的界面和一个仪表板，他们将在登录后被重定向。