区块链一键登录：MetaMask教程(One-click Login with Blockchain: A MetaMask Tutorial)

前言

前端js都能做区块链的相关内容了，推荐去看原文，理解起来应该不难。

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

正文

 

• 没有更繁琐的表格填充。
• 不需要记住另一个用户名/密码对。
• 整个过程需要几秒钟而不是几分钟。

社交媒体登录整合的缺点：

• 由于用户的信息是从外部提供商加载的，这就提供了一个关于提供商如何使用所有这些个人数据的巨大隐私问题。例如，在撰写本文时，Facebook正面临数据隐私问题。

本文介绍一种新的登录方法：使用MetaMask扩展的一键式加密安全登录流程，所有数据都存储在我们自己的后端。我们称之为：“使用MetaMask登录”。

如何使用Metamask进行一键登录流程

其基本思想是通过使用私钥签署一段数据来加密证明易于证明帐户的所有权。如果您设法签署由我们的后端生成的精确数据，那么后端将认为您是该公共地址的所有者。因此，我们可以构建一个基于消息签名的身份验证机制，并将用户的公共地址作为标识符。

• MetaMask浏览器扩展
• 登录流程如何工作
• 为什么登录流程有效
• 让我们一起建设吧
• 它现在已经投入生产
• 移动设备上的缺点

请注意，尽管我们将使用连接到以太坊区块链（MetaMask，Ethereum公共地址）的工具，但此登录过程实际上并不需要区块链：它只需要其密码功能。话虽如此，随着MetaMask成为如此流行的扩展，现在似乎是引入此登录流程的好时机。

MetaMask浏览器扩展

如果您已经知道MetaMask是什么，请随意跳过本节。

• 获取链的最新块（web3.eth.getBlockNumber）
• 检查MetaMask（web3.eth.coinbase）上的当前活动帐户
• 获取任何帐户的余额（web3.eth.getBalance）
• 发送交易（web3.eth.sendTransaction）
• 使用当前帐户的私钥签名消息（web3.personal.sign）
• ... 等等

当安装MetaMask时，任何前端代码都可以访问所有这些功能，并与区块链交互。他们被称为dapps或DApps（分散式的应用程序，有时甚至是病急乱投医“ĐApps”）。 web3.js中的大多数函数都是读函数（get block，get balance等），并且web3会立即给出响应。但是，某些功能（如web3.eth.sendTransaction和web3.personal.sign）需要当前帐户使用其私钥签署一些数据。这些功能触发MetaMask显示确认屏幕，以检查用户是否知道他或她正在签名。

web3.personal.sign(web3.fromUtf8("Hello from Toptal!"), web3.eth.coinbase, console.log);

登录流程如何工作

我们先来看看how。How将有望说服你，这是安全的，所以我会保持why 部分短。

第1步：修改用户模型（后端）

首先，我们的User模型需要有两个新的必需字段：publicAddress和nonce。另外，publicAddress需要是独一无二的。你可以保留通常的username，email和password字段 - 特别是如果你想实现你的MetaMask登录并行到电子邮件/密码登录 - 但它们是可选的。

第2步：生成随机数（后端）

对于数据库中的每个用户，在该nonce字段中生成一个随机字符串。例如，nonce可以是一个大的随机整数。

第3步：用户获取其随机数（前端）

在我们的前端JavaScript代码中，假设MetaMask存在，我们可以访问window.web3。因此，我们可以致电web3.eth.coinbase获取当前MetaMask帐户的公开地址。

第4步：用户签署现时（前端）

一旦前端收到nonce前一个API调用的响应，它将运行以下代码：

web3.personal.sign(nonce, web3.eth.coinbase, callback);

这将提示MetaMask显示签名消息的确认弹出窗口。该随机数将显示在此弹出框中，以便用户知道她或他没有签署某些恶意数据。

第5步：签名验证（后端）

当后端接收到POST /api/authentication请求时，它首先在数据库publicAddress中根据请求体中的给定内容提取用户。特别是它提取相关的随机数。

第6步：更改随机数（后端）

为了防止用户再次使用相同的签名登录（以防被盗用），我们确保下次同一用户想要登录时，她或他需要签署新的随机数。这是通过nonce为该用户生成另一个随机数并将其保存到数据库来实现的。

为什么登录流程有效

根据定义，身份验证实际上只是帐户所有权的证明。如果您使用公开地址唯一标识您的帐户，那么它的密码不重要，以证明您拥有它。

1. 由后端提供，并且
2. 定期更换

我们在解释每次成功登录后都对其进行了更改，但基于时间戳的机制也是可以想象的。

让我们一起建设吧

在本节中，我将逐一完成上述六个步骤。我将展示一些关于如何从零开始构建登录流的代码片段，或者将它集成到现有的后端，而不需要太多的努力。

• Node.js，Express和SQLite（通过Sequelize ORM）在后端实现RESTful API。它在成功认证时返回一个JWT。
• 在前端反应单页面应用程序。

我尝试尽可能少地使用图书馆。我希望代码很简单，以便您可以轻松地将其移植到其他技术堆栈。

第1步：修改用户模型（后端）

需要两个字段：publicAddress和nonce。我们初始化nonce为一个随机大数。这个数字应该在每次成功登录后进行更改。我还在username这里添加了一个可选字段，用户可以更改。

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字段设置为小写字母。一个更严格的实现会添加一个验证函数来检查这里的所有地址都是有效的以太坊地址。

第2步：生成随机数（后端）

这是在defaultValue()上面模型定义中的函数中完成的。

第3步：用户获取其随机数（前端）

下一步是在后端添加一些样板代码来处理User模型上的CRUD方法，这在这里我们不会做。

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());
}

第4步：用户签署现时（前端）

让我们继续前进我们的handleClick方法。我们现在拥有一个由后端提供的用户（不管是检索还是新创建的）。特别是，我们有他们nonce和publicAddress。所以我们准备publicAddress使用与此关联的私钥对nonce进行签名web3.personal.sign。这在handleSignMessage功能中完成。

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());
}

第5步：签名验证（后端）

这是稍微复杂一点的部分。后端在/auth包含a publicAddress和a 的路由上接收请求signature，并且需要验证这publicAddress是否签署了正确的请求nonce。

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' });
    }
  })

第6步：更改随机数（后端）

出于安全原因，最后一步是更改随机数。在成功认证后的某个地方，添加以下代码：

// --snip--
.then(user => {
  user.nonce = Math.floor(Math.random() * 1000000);
  return user.save();
})
// --snip--

这并不难，是吗？再次，如果你想看看整个应用程序是如何连接的（JWT代，CRUD路线，localStorage等），请随时查看GitHub仓库。

它现在已经投入生产

尽管区块链可能存在缺陷并且仍处于幼年阶段，但我无法强调如何在现有的任何网站上实现此登录流程。以下是为什么此登录流程优于电子邮件/密码和社交登录的一系列参数：

• 更高的安全性：通过公钥加密证明拥有权比通过电子邮件/密码或第三方进行所有权证明更安全 - 更重要的是，因为MetaMask在您的计算机本地存储凭证，而不是在线服务器上存储凭证，这使得攻击面更小。
• 简化的用户体验：这是一键式（好的，也许是双击）登录流程，只需几秒钟即可完成，无需键入或记住任何密码。
• 增加隐私：不需要电子邮件，也不需要第三方参与。

当然，MetaMask登录流程可以很好地与其他传统登录方法并行使用。需要在每个帐户和它拥有的公共地址之间进行映射。

• 用户需要安装MetaMask：如果没有MetaMask或web3启用浏览器，此登录流程显然不起作用。如果你的观众对加密货币不感兴趣，他们甚至有可能考虑安装MetaMask。随着最近的密码繁荣，让我们希望我们正在走向一个Web 3.0互联网。
• 一些工作需要在后端完成：正如我们所看到的，实现此登录流的简单版本非常简单。但是，要将其集成到现有的复杂系统中，它需要在接触身份验证的所有区域进行一些更改：注册，数据库，身份验证路由等。尤其如此，因为每个帐户都将与一个或多个公用地址相关联。
• 它不适用于移动设备：这值得自己阅读。

移动设备上的缺点

正如我们所看到的，web3这是登录流程的先决条件。在桌面浏览器上，MetaMask将其注入。但是，移动浏览器上没有扩展功能，因此此移动版Safari浏览器，Chrome或Firefox无法使用此登录流程。有一些独立的移动浏览器，web3基本上在浏览器中注入了MetaMask。在撰写本文时，它们相当早，但如果您有兴趣，请查看Cipher，Status和Toshi。“使用MetaMask登录”适用于这些移动浏览器。

让您的用户使用MetaMask登录

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

关于作者

Amaury拥有五年以上构建全栈网络和移动应用程序（Node.js，React，React Native）的经验。他目前在Parity Technologies担任区块链应用程序开发人员。他对创业真正感兴趣，并曾为各种规模的初创公司工作。在业余时间，他阅读机器学习，并在他的旅行博客上撰写关于搭便车，文化和哲学的文章。