JavaScript dapp：使用Blockstack进行用户身份验证

在上一篇文章中，我介绍了Blockstack，并讨论了在平台上构建去中心化应用程序或dapps的两个关键组件。 在本文中，我们将使用由blockstack.js （与Blockstack进行交互JavaScript库）提供的用户身份验证和授权来引导dapp进行Web开发片段。

在使用blockstack.js进行用户登录时，您需要为用户提供各种登录按钮。 当用户单击按钮时，您调用一个库方法，将它们重定向到一个单独的选项卡，该选项卡由Blockstack Browser应用程序驱动（如果已安装），或者如果用户未安装Blockstack Browser，则基于Web的Blockstack登录。

[了解React？ 不要错过InfoWorld的React入门教程 。 •教程： 针对初学者的React编程 。 | 通过InfoWorld的App Dev Report新闻通讯了解编程方面的热门话题。 ]

IDG

我们内置于DotPodcast（一个用于收听播客的dapp）中的登录屏幕。

IDG

Blockstack的用户ID选择屏幕。

用户选择其首选ID或注册帐户后，他们将被重定向到您应用的回调处理程序，您可以在该回调处理程序中从该用户那里获取基本用户信息并代表他们进行其他API调用，例如保存或检索应用程序信息从他们的个人存储。

引导项目

Blockstack.js只是一个库，因此您无需担心与可能使用的任何前端工具的兼容性。 我将在该项目中使用React，因此初始项目引导将通过create-react-app 。 除了React之外，我还将使用Redux来管理状态，并使用React-router来管理单页应用程序。 然后，您只需要使用npm或yarn安装blockstack依赖项即可。

重定向到Blockstack浏览器所需的实际代码是一个简单的方法，称为blockstack.redirectToSignIn() 。 为了简化此示例，我向自举的App组件添加了一个按钮，该按钮在单击时会调用该方法：

import React, { Component } from 'react';
import './App.css';
import * as blockstack from 'blockstack';
class App extends Component {
  render() {
    return (
      <div className="App">
        <input type="button" onClick={() => blockstack.redirectToSignIn()} value="Sign In With Blockstack" />
      </div>
    );
  }
}
export default App;

这将显示一个空白页面，上面带有一个按钮。 但是，当您单击按钮时，您可能会在这里看到问题：

IDG

通过从您的应用程序中提取manifest.json文件，Blockstack在登录屏幕上显示应用程序信息和图标。 这要求在该文件上允许跨域请求。 但是，create-react-app非常明智地无法在开发中启用CORS。 为该文件启用CORS的最快方法是为整个应用程序启用CORS，您可以通过使用npm或yarn安装cors并在src / setupProxy.js中添加具有以下内容的文件来实现。

const cors = require('cors');
module.exports = (app) => {
  app.use(cors());
};

在这一招捎带create-react-app机制， 有过在快递请求代理更多的控制权 ，其react-scripts幕后用途。 重新启动开发服务器将加载该配置，然后我们可以在登录屏幕上看到加载的示例应用程序配置。

IDG

选择ID后，Blockstack会在查询字符串中使用JSON Web令牌（JWT）将您重定向回应用程序的URL。 我们尚未处理该JWT，但blockstack.js提供了一些方便的方法来提取该数据并将其解码。 在此过程的这一点上，我们的用户登录被认为是“待处理”，因为我们拥有令牌，但尚未对其进行任何操作。 一旦我们解码并验证了令牌（库为我们处理的异步过程），我们就可以访问已登录的用户。  

检查登录用户

blockstack.js库还在本地存储中配置了已登录的用户，因此后续的页面加载将不需要用户再次登录。 我们将修改基本组件，以检查用户登录是否正在挂起或用户已经登录。第一步是在我们的组件上创建一些状态以保存用户数据，并检查未完成或已完成的用户登录创建组件时。 现在，我们将在构造函数方法中执行此操作：

  constructor() {
    super();
    let user = null;
    if (blockstack.isUserSignedIn()) {
      user = blockstack.loadUserData();
    }
    if (blockstack.isSignInPending()) {
      blockstack.handlePendingSignIn()
        .then(userData => this.setState({user: userData}));
    }
    this.state = {
      user,
    };
  }

我们的render方法将变得更加复杂，因此为了清楚起见，我们将其分为几个单独的方法。 然后，在render方法中，我们将检查状态以查看是否存在用户，并相应地渲染一个登录按钮或一个简单的配置文件：

 renderLogin() {
    return <input type="button" onClick={() => blockstack.redirectToSignIn()} value="Sign In With Blockstack" />
  }
  renderProfile() {
    const user = new blockstack.Person(this.state.user.profile);
    return (
      <div>
      <h1>{user.name()}</h1>
      <h3>{user.description()}</h3>
      <input type="button" onClick={() => blockstack.signUserOut()} value="Log Out" />
    </div>
    );
  }
  render() {
    return (
      <div className="App">
        {this.state.user ? this.renderProfile() : this.renderLogin()}
      </div>
    );
  }

结果是设计精巧但功能齐全的dapp登录过程，并且可以完全访问配置文件信息。

IDG

您将拥有：由区块链提供支持的用户身份验证和授权，而无需增加后端！ 下周，我们将把去中心化存储与blockstack.js集成在一起，以便我们的用户可以在跨设备和登录的情况下保存应用程序数据和设置，同时保持对其信息的完全控制。 如果您想看一下正在进行的工作， 可以在GitHub上找到本周的代码。 与往常一样，继续在Twitter上进行对话： @freethejazz 。

From: https://www.infoworld.com/article/3356757/javascript-dapps-user-authentication-with-blockstack.html