이 튜토리얼에서는 다음 도구를 사용합니다:
npm
browserify
blockstack.js
첫 번째 단계: yearoman 설치
npm install -g yo generator-blockstack
두 번째 단계 : 프로그램에 대한 새 디렉토리 만들기
mkdir hello-blockstack && cd hello-blockstack
yo blockstack
세 번째 단계: 실행
npm run start
주요 코드 설명 및 이해:
주요 파일은 dom 컨텐츠 로드가 완료될 때까지 리스너 이벤트에 포함되는 app.js입니다.
document.addEventListener("DOMContentLoaded", function(event) {
})
여기에는 사용자의 요청과 시작을 처리하는 signin handler가 있습니다.
document.getElementById('signin-button').addEventListener('click', function() {
blockstack.redirectUserToSignIn()
})
우리는 또한 사용자의 출시를 처리하기위한 신호 아웃 핸들러를 가지고 있습니다.
document.getElementById('signout-button').addEventListener('click', function() {
blockstack.signUserOut(window.location.origin)
})
다음으로 사용자의 이력서를 표시하는 함수가 있습니다.
function showProfile(profile) {
var person = new blockstack.Person(profile)
document.getElementById('heading-name').innerHTML = person.name()
document.getElementById('avatar-image').setAttribute('src', person.avatarUrl())
document.getElementById('section-1').style.display = 'none'
document.getElementById('section-2').style.display = 'block'
}
사용자가 로그인 할 수있는 세 가지 상태가 있습니다.
The user is already signed in The user has a sign in request that is pending The user is signed out
코드 표현 방법
if (blockstack.isUserSignedIn()) {
// Show the user's profile
} else if (blockstack.isSignInPending()) {
// Sign the user in
} else {
// Do nothing
}
사용자 요청 중
if (blockstack.isUserSignedIn()) { var profile = blockstack.loadUserData().profile showProfile(profile) } else if (blockstack.isSignInPending()) { blockstack.handlePendingSignIn().then(function(userData) { window.location = window.location.origin }) }
프로그램 화면표시 스타일에 대한 제어 파일:
프로그램 표시 스타일을 제어하는 파일은 (/ public / manifest.json입니다.
소스 코드 구현:
git init
git add . && git commit -m "first commit"
그런 다음 github에 새로운 보고서를 추가하십시오.
git remote add origin git@github.com:YOUR_USERNAME_HERE/hello-blockstack.git
git push origin master
blockstack 커뮤니티에 추가하려면 다음과 같이 하십시오.
https://contribute.blockstack.org/
Download blockstack：https://blockstack.org/install