요구 사항：
v6.11.2지 고 시작-설치 종속성 & 실행된 서버$ git clone [email protected]:blockstack/blockstack-todos.git$ cd blockstack-todos$ yarn install$ npm run start
로그인-어떻게 작동
기호에 Blockstack 버튼을 클릭 하면 임시 키를 응용 프로그램 내에서 생성 됩니다. 그냥 응용 프로그램의 특정 인스턴스에 대 한 사용 됩니다,이 키를 그냥 로그인 요청을 서명 하는 데 사용 됩니다. 그것은 또한 브라우저에 전송 하 고 Blockstack 노드를 돌아오기 데이터를 암호화 하는 데 사용 되는 공개 키를 생성 합니다. Blockstack 저장소에 데이터를 저장 하는 응용 프로그램 수 있습니다. 서명된 인증 요청 Blockstack는 JSON 웹 토큰을 통해 전송 됩니다.
토큰을 해독 하 고 정보 보유 하 고 있습니다 수 jwt.io 이동한 거기 전체 토큰을 붙여 넣습니다. 출력은 아래와 유사한 좀 해야 합니다.
{
"jti":"bbf82977-cc3e-4593-bacc-33ff3b749790",
"iat":1501784293,
"exp":1501787893,
"iss":"did:btc-addr:1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa",
"public_keys":[
"a09932dx081273xmreDII8yhjd0m8ioawfokljISHhejrnHG"
],
"domain_name":"http://localhost:8080/",
"manifest_uri":"http://localhost:8080/manifest.json",
"redirect_uri":"http://localhost:8080/",
"scopes":[
"store-write"
]}
로그인 버튼을 클릭 하면 한 모달 뜹니다. 승인을 클릭 하면 다음 작업이 수행 됩니다.요청은 브라우저에서 로컬 blockstack 코어 노드로 전송 됩니다.Blockstack 코어 노드는 응용 프로그램에 반환 되는 세션 토큰을 생성 합니다.이 세션 토큰을 읽고 개인 Blockstack 저장소에 파일을 쓸 응용 프로그램을 수 있습니다.인증 응답 다음 위의 authRequest와 비슷한 생성 됩니다.authResponse는 또한 응용 프로그램만을 위한 개인 키를 포함 합니다. 응용 프로그램을 저장소에서 데이터를 암호화 수 있습니다.Todo 응용 프로그램에 로그인 하는 게 지금!
스토리지-그것은 어떻게 작동행동에 가이아 저장 모든의 몇 가지를 추가 하십시오. 아마 볼 하려는 응용 프로그램의 목록을 Blockstack의 상단에 내장. 나는 다음과 같은 추가:소프트웨어 패키지 관리자는 blockchain에 의해 확보인간의 읽을 수 있는 이름으로 변경할 수 급류분산 트위터이러한 모든 지금 가이아 허브 Blockstack id 연결에 저장 된 가이아 허브에 대 한 허브 설명서를 참조 하십시오.자바 스크립트 콘솔을 열고 다음 명령을 실행 하 여 방금 추가한 todos.json 파일을 가져올 수 있습니다.
blockstack.getFile("todos.json", { decrypt: true }).then((file) => {console.log(file)})
최근에 추가 된 모든을 표시 됩니다. 위에서 만든 모든 다음 JSON 생성:
[
{
"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와 마크 완료 추가:[x] Blockstack Todo소프트웨어 패키지 관리자는 blockchain에 의해 확보인간의 읽을 수 있는 이름으로 변경할 수 급류분산 트위터자바 스크립트 콘솔을 사용 하 여 새로 생성 된 파일을 가져올 때 변경을 반영 됩니다.
[
{
"id":3,
"text":"Blockstack Todo",
"completed":true
},
{
"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
}]
로그인-구현：
signIn () {
const blockstack = this.blockstack
blockstack.redirectToSignIn()}
때이 단추를 위에서 설명한 인증 요청 생성 되 고 사용자는 그들의 blockstack-브라우저 로그인 승인에 리디렉션됩니다. 사용자 승인 로그인 되 면 응용 프로그램은 authResponse를 처리 해야 합니다. 이것은 응용 프로그램 루트에 페이지 src/App.vue에서 일어나 /:
if (blockstack.isUserSignedIn()) {
this.user = blockstack.loadUserData().profile
} else if (blockstack.isSignInPending()) {
blockstack.handlePendingSignIn()
.then((userData) => {
window.location = window.location.origin
})}
먼저 우리는 사용자가 blockstack.isUserSignedIn()로 로그인 경우 확인 합니다. 이것이 사실이 라면 우리 수 있습니다 브라우저에서 그 데이터를 끌어 그리고 우리의 응용 프로그램에서 사용 합니다.만약 우리가 서명 하지 않습니다 우리는 다음 blockstack.isSignInPending()를 확인 하셔야 합니다. 즉 그는 authResponse 응용 프로그램에 다시 전송 된 아직 처리 되지 않았습니다. handlePendingSignIn 함수는 보류에 로그인 처리를 다룬다.Signout은 src/components/Dashboard.js에서 처리 됩니다. 메서드를 응용 프로그램 작성자를 로그 아웃 시 사용자를 리디렉션할 위치를 결정 하는 것을 수 있습니다
signOut () {
this.blockstack.signUserOut(window.location.href)}
스토리지-구현다음 응용 프로그램 가이아 허브와 상호 작용 하는 방법을 보고 하겠습니다. 이 코드는 src/components/Dashboard.vue 파일에 살고 있다. 먼저는 모든 변경 내용이 처리 됩니다 볼 수 있습니다.
todos: {
handler: function (todos) {
const blockstack = this.blockstack
return blockstack.putFile(STORAGE_FILE, JSON.stringify(todos), { encrypt: true })
},
deep: true}모든 JSON 개체에 전달 됩니다를 볼 수 있습니다. 다음 우리는 우리의 가이아 허브에 그것을 저장 하는 blockstack.putFile() 메서드를 사용 합니다. 신속 하 고 쉽게!다른 작업을 수행할 필요가 우리는 모든 저장소에서 읽을 것입니다. 이 약속을 반환 하는 blockstack.getFile() 방법으로 수행 됩니다.fetchData () {
const blockstack = this.blockstack
blockstack.getFile(STORAGE_FILE, { decrypt: true })
.then((todosText) => {
var todos = JSON.parse(todosText || '[]')
todos.forEach(function (todo, index) {
todo.id = index
})
this.uidCount = todos.length
this.todos = todos
})},
이제 복잡 한 응용 프로그램 인증 및 분산 인터넷에 스토리지를 구성 하는 데 필요한 모든 있다. 나아가 고 구축!！