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