在本教程中，您將使用Blockstack和Vue.js為單頁應用程序(SPA)構建代碼并運行它。應用程序運行后，您將了解應用程序的blockstack功能。您將了解它如何使用blockctack ID管理認證，以及如何使用blockstack存儲(Gaia)存儲與該ID關聯的信息。
在你開始之前
驗證安裝了git
驗證是否安裝了npm
確保您有一個blockstack ID
任務1:安裝代碼并檢索依賴項
任務2:登錄到應用程序
任務3:學習登錄過程
任務4:解碼authRequest
任務5:在登錄代碼的底層
任務6:處理應用程序
任務7:實現存儲
如果您喜歡視頻，可以查看本教程的視頻。
在你開始之前
您構建的應用程序是一個Vue.js應用程序，它是完全去中心化的，并且沒有服務器。雖然不是嚴格要求遵循，但基本熟悉Vue.js是有幫助的。完成后，app可以實現以下功能:
- 使用blockstack對用戶進行身份驗證
- 發布新狀態
- 在用戶配置文件中顯示狀態
- 查找其他用戶的配置文件和狀態
在本教程中，您將使用以下工具:
- 工作站的命令行
- git克隆教程代碼
- 管理依賴項和腳本
基本標識和存儲服務由blockstack.js提供。要測試應用程序，您需要已經注冊了一個Blockstack ID。
驗證安裝了git
本教程使用git克隆教程代碼。使用要驗證的命令驗證已安裝git。
$ which git
/usr/local/bin/npm
驗證是否安裝了npm
本教程依賴于npm依賴關系管理器。在開始之前，請使用要驗證的命令驗證是否安裝了npm。
$ which npm
/usr/local/bin/npm
如果在系統中沒有找到npm，請安裝它。
確保您有一個blockstack ID
最后，確保您至少創建了一個blockstack ID。您將使用這個ID與應用程序進行交互。
任務1:安裝代碼并檢索依賴項
您可以使用git克隆源代碼，或者從存儲庫下載并解壓縮代碼。這些指令假定您正在克隆。
1.通過克隆來安裝代碼。
$ git clone https://github.com/blockstack/blockstack-todos
2.切換到目錄到代碼的根目錄。
$ cd blockstack-todos
3.使用npm安裝依賴項。
$ npm install
Todo應用程序有一個基本的Vue.js結構。有幾個配置文件，但中央編程文件在src目錄:
| 文件 | 描述 |
|---|---|
| main.js | 應用程序初始化。 |
| App.vue | 處理authResponse的代碼。 |
| components/Landing.vue | 初始登錄頁面的代碼。 |
| components/Dashboard.vue | 應用程序數據存儲和用戶退出。 |
任務2:登錄到應用程序
示例應用程序在本地主機上的節點服務器中運行。在本節中，您將啟動應用程序并與之交互。
1.確保您位于代碼庫的根目錄中。
$ pwd
/Users/moxiegirl/repos/blockstack-todos
這條路徑對您來說是不同的，但是請仔細檢查最后一部分，以確保您位于克隆到的目錄中，以及運行npm install的目錄中。
2.在本地環境中啟動應用程序。
$ npm run serve
您應該會看到類似如下的輸出:
98% after emitting CopyPlugin s
DONE Compiled successfully in 5854ms 7:34:28 PM
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.12:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
3.打開本地瀏覽器到http://localhost:8080url。
你應該看到一個簡單的應用程序:
4.選擇使用Blockstack登錄。
如果您已經登錄到Blockstack，應用程序會提示您選擇要使用的ID。如果你沒有登錄，Blockstack會提示你:
如成功登入該應用程式，用戶便會看到該應用程式:
任務3:學習登錄過程
對于應用程序開發人員，應用程序流類似于集中登錄服務(例如OAuth)使用的典型客戶機-服務器流。然而，使用Blockstack，身份驗證流程完全在客戶端進行。
分布式應用程序(DApp)和blockstack瀏覽器在身份驗證流期間通過來回傳遞兩個令牌進行通信。請求應用程序向blockstack瀏覽器發送一個authRequest令牌。一旦用戶批準登錄，blockstack瀏覽器就會使用authResponse令牌響應應用程序。這些令牌是JSON Web令牌，它們通過URL查詢字符串傳遞。
當用戶選擇在DApp上使用Blockstack登錄時，它調用redirectToSignIn()方法，該方法向Blockstack瀏覽器發送authRequest。Blockstack通過authRequest參數中的URL查詢字符串傳遞令牌:
https://browser.blockstack.org/auth?authRequest=j902120cn829n1jnvoa…
當blockstack瀏覽器接收到請求時，它使用臨時傳輸鍵向應用程序生成一個(authResponse)令牌。臨時傳輸鍵僅用于應用程序的特定實例，在本例中，用于簽名authRequest。應用程序在請求生成期間存儲臨時傳輸密鑰。傳輸密鑰的公共部分在authRequest令牌中傳遞。blockstack瀏覽器使用密鑰的公共部分加密通過authResponse返回的應用程序私有密鑰。
在登錄期間，blockstack瀏覽器從用戶的身份地址私鑰和應用程序的appDomain生成應用程序私鑰。app私鑰有三個功能:
- 它用于創建憑據，讓應用程序訪問特定應用程序的Gaia存儲桶。
- 它用于在用戶的Gaia存儲中對應用程序存儲的文件進行端到端加密。
- 它作為一個密碼秘密，應用程序可以使用它來執行其他密碼功能。
最后，app私鑰是確定性的，這意味著對于給定的用戶ID和域名，每次都會生成相同的私鑰。
任務4:解碼authRequest
要解碼令牌并查看它包含什么信息:
1.從URL復制authRequest字符串。
2.導航到jwt.io。
粘貼完整的令牌。
輸出應該類似如下:
{
"jti": "f65f02db-9f42-4523-bfa9-8034d8edf459”,
"iat": 1555641911,
"exp": 1555645511,
"iss": "did:btc-addr:1ANL7TNdT7TTcjVnrvauP7Mq3tjcb8TsUX”,
"public_keys": [
“02f08d5541bf611ded745cc15db08f4447bfa55a55a2dd555648a1de9759aea5f9”
],
"domain_name": "http://localhost:8080”,
"manifest_uri": "http://localhost:8080/manifest.json”,
"redirect_uri": "http://localhost:8080”,
"version": “1.3.1”,
"do_not_include_profile": true,
"supports_hub_url": true,
"scopes": [
“store_write”,
“publish_data”
]
}
iss屬性是一個分散的標識符或did。這將標識應用程序的用戶和用戶名。具體的did是一個bc -addr。
任務5:在登錄代碼的底層
現在，轉到您克隆或下載的底層blockstack-todo代碼。每個文件都處理登錄和退出:
| 文件 | 描述 |
|---|---|
| App.vue | 處理authResponse |
| Landing.vue | 生成authRequest。 |
| Dashboard.vue | 處理信號。 |
src/components/Landing.vue 代碼配置AppConfig對象，然后使用它創建UserSession。然后，應用程序調用redirectToSignIn()函數，該函數生成authRequest并將用戶重定向到blockstack驗證器:
signIn () {
const appConfig = new this.blockstack.AppConfig(['store_write', 'publish_data’])
const UserSession = new this.blockstack.UserSession({ appConfig: appConfig })
UserSession.redirectToSignIn()
}
一旦用戶進行了身份驗證，應用程序將在src/App中處理authResponse。vue文件。:
mounted () {
const UserSession = this.UserSession
if (UserSession.isUserSignedIn()) {
this.userData = UserSession.loadUserData()
this.user = new this.blockstack.Person(this.userData.profile)
this.user.username = this.userData.username
} else if (UserSession.isSignInPending()) {
UserSession.handlePendingSignIn()
.then((userData) => {
window.location = window.location.origin
})
}
},
如果Blockstack.isusersignedin()為真，則該用戶先前已在其中簽名，因此Blockstack從瀏覽器中提取數據并在我們的應用程序中使用它。如果對blockstack.UserSession.isSignInPending()的檢查為真，則先前的authResponse已發送到應用程序，handlePendingSignIn()函數的作用是:處理任何掛起的登錄。
注銷是在src/components/Dashboard.vue中處理的。
signOut () {
this.UserSession.signUserOut(window.location.href)
}
該方法允許應用程序創建者在用戶退出時決定將用戶重定向到哪里:
任務6:處理應用程序
現在，嘗試向todo列表添加一些項。例如，試著列出你想要在Blockstack上構建的應用程序列表:
每個列表都立即存儲在連接到塊堆棧ID的Gaia Hub中。有關Gaia Hub的更多信息，請參閱本文檔中的概述。你可以去取待辦事項。打開Javascript控制臺，運行以下命令添加json文件:
userSession.getFile("todos.json", { decrypt: true }).then((file) => {console.log(file)})
你應該看到一個JSON與你剛剛添加的todos:
[
{
"id”:2,
"text":"Software package manager secured by the blockchain”,
"completed”:false
},
{
"id”:1,
"text":"Mutable torrents with human readable names”,
"completed”:false
},
{
"id”:0,
"text":"Decentralized twitter”,
"completed”:false
}
]
添加另一個todo并勾選它。當您使用Javascript控制臺獲取新生成的文件時，結果會反映您的更改。尋找“完成”:正確的:
[
{
"id”:3,
"text":"Blockstack Todo”,
"completed”:true
},
{
"id”:2,
"text":"Software package manager secured by the blockchain”,
"completed”:false
},
…
]
現在您已經看到了應用程序的實際應用，深入了解它是如何工作的。
任務7:實現存儲
轉到您克隆或下載的底層blockstack-todo代碼。與Gaia Hub的應用程序交互起源于src/components/Dashboard.vue文件。首先，檢查Todos的更改是在哪里處理的:
watch: {
todos: {
handler: function (todos) {
const UserSession = this.UserSession
// encryption is now enabled by default
return UserSession.putFile(STORAGE_FILE, JSON.stringify(todos))
},
deep: true
}
},
傳入todos JSON對象，并使用blockstack.UserSession.putFile()方法將其存儲在Gaia Hub中。
代碼需要使用blockstack.UserSession.getFile()方法從存儲中讀取Todo項，該方法返回一個promise:
fetchData () {
const UserSession = this.UserSession
UserSession.getFile(STORAGE_FILE) // decryption is enabled by default
.then((todosText) => {
var todos = JSON.parse(todosText || '[]’)
todos.forEach(function (todo, index) {
todo.id = index
})
this.uidCount = todos.length
this.todos = todos
})
},
從promise中檢索todos數據。
總結
現在，您已經擁有了構建復雜應用程序所需的所有東西，包括身份驗證和去中心化Internet上的存儲。為什么不嘗試編寫一個訪問多個概要文件的示例應用程序呢?
如果您想了解blockstack API，可以訪問blockstack核心API文檔或blockstack JS API。
GO …..
