如何實現MetaMask簽名授權後DAPP一鍵登入功能？
1
摘要
網站太多，各種使用者名稱/密碼實在記不住。所以我們逐漸接受了BAT賬號的授權登入功能。在以太坊DAPP應用中，也可以使用MetaMask實現授權後一鍵登入功能。MetaMask是去中心化錢包，授權資訊不會如BAT中心一樣存在被收集利用的問題。
本文從技術層面講清楚原理，並結合程式碼說明如何實現。
2
授權一鍵式登入的利弊分析
我們往往被自己的密碼難住，越來越抵制傳統的電子郵件/密碼註冊流程。通過微信，QQ，支付寶，Facebook，Google或GitHub一鍵式社交登入功能可以省去記住密碼或者密碼洩露的而風險。當然，它也需要權衡利弊。
社交媒體登入整合的優點：
-
沒有更麻煩的填表。
-
無需記住另一個使用者名稱/密碼對。
-
整個過程需要幾秒鐘而不是幾分鐘。
社交媒體登入整合的缺點：
- 由於使用者的資訊是從外部提供商處載入的，因此這會對提供商如何使用所有這些個人資料產生巨大的隱私擔憂。例如，在撰寫本文時，Facebook正面臨著資料隱私問題（https://www.reuters.com/article/us-facebook-privacy-costs-analysis/privacy-issues-emerge-as-major-business-risk-for-facebook-idUSKBN1GW01F）。
加密貓(https://www.cryptokitties.co/)遊戲中，使用者不需要輸入使用者名稱，密碼就可以建立自己的賬戶體系，進行登入交易。
簽名匯入-cancel
本文介紹下這個方法的原理和程式碼實現，使用MetaMask擴充套件的一鍵式加密安全登入流程，所有資料都儲存在我們自己的後端。我們稱為“使用MetaMask登入”。
3
** 如何使用Metamask進行一鍵式登入流程**
一鍵式登入流程的基本思想是，通過使用私鑰對一段資料進行簽名，可以很容易地通過加密方式證明帳戶的所有權。如果您設法簽署由我們的後端生成的精確資料，那麼後端將認為您是該錢包地址的所有者。因此，我們可以構建基於訊息簽名的身份驗證機制，並將使用者的錢包地址作為其識別符號。
如果它看起來不太清楚，那就沒問題了，因為我們會逐一解釋它：
-
MetaMask瀏覽器擴充套件
-
登入流程如何工作
-
為什麼登入流程有效
-
讓我們一起建立它
-
今天就可以投入生產了
-
移動裝置的缺點
請注意，雖然我們將使用連線到以太坊區塊鏈（https://www.toptal.com/ethereum）的工具（MetaMask，以太坊錢包地址），但此登入過程實際上並不需要區塊鏈：它只需要其加密功能。話雖如此，隨著MetaMask成為如此受歡迎的擴充套件（https://twitter.com/metamask_io/status/942816957920829440），現在似乎是介紹此登入流程的好時機。
4
MetaMask瀏覽器擴充套件
如果您已經知道MetaMask是什麼，請跳過本節。
MetaMask（https://metamask.io/）是一個瀏覽器外掛，可作為MetaMask Chrome擴充套件（https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn）或Firefox附加元件使用（https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/）。它的核心是它作為以太坊錢包：通過安裝它，您將可以訪問一個獨特的以太坊錢包地址，您可以使用它開始傳送和接收以太幣或ERC20通證。
但MetaMask不僅僅是以太坊錢包。作為瀏覽器擴充套件，它可以與您正在瀏覽的當前網頁進行互動。它通過在您訪問的每個網頁中注入一個名為web3.js（https://github.com/ethereum/web3.js/）的JavaScript庫來實現。注入後，web3將通過window.web3的JavaScript程式碼為你訪問的每個網頁提供一個物件。要檢視此物件，只需在Chrome或Firefox DevTools控制檯鍵入window.web3（如果已安裝MetaMask），結果如下圖。
web3.js
Web3.js是以太坊區塊鏈的JavaScript介面。有以下功能：
-
獲取最新的區塊號（web3.eth.getBlockNumber）
-
檢查MetaMask上的當前活動帳戶（web3.eth.coinbase）
-
獲取任何帳戶的餘額（web3.eth.getBalance）
-
傳送交易（web3.eth.sendTransaction）
-
使用當前帳戶的私鑰對訊息進行簽名（web3.personal.sign）
-
…還有獲取更多介面說明：https://github.com/ethereum/wiki/wiki/JavaScript-API
安裝MetaMask時，任何前端程式碼都可以訪問所有這些功能，並與區塊鏈進行互動（https://www.toptal.com/ethereum-smart-contract）。他們被稱為dapps或DApps（去中心化的應用程式，有時甚至寫成“ĐApps”）。
與DApp開發相關： 時間鎖定錢包：以太坊智慧合約簡介（https://www.toptal.com/ethereum-smart-contract/time-locked-wallet-truffle-tutorial）
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彈窗，如果點選簽名按鈕，將列印簽名的訊息。
MetaMask確認彈出視窗
我們將web3.personal.sign在登入流程中使用。
關於這一部分的最後一點說明：MetaMask將web3.js注入到您當前的瀏覽器中，但實際上還有其他獨立的瀏覽器也會注入web3.js，例如Mist（https://github.com/ethereum/mist）。但是，在我看來，MetaMask為普通使用者提供了探索dapps的最佳使用者體驗和最簡單的轉換。
5
登入流程如何工作
這是如何做到的呢？這部分內容講說服你，證明這種方式是安全的。所以為什麼部分的介紹就比較短了。
如前面所述，我們將忘記區塊鏈。我們有一個傳統的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。
具有隨機數，錢包地址和簽名後，後端可以加密地驗證（https://en.wikipedia.org/wiki/Digital_signature）使用者已正確簽署了隨機數。如果確認是這種情況，那麼使用者已經證明了擁有錢包地址的所有權，我們可以考慮對她或他進行身份驗證。然後可以將JWT或會話識別符號返回到前端。
第6步：更改Nonce（後端）
為了防止使用者使用相同的簽名再次登入（如果它被洩露），我們確保下次同一使用者想要登入時，她或他需要簽署一個新的nonce。這是通過nonce為該使用者生成另一個隨機數並將其持久儲存到資料庫來實現的。
這就是我們管理nonce簽名無密碼登入流程的方法。
6
為什麼登入流程有效
根據定義，身份驗證實際上只是帳戶所有權的證明。如果您使用錢包地址唯一地標識您的帳戶，那麼證明您加密方式擁有該帳戶就非常簡單。
為了防止黑客獲取某個特定郵件及其簽名（但不是您的實際私鑰），我們會強制需要簽名的訊息滿足以下條件：
-
由後端提供
-
定期改變
在我們的demo樣例中，每次成功登入後我們都改變了它，但也可以設想基於時間戳的機制。
MetaMask登入流程的六個步驟概述。
7
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中的前端完全相同，使用此使用者的隨機數。
下一個塊是驗證本身。有一些加密涉及。如果您喜歡研究，我建議您閱讀有關橢圓曲線簽名演算法（https://en.wikipedia.org/wiki/Elliptic_Curve_Digital_Signature_Algorithm）以獲得更多資訊。
總結這部分的作用，對於給出的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--
8
今天就可以投入生產了
雖然區塊鏈可能有其缺陷並且仍處於早期階段，但我無法強調如何在今天的任何現有網站上實施此登入流程的重要性。以下是為什麼此登入流程優先於電子郵件/密碼和社交登入的引數列表：
-
提高安全性：公鑰加密的所有權證明可以說比通過電子郵件/密碼或第三方證明所有權更安全，因為MetaMask在您的計算機本地儲存憑據，而不是線上伺服器，這使得攻擊面較小。
-
簡化的使用者體驗：這是一鍵式（也可能是雙擊）登入流程，在幾秒鐘內完成，無需輸入或記住任何密碼。
-
增加隱私：不需要電子郵件，也不涉及第三方。
當然，MetaMask登入流程可以很好地與其他傳統登入方法並行使用。需要在每個帳戶與其擁有的錢包地址之間進行對映。
但是這個登入流程並不適合所有人：
-
**使用者需要安裝MetaMask：**如果沒有MetaMask或支援web3的瀏覽器，此登入流程顯然無效。如果您的受眾對加密貨幣不感興趣，他們甚至會考慮安裝MetaMask。隨著最近的通證熱潮，讓我們希望我們正在走向Web 3.0網際網路（https://blog.stephantual.com/web-3-0-revisited-part-one-across-chains-and-across-protocols-4282b01054c5）。
-
**需要在後端完成一些工作：**正如我們所見，實現此登入流程的簡單版本非常簡單。但是，要將其整合到現有的複雜系統中，需要在接觸身份驗證的所有區域進行一些更改：註冊，資料庫，身份驗證路由等。這尤其正確，因為每個帳戶都將與一個或多個錢包地址相關聯。
-
**它不適用於移動裝置：**看以下描述。
9
移動裝置的缺點
正如我們所見，這web3是此登入流程的先決條件。在桌面瀏覽器上，MetaMask會注入它。但是，移動瀏覽器沒有擴充套件程式，因此此登入流程無法在移動版Safari，Chrome或Firefox上開箱即用。有一些獨立的移動瀏覽器注入了web3基於MetaMask的瀏覽器。在撰寫本文時，它們還處於早期階段，但如果您有興趣，請檢視Cipher（https://www.cipherbrowser.com/），Status（https://status.im/）和Toshi（https://www.toshi.org/）。“使用MetaMask登入”適用於這些移動瀏覽器。
關於移動應用程式，答案是肯定的，登入流程有效，但需要有很多準備工作的作為基礎。作為基本準備工作，您需要自己重建一個簡單的以太坊錢包。這包括錢包地址生成，種子文字恢復和安全私鑰儲存，以及web3.personal.sign確認彈出視窗。幸運的是，有library可以幫助您。人們關心的關鍵資訊是安全的，因為應用程式本身擁有私鑰。在桌面瀏覽器上，我們將此任務委託給MetaMask。
所以我認為答案是否定的，這個登入流程今天不適用於移動裝置。但它正朝著這個方向努力，今天簡單的解決方案仍然是移動使用者的並行傳統登入方法。
【輝哥備註】雖然主流的移動端瀏覽器APP還不支援MetaMask外掛，但是包括TrustWallet, AlphaWallet等錢包自帶的DAPP瀏覽器支援支付功能，也就不需要MetaMask錢包用於支付了。手機端的一鍵登入問題轉換為別的實現方案的問題。
10
環境搭建
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
安裝執行成功的輸出內容：
[email protected]:~/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
[email protected]:~/work/login-with-metamask-demo/backend$ ls
Dockerfile node_modules package.json src yarn.lock
[email protected]:~/work/login-with-metamask-demo/backend$ rm -r -f node_modules
[email protected]:~/work/login-with-metamask-demo/backend$ ls
Dockerfile package.json src yarn.lock
[email protected]:~/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
+ [email protected]
updated 1 package in 4.201s
[email protected]:~/work/login-with-metamask-demo/backend$ yarn
yarn install v1.10.1
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" 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.
[email protected]:~/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
安裝執行成功的輸出內容：
[email protected]:~/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 [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" 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.
[email protected]:~/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的關聯和一鍵登入功能。
11
總結
我們在本文中介紹了一鍵式，加密安全的登入流程，沒有涉及第三方，稱為“使用MetaMask登入”。我們解釋了後端生成的隨機數的數字簽名如何證明帳戶的所有權，從而提供身份驗證。我們還探討了這種登入機制與傳統電子郵件/密碼或社交登入相比的權衡，無論是在桌面還是在移動裝置上。
即使今天這樣的登入流程的目標受眾仍然很小，我真誠地希望你們中的一些人感到鼓舞，在你自己的網路應用程式中提供與MetaMask一起登入，與傳統登入流程並行。
本文譯者：HiBlock區塊鏈技術佈道群-輝哥
原文：《One-click Login with Blockchain: A MetaMask Tutorial》
加微信baobaotalk_com，加入技術佈道群
以下是我們的社群介紹，歡迎各種合作、交流、學習：）