Web3 身份驗證是具有公共數(shù)據(jù)的應用程序中的一項常見且至關重要的功能。它有助于根據(jù)當前登錄的用戶識別誰在訪問該網(wǎng)站以及要傳遞哪些數(shù)據(jù)。
介紹
多年來，互聯(lián)網(wǎng)從第一個版本的網(wǎng)絡 (web1) 發(fā)展而來，該版本需要用戶名和密碼來進行用戶身份驗證。
從 web1，我們移到了 web 的第二個版本 web2。這是在其他平臺上使用社交媒體作為識別和身份驗證手段的地方，無需手動填寫用戶名和密碼。
web2 的主要問題是人們無法控制自己的個人數(shù)據(jù)。相反，中心機構（例如政府和您已簽約的大多數(shù)大公司）以他們認為合適的方式持有和管理其用戶的數(shù)據(jù)。
現(xiàn)在，通常稱為 web3 的第三版網(wǎng)絡是互聯(lián)網(wǎng)的去中心化版本，每個用戶都可以完全控制自己的個人數(shù)據(jù)，而前幾代互聯(lián)網(wǎng)用戶幾乎無法控制。
Web3 身份驗證只需要用戶連接到他們在 web3 平臺上的加密錢包，例如 OpenSea。
本文演示了如何使用 Web3.js 庫將 web3 登錄身份驗證添加到您的網(wǎng)站。
演示
下面是本文最后我們要搭建的web3登錄認證系統(tǒng)的演示視頻。
https://youtu.be/Glvg3uX7reE
先決條件
在我們繼續(xù)本指南之前，您應該對 JAVAscript 有基本的了解并安裝基于以太坊的錢包（見第 2 步）。
什么是 Web3.js？
根據(jù)以太坊基金會的說法，Web3.js 是一個庫集合，允許您使用 HTTP、IPC 或 WebSocket 與本地或遠程以太坊節(jié)點進行交互。
Web3.js 可用于應用程序的前端或后端，以從區(qū)塊鏈讀取數(shù)據(jù)、進行交易并將智能合約部署到區(qū)塊鏈。您可以在此處[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。
在您的項目目錄中，創(chuàng)建一個新index.html文件并粘貼以下 HTML 代碼：
charset="UTF-8" /> Web3 Login
我們已經(jīng)成功地將 Web3.js 庫添加到我們的項目中。
第 2 步 - 設置以太坊錢包
為了讓用戶從我們的應用程序連接到他們的以太坊帳戶，他們必須在他們的設備上設置一個基于以太坊的錢包。
以太坊錢包將充當銀行應用程序，允許您訪問您的銀行賬戶。以太坊錢包可以是物理硬件錢包、桌面錢包、移動錢包應用程序或 Web 瀏覽器錢包擴展（如 Metamask）的形式。
在此處[3]閱讀有關錢包的更多信息。
在這個 web3 js 教程中，我們將使用 Metamask，它允許我們通過 Web 瀏覽器與我們的帳戶進行交互。按照此鏈接[4]在您的瀏覽器上安裝 Metamask 錢包。
第 3 步 - 我們將構建什么 - 思考過程
我們將構建一個登錄認證系統(tǒng)，用戶可以使用他們的以太坊錢包登錄我們的應用程序。
我們的應用程序?qū)⒕哂幸韵聝?nèi)容：
- 1. 用戶可以連接到他們的錢包的登錄部分。
- 2. 顯示登錄用戶的錢包地址和他們的以太坊賬戶余額的儀表板部分。
如果沒有登錄用戶，則默認顯示登錄部分，而一旦用戶連接了他們的以太坊帳戶，將顯示儀表板部分。我們將使用 css 顯示屬性和 JavaScript 切換這兩個部分。
第 4 步 - 構建登錄和儀表板界面
現(xiàn)在我們已經(jīng)安裝了 Web3.js 和以太坊錢包，讓我們構建用戶可以連接到他們的錢包的界面和一個儀表板，他們將在登錄后被重定向。
使用以下代碼行更新您的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
接下來，創(chuàng)建一個新index.js文件，這是我們稍后將編寫功能的地方。
最后，創(chuàng)建一個新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; }
您的儀表板應如下所示：
這是一個簡單的儀表板，顯示連接用戶的錢包地址和他們的以太坊錢包余額。
我們將在下一步中繼續(xù)實現(xiàn)登錄功能，而不是手動更新 CSS 顯示屬性，在此我們將使用 JavaScript 來處理登錄和儀表板部分之間的切換（基于應用程序的身份驗證狀態(tài)） .
確保刪除測試 CSS 樣式第 5 步 - 檢查用戶是否安裝了以太坊錢包
我們希望確保用戶在其瀏覽器上安裝了以太坊錢包。我們還希望在頁面加載后立即提示未安裝錢包的用戶。
我們將遵循以下思考過程：
- 1. 創(chuàng)建一個全局范圍userWalletAddress變量，這是我們將存儲用戶錢包地址的地方。
- 2. 在頁面加載時，檢查用戶是否安裝了以太坊錢包。
- 3. 如果用戶安裝了錢包，則創(chuàng)建一個新的 web3 實例。
- 4. 否則會提示用戶安裝錢包。
- 5. 然后我們會檢查瀏覽器中是否已經(jīng)存在用戶的錢包地址localStorage，并將其更新為userWalletAddress變量。
- 6. 最后，我們將調(diào)用該showUserDashboard函數(shù)。
上面的思考過程可以翻譯成以下幾行代碼：
將以下代碼復制并粘貼到您的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(); };
我們將使用以下測試用例來測試我們的實現(xiàn)：
案例 1 - 未安裝以太坊錢包的用戶
我們將使用一個隱身窗口來測試當沒有安裝以太坊錢包的用戶嘗試使用我們的應用程序時會發(fā)生什么。
啟動瀏覽器隱身窗口并訪問項目 URL：
系統(tǒng)會提示您此消息：請安裝 MetaMask 或任何以太坊擴展錢包。
案例1通過?
案例 2 - 安裝了以太坊錢包的用戶
在安裝了以太坊錢包的普通瀏覽器窗口中啟動您的項目，因此現(xiàn)在您不應該收到提示消息。
案例2通過?
但是showUserDashboard第 6 步中的函數(shù)還沒有定義，我們稍后會創(chuàng)建它。
第 6 步 - 添加 Web3 登錄功能
對于登錄功能，我們的主要興趣是用戶的錢包地址，我們將從以太坊錢包中用戶選擇的賬戶中獲取該地址。我們只對選定的以太坊錢包地址感興趣，因為用戶可以在他們的錢包上擁有多個以太坊賬戶。
我們將按照下面的思路來實現(xiàn)我們的以太坊登錄功能：
- 1. 首先，創(chuàng)建一個異步loginWithEth函數(shù)并檢查是否啟用了 web3 實例。
- 2. 如果啟用了 web3 實例，我們將使用該window.ethereum方法觸發(fā) Metamask 錢包，供用戶選擇以太坊帳戶。
- 3. 選擇帳戶后，我們將userWalletAddress使用用戶選擇的錢包地址更新全局變量。
- 4. 接下來，我們將選擇的帳戶存儲在localStorage.
- 5. 然后，我們將用戶重定向到他們的儀表板。
- 6. 最后，我們將loginWithEth使用 click 事件偵聽器將該函數(shù)綁定到登錄按鈕。
上面的思考過程可以翻譯成以下幾行代碼：
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);
在生產(chǎn)就緒的應用程序中，您可能希望將用戶的以太坊錢包地址存儲在您的數(shù)據(jù)庫中，以作為用戶的唯一標識符。
在我們繼續(xù)測試我們的實現(xiàn)之前，讓我們showUserDashboard在下一步中創(chuàng)建函數(shù)。
第 7 步 - 處理重定向
在這一步中，我們將在登錄部分和用戶儀表板部分之間實現(xiàn)重定向（切換）。
為了處理重定向，我們將檢查用戶是否連接到他們的錢包地址。如果它們未連接，我們將顯示登錄部分，一旦連接，我們會將用戶重定向到儀表板部分。
我們還想更新網(wǎng)頁的頁面標題以向用戶顯示網(wǎng)站的狀態(tài)。
使用以下代碼行更新您的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 錢包并被重定向到儀表板部分。也看看標題欄！
在下一步中，我們將創(chuàng)建showUserWalletAddress在儀表板上顯示用戶錢包地址的函數(shù)。
第 8 步 - 顯示用戶以太坊錢包地址
在這一步中，我們將創(chuàng)建showUserWalletAddress負責在儀表板上顯示用戶錢包地址的函數(shù)。已連接用戶的錢包地址已在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; };
現(xiàn)在，刷新頁面后，您的以太坊錢包地址將顯示在您的儀表板上。
第 9 步 - 顯示用戶以太坊余額
在這一步中，我們將創(chuàng)建getWalletBalance()函數(shù)。此功能將獲取用戶的余額并將其顯示在儀表板上。
我們將使用該window.web3.eth.getBalance(ethWalletAddress);方法來查詢連接用戶的以太坊賬戶余額。
取消注釋該getWalletBalance();函數(shù)并將下面的代碼應用到您的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函數(shù)中，我們正在檢查是否有連接的用戶，因為需要以太坊錢包地址來獲取以太坊賬戶余額。
然后，我們通過將連接的錢包地址從我們的window.userWalletAddress全局變量作為參數(shù)傳遞給該getBalance方法來查詢用戶余額。
最后，我們將返回的“Wei”余額轉(zhuǎn)換為“ether”并將其顯示在儀表板上。
以太（Eth）的最小單位是“Wei”。該fromWei方法是 web3 中的一種實用方法，可將任何“Wei”值轉(zhuǎn)換為以太幣。
刷新網(wǎng)頁后，應該會顯示您的以太坊余額。
如下所示，雖然我的余額為零
第 10 步 - 添加 Web3 注銷功能
本 web3 教程的最后一步是在我們的應用程序中實現(xiàn)注銷功能。我們?nèi)绾螐?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);
就是這樣！要測試注銷功能，請單擊“注銷”按鈕。您應該被重定向到登錄部分，如下所示。
恭喜
您已經(jīng)成功地學習了如何將 Web3.js 登錄添加到您的應用程序。這是我們最終的應用程序演示：
如果您在此處遇到任何問題，請查看完整的源代碼[7]。
結(jié)論
在本教程中，我們使用 Web3.js 庫創(chuàng)建了一個登錄身份驗證系統(tǒng)，允許用戶使用他們的以太坊錢包連接到您的網(wǎng)站。您學習了如何獲取用戶的以太坊賬戶余額，將其轉(zhuǎn)換為以太 (Eth) 并將其顯示給用戶。
引用鏈接
[1] 您可以在此處: https://web3.hashnode.com/what-is-web3js-an-introduction-into-the-web3js-libraries
[2] 此處: https://cdnjs.com/libraries/web3
[3] 在此處: https://web3.hashnode.com/what-is-a-web3-wallet
[4] 鏈接: https://metamask.io/download/
[5] liveserver: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
[6] JWT 令牌: https://jwt.io/introduction
[7] 完整的源代碼: https://github.com/unclebay143/web3-authentication
