在本教程中，您將構(gòu)建在Hello, Blockstack教程的基礎(chǔ)上。您將修改身份驗(yàn)證代碼，以便它提示尚未創(chuàng)建blockstack 標(biāo)識(shí)的用戶選擇Hub URL。
關(guān)于本教程和您需要的先決條件
任務(wù)1:生成一個(gè)初始blockstack應(yīng)用程序
任務(wù)2。啟動(dòng)服務(wù)器并查看應(yīng)用程序
任務(wù)3:啟用Hub選擇
任務(wù)4:嘗試新的身份驗(yàn)證流程
如何向新用戶推薦一個(gè)Gaia hub URL
關(guān)于本教程和您需要的先決條件
本教程假設(shè)您已經(jīng)按照Hello, Blockstack教程中指定的方式設(shè)置了環(huán)境和工具。您還應(yīng)該閱讀本教程以獲得有關(guān)的基本信息.
任務(wù)1:生成一個(gè)初始blockstack應(yīng)用程序
在本節(jié)中，您將構(gòu)建一個(gè)名為hello-hub-choice的初始 React.js應(yīng)用程序。
1.創(chuàng)建hello-hub-choice目錄。
mkdir hello-hub-choice
2.切換到新目錄。
cd hello-hub-choice
3.使用Yeoman和Blockstack應(yīng)用程序生成器創(chuàng)建初始hello-hub-choice應(yīng)用程序。
yo blockstack
您應(yīng)該會(huì)看到幾個(gè)交互提示。
$ yo blockstack
…
? Are you ready to build a Blockstack app in React? (Y/n)
4.響應(yīng)提示填充初始應(yīng)用程序。
流程成功完成后，您會(huì)看到類似如下提示:
…
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.驗(yàn)證您擁有blockstack.js或更高版本的18.3.0。
$ npm ls blockstack
hello-blockstack@0.0.0 /Users/manthony/sampleapps/hello-blockstack
└── blockstack@18.3.0
6.如果沒(méi)有正確的版本，安裝它。
npm install blockstack@18.3.0
根據(jù)您的環(huán)境，您可能對(duì)npm包有一些問(wèn)題。在繼續(xù)下一節(jié)之前，先修復(fù)這些錯(cuò)誤。
任務(wù)2。啟動(dòng)服務(wù)器并查看應(yīng)用程序
啟動(dòng)服務(wù)器時(shí)，它將創(chuàng)建一個(gè)Node.js服務(wù)器，在本地啟動(dòng)它，并打開(kāi)瀏覽器http://localhost:5000。從您的新應(yīng)用程序目錄的根目錄:
1.啟動(dòng)應(yīng)用程序服務(wù)器。
pm start
2.選擇允許
3.打開(kāi)瀏覽器到http://localhost:8080。
你應(yīng)該看到一個(gè)簡(jiǎn)單的應(yīng)用程序:
4.讓您的新應(yīng)用程序繼續(xù)運(yùn)行，然后進(jìn)入下一節(jié)。
任務(wù)3:啟用Hub選擇
默認(rèn)情況下，app生成器假定您想使用默認(rèn)的流redirectToSignIn()方法。在本節(jié)中，您將替換該方法并使用makeAuthRequest()方法。makeAuthRequest()方法接受以下參數(shù):
transitprivatekey(string = generateandstoretransitkey())一種十六進(jìn)制編碼的傳輸專用密鑰。
redirecturi(string =
${window.location.origin}/)位置，以將用戶重定向到登錄批準(zhǔn)后的位置。
manifesturi(string =
${window.location.origin}/manifest.json)此應(yīng)用程序的清單文件的位置。
scopes (array = default_scope)應(yīng)用程序請(qǐng)求的權(quán)限。
appdomain(string = window.location.origin)這個(gè)應(yīng)用程序的起源。
expiresat(number = nexthour().gettime())此請(qǐng)求不再有效的時(shí)間。
extraparams(object = {})要傳遞給驗(yàn)證器的任何額外參數(shù)。使用它來(lái)傳遞不屬于blockstack身份驗(yàn)證規(guī)范的選項(xiàng)，但可能受到特殊身份驗(yàn)證器的支持。
要替換默認(rèn)登錄，請(qǐng)執(zhí)行以下操作:
1.使用您喜歡的編輯器，打開(kāi)public/app.js文件。
2.在第4行找到redirectToSignIn()方法。
3.將redirectToSignIn()方法替換為blockstack.UserSession.redirectToSignInWithAuthRequest(authRequest)方法。
var userSession = new UserSession()
userSession.redirectToSignInWithAuthRequest(authRequest)
authRequest是由makeAuthRequest()方法生成的身份驗(yàn)證請(qǐng)求。
4.在剛剛添加的方法的正上方和event.preventDefault()方法的正下方，為authRequest構(gòu)造一個(gè)字符串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
如果您的應(yīng)用程序運(yùn)行的端口與8080不同，請(qǐng)輸入該端口。
額外的solicitGaiaHubUrl參數(shù)true將導(dǎo)致blockstack瀏覽器提示新的身份創(chuàng)建者輸入存儲(chǔ)中心URL。
5.保存并關(guān)閉public/app.js文件。
6.確保您的應(yīng)用程序重新構(gòu)建干凈。
任務(wù)4:嘗試新的身份驗(yàn)證流程
1.在http://localhost上更新客戶:8080/。
2.單擊“使用blockstack登錄”。
blockstack瀏覽器提示您登錄。如果你尚未通過(guò)瀏覽器授權(quán)，你應(yīng)看到以下內(nèi)容:
[圖片上傳失敗...(image-5b913-1564038602431)]
如果已經(jīng)使用現(xiàn)有ID進(jìn)行身份驗(yàn)證，則可以選擇該ID或拒絕。選擇一個(gè)現(xiàn)有ID，將您登錄到Hello Blockstack應(yīng)用程序，而不提供Hub選擇。相反,選擇拒絕。這將結(jié)束身份驗(yàn)證過(guò)程。然后，重置Blockstack瀏覽器。
3.選擇Create new ID。
系統(tǒng)提示您輸入用戶名。
4.輸入一個(gè)名稱并按Check Availability。
5.找到您喜歡的可用名稱后，請(qǐng)按Continue。
6.輸入密碼并選擇Register ID。
系統(tǒng)提示您輸入提供者。
默認(rèn)是用戶的Blockstack的Gaia hub。
7.選擇使用不同的提供者。
系統(tǒng)提示您輸入U(xiǎn)RL。
8.輸入一個(gè)Gaia hub URL。
如果你有自己的答案，請(qǐng)?jiān)谶@里輸入。您還可以輸入Blockstack URL (https://hub.blockstack.org)。
9.按繼續(xù)。
系統(tǒng)會(huì)花一點(diǎn)時(shí)間檢查Hub是否響應(yīng)，并將其建立在新的身份配置文件中。然后，系統(tǒng)會(huì)提示您發(fā)送電子郵件。
10.輸入電子郵件并按Next。
系統(tǒng)創(chuàng)建您的用戶并提示您繼續(xù)您的應(yīng)用程序。
11.選擇去Hello, Blockstack.。
系統(tǒng)提示您允許Hello Blockstack訪問(wèn)。
12.授予對(duì)DApp的訪問(wèn)權(quán)。
您的用戶應(yīng)該經(jīng)過(guò)身份驗(yàn)證。
如何向新用戶推薦一個(gè)Gaia hub URL
如果您想為您的DApp創(chuàng)建特定的注冊(cè)流程，您還可以傳遞一個(gè)預(yù)先設(shè)置的Gaia存儲(chǔ)中心URL。例如，如果您有一個(gè)企業(yè)客戶，其員工都希望將您的應(yīng)用程序與公司運(yùn)行的Gaia hub一起使用，那么您可以這樣做。
要建議一個(gè)Gaia hub URL，請(qǐng)?jiān)趕olicitGaiaHubUrl旁邊提供一個(gè)額外的推薦值，例如:
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);
傳遞這些參數(shù)會(huì)將存儲(chǔ)中心URL提示符更改為:
[圖片上傳失敗...(image-796154-1564038602431)]
相關(guān)信息
makeAuthRequest()method
