HowToHub-C-Hello hub choice tuto

在本教程中，您将构建在Hello, Blockstack教程的基础上。您将修改身份验证代码，以便它提示尚未创建blockstack 标识的用户选择Hub URL。

关于本教程和您需要的先决条件
任务1:生成一个初始blockstack应用程序
任务2。启动服务器并查看应用程序
任务3:启用Hub选择
任务4:尝试新的身份验证流程
如何向新用户推荐一个Gaia hub URL

关于本教程和您需要的先决条件

本教程假设您已经按照Hello, Blockstack教程中指定的方式设置了环境和工具。您还应该阅读本教程以获得有关的基本信息.

任务1:生成一个初始blockstack应用程序

在本节中，您将构建一个名为hello-hub-choice的初始 React.js应用程序。
1.创建hello-hub-choice目录。

mkdir hello-hub-choice

2.切换到新目录。

cd hello-hub-choice

3.使用Yeoman和Blockstack应用程序生成器创建初始hello-hub-choice应用程序。

yo blockstack

您应该会看到几个交互提示。

$ yo blockstack
…
? Are you ready to build a Blockstack app in React? (Y/n)

4.响应提示填充初始应用程序。
流程成功完成后，您会看到类似如下提示:

…
create public/icon-192x192.png
create public/index.html
create public/robots.txt
create public/manifest.json
Im all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.

5.验证您拥有blockstack.js或更高版本的18.3.0。

$ npm ls blockstack
hello-blockstack@0.0.0 /Users/manthony/sampleapps/hello-blockstack
└── blockstack@18.3.0

6.如果没有正确的版本，安装它。

npm install blockstack@18.3.0

根据您的环境，您可能对npm包有一些问题。在继续下一节之前，先修复这些错误。

任务2。启动服务器并查看应用程序

启动服务器时，它将创建一个Node.js服务器，在本地启动它，并打开浏览器http://localhost:5000。从您的新应用程序目录的根目录:

1.启动应用程序服务器。

pm start

2.选择允许

3.打开浏览器到http://localhost:8080。
你应该看到一个简单的应用程序:

image

4.让您的新应用程序继续运行，然后进入下一节。

任务3:启用Hub选择

默认情况下，app生成器假定您想使用默认的流redirectToSignIn()方法。在本节中，您将替换该方法并使用makeAuthRequest()方法。makeAuthRequest()方法接受以下参数:

transitprivatekey(string = generateandstoretransitkey())一种十六进制编码的传输专用密钥。

redirecturi(string = ${window.location.origin}/)位置，以将用户重定向到登录批准后的位置。

manifesturi(string = ${window.location.origin}/manifest.json)此应用程序的清单文件的位置。

scopes (array = default_scope)应用程序请求的权限。

appdomain(string = window.location.origin)这个应用程序的起源。

expiresat(number = nexthour().gettime())此请求不再有效的时间。

extraparams(object = {})要传递给验证器的任何额外参数。使用它来传递不属于blockstack身份验证规范的选项，但可能受到特殊身份验证器的支持。

要替换默认登录，请执行以下操作:
1.使用您喜欢的编辑器，打开public/app.js文件。
2.在第4行找到redirectToSignIn()方法。
3.将redirectToSignIn()方法替换为blockstack.UserSession.redirectToSignInWithAuthRequest(authRequest)方法。

var userSession = new UserSession()
userSession.redirectToSignInWithAuthRequest(authRequest)

authRequest是由makeAuthRequest()方法生成的身份验证请求。

4.在刚刚添加的方法的正上方和event.preventDefault()方法的正下方，为authRequest构造一个字符串const:

const authRequest = userSession.makeAuthRequest(
userSession.generateAndStoreTransitKey(),
'http://localhost:8080/‘,
'http://localhost:8080/manifest.json’,
['store_write', 'publish_data’],
'http://localhost:8080/‘,
blockstack.nextHour().getTime(), {
solicitGaiaHubUrl: true
} // new options param
);

Note
如果您的应用程序运行的端口与8080不同，请输入该端口。
额外的solicitGaiaHubUrl参数true将导致blockstack浏览器提示新的身份创建者输入存储中心URL。

5.保存并关闭public/app.js文件。
6.确保您的应用程序重新构建干净。

任务4:尝试新的身份验证流程

1.在http://localhost上更新客户:8080/。
2.单击“使用blockstack登录”。

blockstack浏览器提示您登录。如果你尚未通过浏览器授权，你应看到以下内容:
[图片上传失败...(image-5b913-1564038602431)]

如果已经使用现有ID进行身份验证，则可以选择该ID或拒绝。选择一个现有ID，将您登录到Hello Blockstack应用程序，而不提供Hub选择。相反,选择拒绝。这将结束身份验证过程。然后，重置Blockstack浏览器。

3.选择Create new ID。
系统提示您输入用户名。

4.输入一个名称并按Check Availability。
5.找到您喜欢的可用名称后，请按Continue。
6.输入密码并选择Register ID。
系统提示您输入提供者。

image

默认是用户的Blockstack的Gaia hub。

7.选择使用不同的提供者。
系统提示您输入URL。

image

8.输入一个Gaia hub URL。
如果你有自己的答案，请在这里输入。您还可以输入Blockstack URL (https://hub.blockstack.org)。

9.按继续。
系统会花一点时间检查Hub是否响应，并将其建立在新的身份配置文件中。然后，系统会提示您发送电子邮件。

10.输入电子邮件并按Next。
系统创建您的用户并提示您继续您的应用程序。

11.选择去Hello, Blockstack.。
系统提示您允许Hello Blockstack访问。

12.授予对DApp的访问权。
您的用户应该经过身份验证。

如何向新用户推荐一个Gaia hub URL

如果您想为您的DApp创建特定的注册流程，您还可以传递一个预先设置的Gaia存储中心URL。例如，如果您有一个企业客户，其员工都希望将您的应用程序与公司运行的Gaia hub一起使用，那么您可以这样做。

要建议一个Gaia hub URL，请在solicitGaiaHubUrl旁边提供一个额外的推荐值，例如:

import {
makeAuthRequest,
redirectToSignInWithAuthRequest
} from ‘blockstack’;

var userSession = new UserSession()
const authRequest = userSession.makeAuthRequest(undefined, undefined, undefined, undefined, undefined, undefined, {
solicitGaiaHubUrl: true,
recommendedGaiaHubUrl: 'https://mygaiahub.com’
});

const authRequest = userSession.makeAuthRequest(
generateAndStoreTransitKey(),
'http://localhost:8080/‘,
'http://localhost:8080/manifest.json’,
['store_write', 'publish_data’],
'http://localhost:8080/‘,
nextHour().getTime(), {
solicitGaiaHubUrl: true, //new options param
recommendedGaiaHubUrl: 'https://mygaiahub.com' // new options param
}
);

userSession.redirectToSignInWithAuthRequest(authRequest);

传递这些参数会将存储中心URL提示符更改为:
[图片上传失败...(image-796154-1564038602431)]

相关信息

makeAuthRequest() method