连接浏览器插件钱包

Provider API#

什么是 Injected provider API?#

欧易 Injected providers API 是一个 JavaScript API,欧易将其注入用户访问的网站。您的 DApp 可以使用此 API 请求用户帐户,从用户连接的区块链读取数据,帮助用户签署消息和交易。

连接账户#

window.okxwallet.tronLink.request(args)

描述

欧易支持 DApp 发起的 TRX 转账、合约签名、授权以及其他授权的功能等。出于安全考虑,欧易需要用户授权 DApp 连接网站。DApp 必须先连接到网站,并等待用户的许可才能发起授权请求。

window.okxwallet.tronLink.request({ method: 'tron_requestAccounts'})

状态码

状态码
描述信息
200该站点之前已经被允许连接The site is already in the whitelist
200用户批准连接User allowed the request.
4000同一个 DApp 已经发起了连接网站请求Authorization requests are being processed, please do not resubmit
4001用户拒绝连接User rejected the request

例子

codeopen中打开。

HTML
JavaScript
<button class="connectTronButton">Connect Tron</button>
const connectTronButton = document.querySelector('.connectTronButton');

connectTronButton.addEventListener('click', () => {
  window.okxwallet.tronLink.request({
    method: 'tron_requestAccounts'
  }).catch((error)=>{
    console.log(error);
  })
});

在 TRON 网络上发起转账需要 3 个步骤:

  1. 创建转账交易
  2. 签署交易
  3. 广播签署的交易

在这个过程中,第 2 步需要 TronLink,而第 1 步和第 3 步都发生在 tronWeb 上。

签名交易#

okxwallet.tronLink.tronWeb.trx.sign(transaction, privateKey)

描述

步骤1: 创建转账交易

sendTRX

创建一个未签名的TRX转账交易

用法

okxwallet.tronLink.tronWeb.transactionBuilder.sendTrx(to,amount,from,options);

参数

参数描述类型
to转入TRX 的地址hexString
amount要发送的TRX 数量integer
from转出trx的可选地址hexString
optionspermission Idinteger

示例

okxwallet.tronLink.tronWeb.transactionBuilder.sendTrx("TVDGpn4hCSzJ5nkHPLetk8KQBtwaTppnkr", 100, "TNPeeaaFB7K9cmo4uQpcU32zGK8G1NYqeL");

步骤2: 签名交易

sign

为交易签名

提示
不要在任何面向 Web /面向用户的应用程序中使用它,以防暴露私钥。

用法

// sign a transaction
okxwallet.tronLink.tronWeb.trx.sign(transaction, privateKey);

参数

参数描述类型
transaction创建的交易对象JSON
privateKey用于签名的私钥 ,可选,默认使用构建 tronweb 时传入的私钥String

示例

const tradeobj = await okxwallet.tronLink.tronWeb.transactionBuilder.sendTrx("TNo9e8MWQpGVqdyySxLSTw3gjgFQWE3vfg", 100,"TM2TmqauSEiRf16CyFgzHV2BVxBejY9iyR",1);
const signedtxn = await okxwallet.tronLink.tronWeb.trx.sign(tradeobj, privateKey);
console.log(signedtxn)

步骤3: 广播签署的交易

sendRawTransaction 将已签名的交易广播到网络。

用法

// sign a transaction
okxwallet.tronLink.tronWeb.trx.sendRawTransaction(signedTransaction);

参数

参数描述类型
signedTransaction已经签名后的交易对象JSON

示例

const tronWeb = okxwallet.tronLink.tronWeb;
const tradeobj = await tronWeb.transactionBuilder.sendTrx("TNo9e8MWQpGVqdyySxLSTw3gjgFQWE3vfg", 100,"TM2TmqauSEiRf16CyFgzHV2BVxBejY9iyR",1);
const signedtxn = await tronWeb.trx.sign(tradeobj, privateKey);
const receipt = await tronWeb.trx.sendRawTransaction(signedtxn);
console.log(receipt)

例子

codeopen中打开。

HTML
JavaScript
<button class="connectTronButton btn">Connect Tron</button>
<button class="signTransactionButton btn">Sign Transaction</button>
const connectTronButton = document.querySelector('.connectTronButton');
const signTransactionButton = document.querySelector('.signTransactionButton');

signTransactionButton.addEventListener('click', () => {
  if (window.okxwallet.tronLink.ready) {
    const tronweb = okxwallet.tronLink.tronWeb;
    // const fromAddress = tronweb.defaultAddress.base58;
    const fromAddress = 'TNPeeaaFB7K9cmo4uQpcU32zGK8G1NYqeL'
    const toAddress = "TAHQdDiZajMMP26STUnfsiRMNyXdxAJakZ";
    const tx = await tronweb.transactionBuilder.sendTrx(toAddress, 10, fromAddress); // Step1
    try {
      const signedTx = await tronweb.trx.sign(tx); // Step2
      await tronweb.trx.sendRawTransaction(signedTx); // Step3
    } catch (error) {
      // error handling
      console.log(error)
    }
  }
});

connectTronButton.addEventListener('click', async() => {
  try{
    await window.okexchain.tronLink.request({
      method: 'tron_requestAccounts'
    });
  }catch(error){
    console.log(error);
  }
});

签名信息#

window.okxwallet.tronLink.tronWeb.trx.sign(message)

描述

DApp 要求用户签署消息。 签名后的消息将被转发到后端,以验证用户的登录是否合法。 DApp 发送请求,要求用户将钱包连接到网站,用户同意连接。

参数

参数描述类型
message普通非十六进制字符串或者十六进制字符串String

版本要求

  • 对于 okx wallet 2.80.0 之前 的版本:

参数无论是否是十六进制格式,都会进行十六进制转换,然后签名。因此如果本身消息就是十六进制,则验证签名的时候需要再进行十六进制转换一次来进行验证。

  • 对于 okx wallet 2.80.0 及之后 的版本:

如果入参为十六进制字符串,则无需转换,直接签名;

如果入参为非十六进制字符串,钱包内部会转换为十六进制字符串进行签名,如普通字符串 “helloworld” 对应的十六进制格式字符串为 “68656c6c6f776f726c64” 则 .sign('helloworld') 等同于 .sign('0x68656c6c6f776f726c64')

返回值

如果用户在弹窗中选择签名点击确认, DApp 将获取已签名的十六进制字符串。 例如:

0xaa302ca153b10dff25b5f00a7e2f603c5916b8f6d78cdaf2122e24cab56ad39a79f60ff3916dde9761baaadea439b567475dde183ee3f8530b4cc76082b29c341c

如果发生错误,将返回以下信息:

Uncaught (in promise) Invalid transaction provided

例子

codeopen中打开。

HTML
JavaScript
<button class="connectTronButton btn">Connect Tron</button>
<button class="signButton btn">Sign Message</button>
<button class="verifyButton btn">Verify Message</button>
const connectTronButton = document.querySelector('.connectTronButton');
const signButton = document.querySelector('.signButton');
const verifyButton = document.querySelector('.verifyButton');

signButton.addEventListener('click', async() => {
  if (window.okxwallet.tronLink.ready) {
    const tronweb = window.okxwallet.tronLink.tronWeb;
    try {
      const message = "0x1e"; // any normal string or hex string
      const signedString = await tronweb.trx.sign(message);
      // for test
      window.signedString = signedString;
    } catch (error) {
      // handle error
    }
  }
});

verifyButton.addEventListener('click', async() => {
  if (window.okxwallet.tronLink.ready) {
    const tronweb = window.okxwallet.tronLink.tronWeb;
    try {
      const message = "0x1e";
      const result = await tronweb.trx.verifyMessage(message, window.signedString);
    } catch (error) {
      // handle error
    }
  }
});

connectTronButton.addEventListener('click', () => {
  connetAccount();
});

async function connetAccount() {
  await window.okxwallet.tronLink.request({
    method: 'tron_requestAccounts'
  })
}

验证签名信息#

window.okxwallet.tronLink.tronWeb.trx.verifyMessage(hexMsg, signedMsg[, address])

描述

验证一个十六进制字符串的签名

参数

参数描述类型
hexMsg十六进制格式的字符串信息String
signedMsg此十六进制格式字符串信息的签名结果String
address进行签名和验证的钱包地址,可选String

版本要求

以上面的 helloworld 及其对应的十六进制 0x68656c6c6f776f726c64 为例

  • 对于 okx wallet 2.80.0 之前 的版本,签名及验证:

非十六进制字符串:

const signedMsg = await window.okxwallet.tronLink.tronWeb.trx.sign('helloworld')
const validate = await window.okxwallet.tronLink.tronWeb.trx.verifyMessage('0x68656c6c6f776f726c64', signedMsg)

十六进制字符串:

const signedMsg = await window.okxwallet.tronLink.tronWeb.trx.sign('0x68656c6c6f776f726c64')
// 这里需要多一步
const hexed = await window.okxwallet.tronLink.tronWeb.toHex('0x68656c6c6f776f726c64')
const validate = await window.okxwallet.tronLink.tronWeb.trx.verifyMessage(hexed, signedMsg)
  • 对于 okx wallet 2.80.0 及之后 的版本,签名及验证:

非十六进制字符串:

const signedMsg = await window.okxwallet.tronLink.tronWeb.trx.sign('helloworld')
const validate = await window.okxwallet.tronLink.tronWeb.trx.verifyMessage('0x68656c6c6f776f726c64', signedMsg)

十六进制字符串:

const signedMsg = await window.okxwallet.tronLink.tronWeb.trx.sign('0x68656c6c6f776f726c64')
const validate = await window.okxwallet.tronLink.tronWeb.trx.verifyMessage('0x68656c6c6f776f726c64', signedMsg)

返回值

(Promise) boolean: true 或 false

事件#

成功连接

在以下情况下会生成此消息:

  1. DApp 请求连接,用户在弹窗中确认连接
  2. 用户连接到网站

用法

window.addEventListener('message', function (e) {
  if (e.data.message && e.data.message.action == "connect") {
    // handler logic
    console.log('got connect event', e.data)
  }
})

断开连接

在以下情况下会生成此消息:

  1. DApp 请求连接,用户在弹窗拒绝连接
  2. 用户断开连接网站

用法

window.addEventListener('message', function (e) {
  if (e.data.message && e.data.message.action == "disconnect") {
    // handler logic
    console.log('got connect event', e.data)
  }
})

账户变更

在以下情况下会生成此消息:

  1. 用户登录
  2. 用户切换账户
  3. 用户锁定账户
  4. 超时后钱包自动锁定

用法

window.addEventListener('message', function (e) {
  if (e.data.message && e.data.message.action === "accountsChanged") {
    // handler logic
    console.log('got accountsChanged event', e.data)
  }
})

返回值

interface MessageEventAccountsChangedData {
  isTronLink: boolean;
  message: {
    action: string;
    data: {
      address: string | boolean;
    }
  }
}

例子

codeopen中打开。

HTML
JavaScript
<button class="connectTronButton">Connect Tron</button>
const connectTronButton = document.querySelector('.connectTronButton');

window.addEventListener('message', function (e) {
  if (e.data.message && e.data.message.action == "connect") {
    // handler logic
    console.log('got connect event', e.data)
  }
})

connectTronButton.addEventListener('click', () => {
  window.okxwallet.tronLink.request({
    method: 'tron_requestAccounts'
  }).catch((error)=>{
    console.log(error);
  })
});