EOS [从零开始 DAPP 开发] 15 - 使用 scatter-js 完成 EOS 账户登录 DAPP

pendingauth · 2019年08月31日 · 30 次阅读

本文转载自币乎,作者松果,原文链接:https://bihu.com/article/1234700093

上一篇文章使用Redux中保存的数据模拟了EOS账户登录DAPP,但使用的是指定的EOS账户名,这篇文章介绍使用scatter-js连接Scatter和DAPP,并使用真正的EOS账户登录DAPP。

使用scatter-js

在src目录下新建一个api目录,用来放置和EOS区块链交互的代码,api目录下新建两个文件:config.js、login.js,代码结构如下:

config.js用于配置scatter-js,代码如下:

config.js导出了如下对象:

  • api:用于向EOS区块链push Action;

  • rpc:用于从EOS区块链获取数据;

  • network:不同区块链网络(本地、测试网、主网)的配置信息;

  • app_name:连接Scatter时显示的应用名称。

login.js调用scatter-js提供的API来实现登录相关的逻辑,代码如下:

login.js导出了两个函数login和logout,都带有一个dispatch参数,这里使用了函数式编程,dispatch本身也是函数。

再来看App.js的代码:

上一篇文章相比,修改了mapDispatchToProps,从:

const mapDispatchToProps = (dispatch) => {
  return {
    login(){
      dispatch(actionCreator.changeLoginStatus("songguo55555"));  
    },
    logout(){
      dispatch(actionCreator.changeLoginStatus(""));  
    }
  }
}

改成了:

const mapDispatchToProps = (dispatch) => {
  return {
    login(){
      dispatch(login);  
    },
    logout(){
      dispatch(logout);  
    }
  }
}

这就是redux-thunk中间件的作用,它让store.dispatch函数的参数不但可以是action对象,还可以是函数;

原来的actionCreator.changeLoginStatus逻辑放到了Scatter登录/登出之后;

注意,这里外层的login()、logout()是映射到组件属性(this.props)上的函数对象,dispatch函数参数中的login、logout是从login.js导入的函数对象。

导入账户到Scatter

使用keosd生成一对公私钥:

cleos wallet unlock
cleos wallet create_key

创建出的公钥是EOS6K9E7ivcnsr4LLKfQBGcJ8dYfRKpt9d3FF8G5aBUp7wXy7h43i,使用这个公钥到:

https://monitor.jungletestnet.io/#account

注册两个测试账号:songguo12345、songguo54321,然后打开Scatter,导入公钥对应的私钥,把EOS账户添加到Scatter中:

测试

在frontend目录运行npm start命令启动项目,点击“登录”按钮,会弹出Scatter的确认框:

选择一个账户登录到DAPP,会调用login函数,页面上可以读取到账户名:

点击“注销”,调用logout函数退出登录:

可以在Scatter中主动断开和DAPP的连接,也会调用logout函数:

Tips

项目代码在Github同步更新:https://github.com/songguo6/weiwen-dapp

更多内容

EOS开发系列目录

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册