新手教程 钱包 App,浏览器钱包扩展 Dapp 签名兼容 Scatter 流程简单介绍

Surou · June 22, 2019 · 862 hits

前景

最近有小伙伴要做 App 钱包 Dapp 运行相关的,以及浏览器扩展,所以做点简单的介绍 由于 Scatter 发展较早,以及各方钱包的大力支持,Scatter 已经是 Dapp 运行的标准了,所以这块就是兼容(伪装)Scatter 协议。

原理

对于 Scatter 的协议的支持,就是让三方使用 Scatter.js 的网页,能够无缝的运行起来(需要签名时,对其数据正确签名) 对于 Scatter.js 来说,支持浏览器扩展和 ScatterDesktop(ws)两个版本,各种原因,Scatter 浏览器扩展官方已经明确废弃,不再更新了,且引导到桌面版本。但对于 App 来说,我们希望的是当前的 App 直接使用嵌入的 WebView 直接打开三方的 Dapp,并不需要与三方的通信或者 ws(三方跳转可以参考 UAL for EOSIO) 类似 UAL 的方式,可以把图中 EOSJS 改成 Scatter.js

我们先以 App 端为例,对于一个没有接触过 EOS 这块的同学,我们把测试工作细分下,尽量避免区块链相关枯燥的知识。

熟悉扩展交互流程,验证 Demo Dapp 运行正常

  • 第一步,去测试网申请测试账号,以及申请测试币,(可以请相关同学帮助)(点击跳转
  • 第二步,准备一个 Chrome 浏览器,安装好 Scatter 的扩展,(进入教程
  • 第三步,先编译一个 demo Dapp,方便我们后面测试 (进入教程) 需要修改下 RPC 地址和端口,以及 chain id。 host: http://api.kylin.eosbeijing.one port: 80 chain_id: 5fff1dae8dc8e2fc4d5b23b2c7665c97f9e9d8edf2b6485a86ba311c25639191

此时可以点击 测试 Scatter 扩展版本与 Demo Dapp 交互正确。

伪装 Scatter

上面保证了 Demo Dapp 与 Scatter 扩展的交互正确了,但我们需要的接管扩展。也就是我们要伪装一个 Scatter 对象, 参考项目 (Scatter javascript warpper for webview) 简单来说就是我们在 App 中的 WebView 中注入一个 js,并创建一个 Scatter 对象,并撒谎告诉 Demo Dapp Scatter 的浏览器扩展已经安装好了

inyIdentitys.initEOS("\(account)", "\(publicKey)");
const scatter = new TinyScatter();
scatter.loadPlugin(new TinyEOS());
window.scatter = scatter;
document.dispatchEvent(new CustomEvent('scatterLoaded'));

此时 Demo Dapp 会去当前的 Content 页面中找到我们伪装的 Scatter 对象,并与伪装 Scatter 接口交互数据。 我们伪装的 Scatter 收到数据后,把传入的数据发给 WebView 外边的钱包 App, 比如交易签名,Demo Dapp 会把需要签名的数据塞给伪装的 Scatter 的接口requestSignature,然后伪装的 Scatter 会把这些数据,暗度陈仓给 Webview 外边的钱包 App,App 选用对应的私钥签名后,将数据返回给伪装的 Scatter,并返回 Demo Dapp。Demo Dapp 拿到签名后的数据后,继续后续的操作。

测试

当 WebView 打开 Demo Dapp,点击,会伪装的 Scatter 会拦截相关请求,比如签名,当 Scatter 把需要签名的数据返给外边的 App,App 用对应的私钥签名后,返回给伪装 Scatter,能够完成与 Scatter 扩展版本与 Demo Dapp 一样的交互.

目前已接管的接口,部分功能直接忽略

  • requestSignature
  • requestArbitrarySignature
  • getOrRequestIdentity
  • identityFromPermissions
  • authenticate
  • forgetIdentity
  • requestAddNetwork
  • getVersion
  • getPublicKey
  • linkAccount
  • hasAccountFor
  • requestTransfer
  • createTransaction

https://github.com/xuewuli/Tiny.Scatter/blob/54ff161b5afbbe77287507c3432e51bcbcf46673/src/BrigeAPI.js#L8:10

其他支持方式

UAL for EOSIO Reference Authenticator

参考

https://github.com/xuewuli/Tiny.Scatter https://github.com/EOSIO/eosio-reference-chrome-extension-authenticator-app https://github.com/EOSIO/ual-eosio-reference-authenticator

原文博客:https://www.bcskill.com/index.php/archives/706.html

No Reply at the moment.
需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up