您正在查看: EOS 分类下的文章

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

前景

最近有小伙伴要做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

get_table_by_scope

通过code获取scope

./cleos get scope eosio.token -t accounts -l 4
{
  "rows": [{
      "code": "eosio.token",
      "scope": "a11111111111",
      "table": "accounts",
      "payer": "eosio",
      "count": 1
    },{
      "code": "eosio.token",
      "scope": "a123",
      "table": "accounts",
      "payer": "eosio",
      "count": 1
    },{
      "code": "eosio.token",
      "scope": "a22222222222",
      "table": "accounts",
      "payer": "eosio",
      "count": 1
    },{
      "code": "eosio.token",
      "scope": "a33333333333",
      "table": "accounts",
      "payer": "eosio",
      "count": 1
    }
  ],
  "more": true
}

参考

https://developers.eos.io/eosio-nodeos/v1.6.0/reference#get_table_by_scope
https://github.com/EOSIO/eos/pull/5486

如何判断交易的不可逆

轮询节点,返回不可逆区块信息再提示成功,具体技术过程如下:

  1. push_transaction 后会得到 trx_id
  2. 请求接口 POST /v1/history/get_transaction
  3. 返回参数中 block_num 小于等于 last_irreversible_block 即为不可逆

修改eosjs2 支持其他默认平台币符号,系统名,公钥前缀

前景

目前基于EOS搭建的链,由于修改了默认的系统代币符号,所以js库这边也要做对应的修改

测试数据

为了方便讲解,我们假设修改版与原版的对比数据如下

平台币符号 系统名 公钥前缀 js库名 ecc库名
EOS原版 EOS eosio EOS eosjs eosjs-ecc
修改版 BSC bscio BSC bscjs bscjs-ecc

依赖库

eosjs
版本:20.0 release
https://github.com/EOSIO/eosjs/tree/20.0.0
eosjs-ecc
版本:最新release
https://github.com/EOSIO/eosjs-ecc

eosjs部分修改

eosjs-numeric.ts

https://github.com/EOSIO/eosjs/blob/849c03992e6ce3cb4b6a11bf18ab17b62136e5c9/src/eosjs-numeric.ts#L276

export function stringToPublicKey(s: string): Key {
    if (typeof s !== 'string') {
        throw new Error('expected string containing public key');
    }
    if (s.substr(0, 3) === 'EOS') { // 中的EOS修改为自己的代币符号 BSC
        const whole = base58ToBinary(publicKeyDataSize + 4, s.substr(3));

https://github.com/EOSIO/eosjs/blob/849c03992e6ce3cb4b6a11bf18ab17b62136e5c9/src/eosjs-numeric.ts#L311

export function convertLegacyPublicKey(s: string) {
    if (s.substr(0, 3) === 'EOS') { // 中的EOS修改为自己的代币符号 BSC
        return publicKeyToString(stringToPublicKey(s));
    }
    return s;
}

修改eosjs包名为bscjs

package.json

"name": "eosjs"// 修改为 bscjs
"eosjs-ecc": "4.0.4", // 修改为 bscjs-ecc

src\eosjs-ecc.d.ts

declare module "eosjs-ecc"; // 修改为 bscjs-ecc

src\eosjs-jssig.ts

import * as ecc from 'eosjs-ecc'; // 修改为 bscjs-ecc

src\eosjs-serialize.ts

export function supportedAbiVersion(version: string) {
    return version.startsWith('eosio::abi/1.'); // eosio修改为 bscio
}

src\tests\eosjs-jssig.test.ts

import * as ecc from 'eosjs-ecc';

此时已经将eosjs修改为了我们的bscjs,下面我们在处理下依赖的ecc包

eosjs-ecc部分修改

前言

原本想不修改ecc,直接内部指定pubkey_prefix,但是
由于src\eosjs-jssig.ts 中
https://github.com/EOSIO/eosjs/blob/849c03992e6ce3cb4b6a11bf18ab17b62136e5c9/src/eosjs-jssig.ts#L21

const pub = convertLegacyPublicKey(ecc.PrivateKey.fromString(k).toPublic().toString());

使用了 toPublic,
https://github.com/EOSIO/eosjs-ecc/blob/2063257e8d02e82ce4ca1d0fdadf451281b33d1e/src/key_private.js#L62

function toPublic() {
        if (public_key) {
            // cache
            // S L O W in the browser
            return public_key
        }
        const Q = secp256k1.G.multiply(d);
        return public_key = PublicKey.fromPoint(Q);
    }

而这个函数里,又没有参数可以指定 自定义的 pubkey_prefix
https://github.com/EOSIO/eosjs-ecc/blob/2063257e8d02e82ce4ca1d0fdadf451281b33d1e/src/key_public.js#L18

function PublicKey(Q, pubkey_prefix = 'EOS') {

所以eosjs-ecc 还是得改下默认的平台币符号
已经提交issue(github)

开始修改默认的代币符号

src\api_common.js

 privateToPublic: (wif, pubkey_prefix = 'EOS') => // 中的EOS修改为自己的代币符号 BSC
      PrivateKey(wif).toPublic().toString(pubkey_prefix),

    /**
        @arg {pubkey} pubkey - like EOSKey..
        @arg {string} [pubkey_prefix = 'EOS']

        @return {boolean} valid

        @example ecc.isValidPublic(pubkey) === true
    */
    isValidPublic: (pubkey, pubkey_prefix = 'EOS') => // 中的EOS修改为自己的代币符号 BSC
      PublicKey.isValid(pubkey, pubkey_prefix),

src\key_private.js

assert.equal(pub.toString(), 'EOS859gxfnXyUriMgUeThh1fWv3oqcpLFyHa3TfFYC4PK2HqhToVM', pubError)

修改下前缀 EOS为BSC 不然推npmjs时验证不通过

src\key_public.js

以下pubkey_prefix都改成BSC

function PublicKey(Q, pubkey_prefix = 'EOS') {
function toString(pubkey_prefix = 'EOS') {
PublicKey.isValid = function(pubkey, pubkey_prefix = 'EOS') {
PublicKey.fromString = function(public_key, pubkey_prefix = 'EOS') {
PublicKey.fromStringOrThrow = function(public_key, pubkey_prefix = 'EOS') {

src\object.test.js

describe('secp256k1 keys', () => {
    it('randomKey', function() {
      this.timeout(1100)
      return PrivateKey.randomKey()
    })

    it('private to public', () => {
      assert.equal(
        pub.toString(),
        // 'PUB_K1_6MRyAjQq8ud7hVNYcfnVPJqcVpscN5So8BhtHuGYqET5BoDq63',
        'EOS6MRyAjQq8ud7hVNYcfnVPJqcVpscN5So8BhtHuGYqET5GDW5CV', // 前缀改为 BSC
        'pub.toString'
      )
    })

修改eosjs-ecc的包名相关

package.json

"name": "eosjs-ecc", // 修改为 bscjs-cc

下面内容中的eosjs-ecc 都替换成 bscjs-ecc

 "build_browser": "mkdir -p lib && browserify -o lib/eosjs-ecc.js -s eosjs_ecc lib/index.js",
    "build_browser_test": "yarn build && browserify -o dist/test.js lib/*.test.js",
    "documentation": "node_modules/documentation/bin/documentation.js",
    "minimize": "terser lib/eosjs-ecc.js -o lib/eosjs-ecc.min.js --source-map --compress --mangle",
    "docs": "yarn documentation -- readme src/api_common.js --section \"Common API\" --shallow",
    "srisum": "npx srisum lib/eosjs-ecc.*",
    "prepublishOnly": "yarn build && yarn minimize && yarn test_lib && yarn docs && yarn srisum"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/EOSIO/eosjs-ecc.git"
  },

src\common.test.js

 it('privateToPublic', () => {
    // const pub = 'PUB_K1_859gxfnXyUriMgUeThh1fWv3oqcpLFyHa3TfFYC4PK2Ht7beeX'
    const pub = 'EOS859gxfnXyUriMgUeThh1fWv3oqcpLFyHa3TfFYC4PK2HqhToVM' // 前缀改BSC
    assert.equal(ecc.privateToPublic(wif), pub)
  })

  it('isValidPublic', () => {
    const keys = [
      [true, 'PUB_K1_859gxfnXyUriMgUeThh1fWv3oqcpLFyHa3TfFYC4PK2Ht7beeX'],
      [true, 'EOS859gxfnXyUriMgUeThh1fWv3oqcpLFyHa3TfFYC4PK2HqhToVM'], // 前缀改BSC
      [false, 'MMM859gxfnXyUriMgUeThh1fWv3oqcpLFyHa3TfFYC4PK2HqhToVM'],
      [false, 'EOS859gxfnXyUriMgUeThh1fWv3oqcpLFyHa3TfFYC4PK2HqhToVm', 'EOS'], // 前缀改BSC
      [true, 'PUB859gxfnXyUriMgUeThh1fWv3oqcpLFyHa3TfFYC4PK2HqhToVM', 'PUB'],
      [false, 'PUB859gxfnXyUriMgUeThh1fWv3oqcpLFyHa3TfFYC4PK2HqhToVm', 'PUB'],
    ]

然后参考https://www.bcskill.com/index.php/archives/437.html 将 bscjs-ecc 提交到npmjs,即可编译bscjs

编译步骤

编译bscjs-ecc

npm i 或 yarn install // 安装依赖
npm run build // 编译
npm publish // 提交npmjs

编译bscjs

npm i 或 yarn install // 安装依赖
yarn build-web // 编译web使用

此时会在 eosjs\dist-web 生成

测试例子

<html>
<head>
  <meta charset="utf-8">


<script src='dist-web/eosjs-api.js'></script>
<script src='dist-web/eosjs-jsonrpc.js'></script>
<script src='dist-web/eosjs-jssig.js'></script>
<script>
  let pre = document.getElementsByTagName('pre')[0];
  const defaultPrivateKey = "xxx"; // 私钥
  const rpc = new eosjs_jsonrpc.JsonRpc('https://xxx.com'); // RPC 地址
  const signatureProvider = new eosjs_jssig.JsSignatureProvider([defaultPrivateKey]);
  const api = new eosjs_api.Api({ rpc, signatureProvider });

  (async () => {
    try {   
      console.log(await rpc.get_account('bcskillsurou')); // 测试账号
      const result = await api.transact({
        actions: [{
            account: 'bscio',
            name: 'buyrambytes',
            authorization: [{
                actor: 'bcskillsurou',
                permission: 'active',
            }],
            data: {
                payer: 'bcskillsurou',
                receiver: 'bcskillsurou',
                kbytes: 8192
            },
        }]
      }, {
        blocksBehind: 3,
        expireSeconds: 30,
      });
      console.log('\n\nTransaction pushed!\n\n' + JSON.stringify(result, null, 2));
      //pre.textContent += '\n\nTransaction pushed!\n\n' + JSON.stringify(result, null, 2);
    } catch (e) {
      console.log( '\nCaught exception: ' + e);
      if (e instanceof eosjs_jsonrpc.RpcError)
        console.log( '\n\n' + JSON.stringify(e.json, null, 2));
    }
  })();
</script>
</head>
<body>
<pre style="width: 100%; height: 100%; margin:0px; "></pre>
  <pre style="width: 100%; height: 100%; margin:0px; "></pre>
</body>
</html>

参考

https://eosio.github.io/eosjs/
https://eosio.github.io/eosjs/guides/2.-Transaction-Examples.html