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
