如何實現MetaMask簽名受權後DAPP一鍵登陸功能？

時間 2019-11-09

標籤如何實現 metamask 簽名受權 dapp 一鍵登陸功能简体版

原文原文鏈接

1 摘要

網站太多，各類用戶名/密碼實在記不住。因此咱們逐漸接受了BAT帳號的受權登陸功能。在以太坊DAPP應用中，也可使用MetaMask實現受權後一鍵登陸功能。MetaMask是去中心化錢包，受權信息不會如BAT中心同樣存在被收集利用的問題。html

本文從技術層面講清楚原理，並結合代碼說明如何實現。前端

2 受權一鍵式登陸的利弊分析

咱們每每被本身的密碼難住，愈來愈抵制傳統的電子郵件/密碼註冊流程。經過微信，QQ，支付寶，Facebook，Google或GitHub一鍵式社交登陸功能能夠省去記住密碼或者密碼泄露的而風險。固然，它也須要權衡利弊。node

社交媒體登陸集成的優勢：react

沒有更麻煩的填表。linux
無需記住另外一個用戶名/密碼對。git
整個過程須要幾秒鐘而不是幾分鐘。github

社交媒體登陸集成的缺點：web

因爲用戶的信息是從外部提供商處加載的，所以這會對提供商如何使用全部這些我的數據產生巨大的隱私擔心。例如，在撰寫本文時，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/)遊戲中，用戶不須要輸入用戶名，密碼就能夠創建本身的帳戶體系，進行登陸交易。算法

簽名導入-cancelchrome

本文介紹下這個方法的原理和代碼實現，使用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

安裝運行成功的輸出內容：

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的關聯和一鍵登陸功能。