如何写一个最简单的区块链小程序“Hello Blockstack”，内附详细blockstack教程

2024年3月21日 180次阅读 来源: wdfrfee

这是一个最简单的区块链小程序“Hello Blockstack”的搭建过程，这个程序不需要后端api，也不需要用户进行注册数据库。

在这篇教程中我们会用到下面的工具：

  1. npm to manage dependencies and scripts
  2. browserify to compile node code into browser-ready code
  3. blockstack.js to authenticate the user and work with the user’s identity/profile information

第一步：安装yeoman

npm install -g yo generator-blockstack

第二步：给程序创建一个新的目录

mkdir hello-blockstack && cd hello-blockstack
yo blockstack

第三步：运行

npm run start

主要的代码注释和理解：

主要的文件是 app.js (在/public 文件夹里面)，代码被包括在监听事件里面，直到dom内容加载完成

document.addEventListener("DOMContentLoaded", function(event) {
})

在这个里面，我们有一个signin handler来处理用户的请求和进入

document.getElementById('signin-button').addEventListener('click', function() {
  blockstack.redirectUserToSignIn()
})

我们也有一个signout handler 来进行处理用户的推出

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)

{
  "name": "Hello, Blockstack",
  "start_url": "localhost:5000",
  "description": "A simple demo of Blockstack Auth",
  "icons": [{
    "src": "https://helloblockstack.com/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}

源代码实现：

git init
git add . && git commit -m "first commit"

然后去github添加一个新的repo
https://github.com/new

git remote add origin git@github.com:YOUR_USERNAME_HERE/hello-blockstack.git
git push origin master

加入到blockstack社区中来：https://contribute.blockstack…
下载blockstack：https://blockstack.org/install

    原文作者：wdfrfee
    原文地址: https://segmentfault.com/a/1190000014655994
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞