如何实现MetaMask签名受权后DAPP一键登陆功能？

时间  2019-11-09
标签 如何 实现 metamask 签名 受权 dapp 一键 登陆 功能 繁體版
原文   原文链接

image

1

摘要

网站太多，各类用户名/密码实在记不住。因此咱们逐渐接受了BAT帐号的受权登陆功能。在以太坊DAPP应用中，也可使用MetaMask实现受权后一键登陆功能。MetaMask是去中心化钱包，受权信息不会如BAT中心同样存在被收集利用的问题。html

本文从技术层面讲清楚原理，并结合代码说明如何实现。前端

2

受权一键式登陆的利弊分析

咱们每每被本身的密码难住，愈来愈抵制传统的电子邮件/密码注册流程。经过微信，QQ，支付宝，Facebook，Google或GitHub一键式社交登陆功能能够省去记住密码或者密码泄露的而风险。固然，它也须要权衡利弊。node

社交媒体登陆集成的优势：react

  • 没有更麻烦的填表。linux

  • 无需记住另外一个用户名/密码对。git

  • 整个过程须要几秒钟而不是几分钟。github

社交媒体登陆集成的缺点：web

加密猫(https://www.cryptokitties.co/)游戏中，用户不须要输入用户名，密码就能够创建本身的帐户体系，进行登陆交易。算法

image

签名导入-cancelchrome

本文介绍下这个方法的原理和代码实现，使用MetaMask扩展的一键式加密安全登陆流程，全部数据都存储在咱们本身的后端。咱们称为“使用MetaMask登陆”。

image

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），结果以下图。

image

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弹窗，若是点击签名按钮，将打印签名的消息。

image

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样例中，每次成功登陆后咱们都改变了它，但也能够设想基于时间戳的机制。

image

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签名受权：

image

登陆后，更新用户的名字。

image

不须要输入密码，完成了duncanwang和钱包地址0xD1F7922e8b78cBEB182250753ade8379d1E09949的关联和一键登陆功能。

11

总结

咱们在本文中介绍了一键式，加密安全的登陆流程，没有涉及第三方，称为“使用MetaMask登陆”。咱们解释了后端生成的随机数的数字签名如何证实账户的全部权，从而提供身份验证。咱们还探讨了这种登陆机制与传统电子邮件/密码或社交登陆相比的权衡，不管是在桌面仍是在移动设备上。

即便今天这样的登陆流程的目标受众仍然很小，我真诚地但愿大家中的一些人感到鼓舞，在你本身的网络应用程序中提供与MetaMask一块儿登陆，与传统登陆流程并行。

本文译者：HiBlock区块链技术布道群-辉哥

原文：《One-click Login with Blockchain: A MetaMask Tutorial》

加微信baobaotalk_com，加入技术布道群

image

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程