1， 摘要
網站太多，各種用戶名/密碼實在記不住。所以我們逐漸接受了BAT賬號的授權登錄功能。在以太坊DAPP應用中，也可以使用MetaMask實現授權后一鍵登錄功能。MetaMask是去中心化錢包，授權信息不會如BAT中心一樣存在被收集利用的問題。
本文從技術層面講清楚原理，并結合代碼說明如何實現。
2，授權一鍵式登錄的利弊分析
我們往往被自己的密碼難住，越來越抵制傳統的電子郵件/密碼注冊流程。通過微信，QQ，支付寶，Facebook，Google或GitHub一鍵式社交登錄功能可以省去記住密碼或者密碼泄露的而風險。當然，它也需要權衡利弊。
社交媒體登錄集成的優點：
- 沒有更麻煩的填表。
- 無需記住另一個用戶名/密碼對。
- 整個過程需要幾秒鐘而不是幾分鐘。
社交媒體登錄集成的缺點：
- 由于用戶的信息是從外部提供商處加載的，因此這會對提供商如何使用所有這些個人數據產生巨大的隱私擔憂。例如，在撰寫本文時，Facebook正面臨著數據隱私問題。
加密貓(https://www.cryptokitties.co/)游戲中，用戶不需要輸入用戶名，密碼就可以建立自己的賬戶體系，進行登錄交易。
本文介紹下這個方法的原理和代碼實現，使用MetaMask擴展的一鍵式加密安全登錄流程，所有數據都存儲在我們自己的后端。我們稱為“使用MetaMask登錄”。
一張價值千言萬語的圖片，這里是我們要構建的登錄流程的演示：
看起來不錯？讓我們開始吧！
3， 如何使用Metamask進行一鍵式登錄流程
一鍵式登錄流程的基本思想是，通過使用私鑰對一段數據進行簽名，可以很容易地通過加密方式證明帳戶的所有權。如果您設法簽署由我們的后端生成的精確數據，那么后端將認為您是該錢包地址的所有者。因此，我們可以構建基于消息簽名的身份驗證機制，并將用戶的錢包地址作為其標識符。
如果它看起來不太清楚，那就沒問題了，因為我們會逐一解釋它：
請注意，雖然我們將使用連接到以太坊區塊鏈的工具（MetaMask，以太坊錢包地址），但此登錄過程實際上并不需要區塊鏈：它只需要其加密功能。話雖如此，隨著MetaMask成為如此受歡迎的擴展，現在似乎是介紹此登錄流程的好時機。
4， MetaMask瀏覽器擴展
如果您已經知道MetaMask是什么，請跳過本節。
MetaMask是一個瀏覽器插件，可作為MetaMask Chrome擴展或Firefox附加組件使用。它的核心是它作為以太坊錢包：通過安裝它，您將可以訪問一個獨特的以太坊錢包地址，您可以使用它開始發送和接收以太幣或ERC20通證。
但MetaMask不僅僅是以太坊錢包。作為瀏覽器擴展，它可以與您正在瀏覽的當前網頁進行交互。它通過在您訪問的每個網頁中注入一個名為web3.js的JavaScript庫來實現。注入后，web3將通過window.web3的JavaScript代碼為你訪問的每個網頁提供一個對象。要查看此對象，只需在Chrome或Firefox DevTools控制臺鍵入window.web3（如果已安裝MetaMask），結果如下圖。
Web3.js是以太坊區塊鏈的JavaScript接口。有以下功能：
- 獲取最新的區塊號（
web3.eth.getBlockNumber） - 檢查MetaMask上的當前活動帳戶（
web3.eth.coinbase） - 獲取任何帳戶的余額（
web3.eth.getBalance） - 發送交易（
web3.eth.sendTransaction） - 使用當前帳戶的私鑰對消息進行簽名（
web3.personal.sign） - ......還有點擊獲取更多接口說明
安裝MetaMask時，任何前端代碼都可以訪問所有這些功能，并與區塊鏈進行交互。他們被稱為dapps或DApps（去中心化的應用程序，有時甚至寫成“?Apps”）。
與DApp開發相關： 時間鎖定錢包：以太坊智能合約簡介
web3.js中的大多數函數都是讀函數（get block, get balance, etc.），web3立即給出響應。但是，某些功能（如web3.eth.sendTransaction和web3.personal.sign）需要當前帳戶使用其私鑰對某些數據進行簽名。這些函數觸發MetaMask顯示確認彈窗，以仔細檢查用戶是否知道他或她正在簽名的內容。
讓我們看看如何使用MetaMask。要進行簡單測試，請在DevTools控制臺中粘貼以下行：
web3.personal.sign(web3.fromUtf8("你好，我是輝哥！!"), web3.eth.coinbase, console.log);
此命令表示：使用coinbase帳戶（即當前帳戶）將我的消息（從utf8轉換為十六進制）進行簽名，并以打印作為回調函數打印出簽名。輸入回車后，將出現MetaMask彈窗，如果點擊簽名按鈕，將打印簽名的消息。
我們將web3.personal.sign在登錄流程中使用。
關于這一部分的最后一點說明：MetaMask將web3.js注入到您當前的瀏覽器中，但實際上還有其他獨立的瀏覽器也會注入web3.js，例如Mist。但是，在我看來，MetaMask為普通用戶提供了探索dapps的最佳用戶體驗和最簡單的轉換。
4， 登錄流程如何工作
這是如何做到的呢？這部分內容講說服你，證明這種方式是安全的。所以為什么部分的介紹就比較短了。
如前面所述，我們將忘記區塊鏈。我們有一個傳統的Web 2.0客戶端 - 服務器RESTful架構。我們將做出一個假設：訪問我們的前端網頁的所有用戶都安裝了MetaMask。有了這個假設，我們將展示無密碼加密安全登錄流程的工作原理。
第1步：修改用戶模型（后端）
首先，我們的User模型需要有兩個新的必填字段：publicAddress和nonce。此外，publicAddress需要具有唯一性。你可以保持平常username，email和password字段，特別是如果你想平行實現您MetaMask登錄電子郵件/密碼登錄，但它們是可選的。
如果用戶希望使用MetaMask登錄，則注冊過程也會略有不同，因為注冊時publicAddress將是必填字段。不過請放心，用戶永遠不需要手動輸入publicAddress錢包地址，因為它可以通過web3.eth.coinbase變量來提取。
第2步：生成隨機數（后端）
對于數據庫中的每個用戶，在nonce字段中生成隨機字符串。例如，nonce可以是一個大的隨機整數。
第3步：用戶獲取他們的隨機數（前端）
在我們的前端JavaScript代碼中，假設存在MetaMask，我們可以訪問window.web3。因此，我們可以通知web3.eth.coinbase獲取當前MetaMask帳戶的錢包地址。
當用戶單擊登錄按鈕時，我們向后端發出API調用以檢索與其錢包地址關聯的隨機數。像帶參數獲取例如GET /api/users?publicAddress=${publicAddress}應該做的事情那樣。當然，由于這是一個未經身份驗證的API調用，因此后端應配置為僅顯示此路由上的公共信息包括nonce。
如果先前的請求未返回任何結果，則表示當前錢包地址尚未注冊。我們需要先通過POST /users傳遞publicAddress請求消息體來創建一個新帳戶。另一方面，如果有結果，那么我們存儲它的nonce。
第4步：用戶簽署Nonce（前端）
一旦前端接收nonce到先前API調用的響應，它將運行以下代碼：
web3.personal.sign(nonce, web3.eth.coinbase, callback);
這將提示MetaMask顯示用于簽名消息的確認彈出窗口。隨機數將顯示在此彈出窗口中，以便用戶知道她或他有沒有簽署某些惡意數據。
當她或他接受簽名時，將使用帶簽名的消息（稱為signature）作為參數調用回調函數。然后前端進行另一個API調用POST /api/authentication，傳遞一個帶有signature和publicAddress的消息體。
第5步：簽名驗證（后端）
當后端收到POST /api/authentication請求時，它首先根據請求消息體中publicAddress獲取數據庫中的對應用戶，特別是它相關的隨機數nonce。
具有隨機數，錢包地址和簽名后，后端可以加密地驗證用戶已正確簽署了隨機數。如果確認是這種情況，那么用戶已經證明了擁有錢包地址的所有權，我們可以考慮對她或他進行身份驗證。然后可以將JWT或會話標識符返回到前端。
第6步：更改Nonce（后端）
為了防止用戶使用相同的簽名再次登錄（如果它被泄露），我們確保下次同一用戶想要登錄時，她或他需要簽署一個新的nonce。這是通過nonce為該用戶生成另一個隨機數并將其持久保存到數據庫來實現的。
這就是我們管理nonce簽名無密碼登錄流程的方法。
5，為什么登錄流程有效
根據定義，身份驗證實際上只是帳戶所有權的證明。如果您使用錢包地址唯一地標識您的帳戶，那么證明您加密方式擁有該帳戶就非常簡單。
為了防止黑客獲取某個特定郵件及其簽名（但不是您的實際私鑰），我們會強制需要簽名的消息滿足以下條件：
- 由后端提供
- 定期改變
在我們的demo樣例中，每次成功登錄后我們都改變了它，但也可以設想基于時間戳的機制。
6， DEMO代碼實現
在本節中，我將逐一完成上述六個步驟。我將展示一些代碼片段，以便我們如何從頭開始構建此登錄流，或者將其集成到現有的后端，而不需要太多努力。
為了本文的目的，我創建了一個小型演示應用程序。我正在使用的堆棧如下：
- Node.js，Express和SQLite（通過Sequelize ORM）在后端實現RESTful API。它在成功驗證時返回JWT。
- 在前端反應單頁面應用程序。
我嘗試使用盡可能少的庫。我希望代碼足夠簡單，以便您可以輕松地將其移植到其他技術堆棧。
訪問https://login-with-metamask.firebaseapp.com/可以獲得一個演示，也可以參考步驟搭建自己的本地工程。
歡迎加入輝哥的知識星球，從中下載本案例代碼工程，也可加專門微信群交流技術問題。
第1步：修改用戶模型（后端）
需要兩個字段：publicAddress和nonce。我們初始化nonce為隨機大數。每次成功登錄后都應更改此號碼。我還在username這里添加了一個可選字段，用戶可以更改。
.\backend\src\models\user.model.js
const User = sequelize.define('User', {
nonce: {
allowNull: false,
type: Sequelize.INTEGER.UNSIGNED,
defaultValue: () => Math.floor(Math.random() * 1000000) // Initialize with a random nonce
},
publicAddress: {
allowNull: false,
type: Sequelize.STRING,
unique: true,
validate: { isLowercase: true }
},
username: {
type: Sequelize.STRING,
unique: true
}
});
為簡單起見，我將publicAddress字段設置為小寫。更嚴格的檢查地址是否是有效的以太坊地址的方法參考鏈接：https://ethereum.stackexchange.com/questions/1374/how-can-i-check-if-an-ethereum-address-is-valid)。
第2步：生成隨機數（后端）
這是在defaultValue()上面的模型定義中的函數中完成的。
第3步：用戶獲取他們的隨機數（前端）
下一步是在后端添加一些樣板代碼來處理User模型上的CRUD方法，我們在這里不做。
切換到前端代碼，當用戶單擊登錄按鈕時，我們的handleClick處理程序執行以下操作：
.\frontend\src\Login\Login.js
class Login extends Component {
handleClick = () => {
// --snip--
const publicAddress = web3.eth.coinbase.toLowerCase();
// Check if user with current publicAddress is already present on back end
fetch(`${process.env.REACT_APP_BACKEND_URL}/users?publicAddress=${publicAddress}`)
.then(response => response.json())
// If yes, retrieve it. If no, create it.
.then(
users => (users.length ? users[0] : this.handleSignup(publicAddress))
)
// --snip--
};
handleSignup = publicAddress =>
fetch(`${process.env.REACT_APP_BACKEND_URL}/users`, {
body: JSON.stringify({ publicAddress }),
headers: {
'Content-Type': 'application/json'
},
method: 'POST'
}).then(response => response.json());
}
在這里，我們正在檢索MetaMask活動帳戶web3.eth.coinbase。然后我們檢查publicAddress后端是否已經存在。如果用戶已經存在，我們就獲取用戶信息。要么就是在handleSignup方法中創建一個新帳戶。
第4步：用戶簽署Nonce（前端）
讓我們繼續我們的handleClick方法。我們現在擁有一個由后端給出的用戶（無論是檢索還是新創建）。特別是我們有他們的nonce和publicAddress。因此，我們準備publicAddress使用與此相關聯的私鑰對nonce進行簽名web3.personal.sign。這是在handleSignMessage函數中完成的。
請注意，web3.personal.sign將字符串的十六進制表示作為其第一個參數。我們需要使用UTF-8編碼的字符串轉換為十六進制格式web3.fromUtf8。此外，我決定簽署一個更加用戶友好的句子，而不是僅簽署nonce，因為它將顯示在MetaMask確認彈出窗口中：I am signing my once-time nonce: ${nonce}。
class Login extends Component {
handleClick = () => {
// --snip--
fetch(`${process.env.REACT_APP_BACKEND_URL}/users?publicAddress=${publicAddress}`)
.then(response => response.json())
// If yes, retrieve it. If no, create it.
.then(
users => (users.length ? users[0] : this.handleSignup(publicAddress))
)
// Popup MetaMask confirmation modal to sign message
.then(this.handleSignMessage)
// Send signature to back end on the /auth route
.then(this.handleAuthenticate)
// --snip--
};
handleSignMessage = ({ publicAddress, nonce }) => {
return new Promise((resolve, reject) =>
web3.personal.sign(
web3.fromUtf8(`I am signing my one-time nonce: ${nonce}`),
publicAddress,
(err, signature) => {
if (err) return reject(err);
return resolve({ publicAddress, signature });
}
)
);
};
handleAuthenticate = ({ publicAddress, signature }) =>
fetch(`${process.env.REACT_APP_BACKEND_URL}/auth`, {
body: JSON.stringify({ publicAddress, signature }),
headers: {
'Content-Type': 'application/json'
},
method: 'POST'
}).then(response => response.json());
}
當用戶成功簽署消息后，我們將轉到該handleAuthenticate方法。我們只是向/auth后端的路由發送請求，發送我們publicAddress以及signature用戶剛簽名的消息。
第5步：簽名驗證（后端）
這是稍微復雜一點的部分。后端在/auth包含一個 publicAddress和一個路由上接收請求簽名signature，并且需要驗證錢包地址publicAddress是否已簽名正確的隨機數nonce。
第一步是從數據庫中檢索用戶所說的publicAddress; 只有一個因為我們publicAddress在數據庫中定義為唯一字段。然后，我們將消息設置msg為“I am signing my one-time nonce...”，與步驟4中的前端完全相同，使用此用戶的隨機數。
下一個塊是驗證本身。有一些加密涉及。如果您喜歡研究，我建議您閱讀有關橢圓曲線簽名算法以獲得更多信息。
總結這部分的作用，對于給出的msg（包含nonce）和signature信息，ecrecover函數輸出用于簽名msg的錢包地址。如果它與我們請求消息體的publicAddress一致，則證明了他們擁有publicAddress的所有權。經過這個過程，我們認為他們經過身份驗證的。
User.findOne({ where: { publicAddress } })
// --snip--
.then(user => {
const msg = `I am signing my one-time nonce: ${user.nonce}`;
// We now are in possession of msg, publicAddress and signature. We
// can perform an elliptic curve signature verification with ecrecover
const msgBuffer = ethUtil.toBuffer(msg);
const msgHash = ethUtil.hashPersonalMessage(msgBuffer);
const signatureBuffer = ethUtil.toBuffer(signature);
const signatureParams = ethUtil.fromRpcSig(signatureBuffer);
const publicKey = ethUtil.ecrecover(
msgHash,
signatureParams.v,
signatureParams.r,
signatureParams.s
);
const addressBuffer = ethUtil.publicToAddress(publicKey);
const address = ethUtil.bufferToHex(addressBuffer);
// The signature verification is successful if the address found with
// ecrecover matches the initial publicAddress
if (address.toLowerCase() === publicAddress.toLowerCase()) {
return user;
} else {
return res
.status(401)
.send({ error: 'Signature verification failed' });
}
})
成功驗證后，后端生成JWT并將其發送回客戶端。這是一種經典的身份驗證方案，所以我不會在這里放置代碼。
第6步：更改Nonce（后端）
出于安全原因，最后一步是更改nonce。在成功驗證后的某處，添加以下代碼：
// --snip--
.then(user => {
user.nonce = Math.floor(Math.random() * 1000000);
return user.save();
})
// --snip--
7，今天就可以投入生產了
雖然區塊鏈可能有其缺陷并且仍處于早期階段，但我無法強調如何在今天的任何現有網站上實施此登錄流程的重要性。以下是為什么此登錄流程優先于電子郵件/密碼和社交登錄的參數列表：
- 提高安全性：公鑰加密的所有權證明可以說比通過電子郵件/密碼或第三方證明所有權更安全，因為MetaMask在您的計算機本地存儲憑據，而不是在線服務器，這使得攻擊面較小。
- 簡化的用戶體驗：這是一鍵式（也可能是雙擊）登錄流程，在幾秒鐘內完成，無需輸入或記住任何密碼。
- 增加隱私：不需要電子郵件，也不涉及第三方。
當然，MetaMask登錄流程可以很好地與其他傳統登錄方法并行使用。需要在每個帳戶與其擁有的錢包地址之間進行映射。
但是這個登錄流程并不適合所有人：
-
用戶需要安裝MetaMask：如果沒有MetaMask或支持
web3的瀏覽器，此登錄流程顯然無效。如果您的受眾對加密貨幣不感興趣，他們甚至會考慮安裝MetaMask。隨著最近的通證熱潮，讓我們希望我們正在走向Web 3.0互聯網。 - 需要在后端完成一些工作：正如我們所見，實現此登錄流程的簡單版本非常簡單。但是，要將其集成到現有的復雜系統中，需要在接觸身份驗證的所有區域進行一些更改：注冊，數據庫，身份驗證路由等。這尤其正確，因為每個帳戶都將與一個或多個錢包地址相關聯。
- 它不適用于移動設備：看以下描述。
8， 移動設備的缺點
正如我們所見，這web3是此登錄流程的先決條件。在桌面瀏覽器上，MetaMask會注入它。但是，移動瀏覽器沒有擴展程序，因此此登錄流程無法在移動版Safari，Chrome或Firefox上開箱即用。有一些獨立的移動瀏覽器注入了web3基于MetaMask的瀏覽器。在撰寫本文時，它們還處于早期階段，但如果您有興趣，請查看Cipher，Status和Toshi。“使用MetaMask登錄”適用于這些移動瀏覽器。
關于移動應用程序，答案是肯定的，登錄流程有效，但需要有很多準備工作的作為基礎。作為基本準備工作，您需要自己重建一個簡單的以太坊錢包。這包括錢包地址生成，種子文字恢復和安全私鑰存儲，以及web3.personal.sign確認彈出窗口。幸運的是，有library可以幫助您。人們關心的關鍵信息是安全的，因為應用程序本身擁有私鑰。在桌面瀏覽器上，我們將此任務委托給MetaMask。
所以我認為答案是否定的，這個登錄流程今天不適用于移動設備。但它正朝著這個方向努力，今天簡單的解決方案仍然是移動用戶的并行傳統登錄方法。
【輝哥備注】雖然主流的移動端瀏覽器APP還不支持MetaMask插件，但是包括TrustWallet, AlphaWallet等錢包自帶的DAPP瀏覽器支持支付功能，也就不需要MetaMask錢包用于支付了。手機端的一鍵登錄問題轉換為別的實現方案的問題。
9， 環境搭建
1). 修改IP地址
輝哥采用Windows 環境下搭建Ubuntu Linux環境的方式，在Windows環境訪問目標測試程序，所以需要修改前后端調用的IP地址為本地地址。就是http://192.168.0.103為Ubuntu服務器的IP地址，如果調用前端也在linux下運行則可使用http://127.0.0.1地址。
.\login-with-metamask-demo\frontend.env.development
REACT_APP_BACKEND_URL=http://192.168.0.103:8000/api
.\login-with-metamask-demo\frontend\src\registerServiceWorker.js
window.location.hostname === 'http://192.168.0.103' ||
修改后，然后把完整的login-with-metamask-demo工程上傳至linux工作目錄下。
2). 安裝依賴并運行后端服務器
在新的命令窗口運行以下命令，完成安裝和服務器運行：
npm install -g yarn
yarn
yarn dev
安裝運行成功的輸出內容：
duncanwang@ubuntu:~/work/login-with-metamask-demo/backend$ yarn dev
yarn run v1.10.1
$ nodemon --exec babel-node src/
[nodemon] 1.17.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `babel-node src/`
sequelize deprecated String based operators are now deprecated. Please use Symbol based operators for better security, read more at http://docs.sequelizejs.com/manual/tutorial/querying.html#operators node_modules/sequelize/lib/sequelize.js:242:13
Express app listening on localhost:8000
^C
duncanwang@ubuntu:~/work/login-with-metamask-demo/backend$ ls
Dockerfile node_modules package.json src yarn.lock
duncanwang@ubuntu:~/work/login-with-metamask-demo/backend$ rm -r -f node_modules
duncanwang@ubuntu:~/work/login-with-metamask-demo/backend$ ls
Dockerfile package.json src yarn.lock
duncanwang@ubuntu:~/work/login-with-metamask-demo/backend$ npm install -g yarn
/home/duncanwang/.nvm/versions/node/v8.11.4/bin/yarn -> /home/duncanwang/.nvm/versions/node/v8.11.4/lib/node_modules/yarn/bin/yarn.js
/home/duncanwang/.nvm/versions/node/v8.11.4/bin/yarnpkg -> /home/duncanwang/.nvm/versions/node/v8.11.4/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.10.1
updated 1 package in 4.201s
duncanwang@ubuntu:~/work/login-with-metamask-demo/backend$ yarn
yarn install v1.10.1
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.1.3: The platform "linux" is incompatible with this module.
info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 173.70s.
duncanwang@ubuntu:~/work/login-with-metamask-demo/backend$ yarn dev
yarn run v1.10.1
$ nodemon --exec babel-node src/
[nodemon] 1.17.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `babel-node src/`
sequelize deprecated String based operators are now deprecated. Please use Symbol based operators for better security, read more at http://docs.sequelizejs.com/manual/tutorial/querying.html#operators node_modules/sequelize/lib/sequelize.js:242:13
Express app listening on localhost:8000
3). 安裝依賴并運行前端服務器
在前端程序根目錄下
yarn
yarn start
安裝運行成功的輸出內容：
duncanwang@ubuntu:~/work/login-with-metamask-demo/frontend$ yarn
yarn install v1.10.1
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info fsevents@1.1.3: The platform "linux" is incompatible with this module.
info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 266.85s.
duncanwang@ubuntu:~/work/login-with-metamask-demo/frontend$ yarn start
yarn run v1.10.1
$ react-scripts start
Starting the development server...
Compiled successfully!
You can now view frontend in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.0.103:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
4). 運行客戶端程序并測試授權一鍵登錄
在Windows瀏覽器運行客戶端程序，點擊完成SIGN簽名授權：
登錄后，更新用戶的名字。
不需要輸入密碼，完成了duncanwang和錢包地址0xD1F7922e8b78cBEB182250753ade8379d1E09949的關聯和一鍵登錄功能。
10，總結
我們在本文中介紹了一鍵式，加密安全的登錄流程，沒有涉及第三方，稱為“使用MetaMask登錄”。我們解釋了后端生成的隨機數的數字簽名如何證明帳戶的所有權，從而提供身份驗證。我們還探討了這種登錄機制與傳統電子郵件/密碼或社交登錄相比的權衡，無論是在桌面還是在移動設備上。
即使今天這樣的登錄流程的目標受眾仍然很小，我真誠地希望你們中的一些人感到鼓舞，在你自己的網絡應用程序中提供與MetaMask一起登錄，與傳統登錄流程并行。
本文由輝哥翻譯自《One-click Login with Blockchain: A MetaMask Tutorial》，并做適當的修改以便中國用戶可以更好的理解。
