作為一個(gè) EOSIO 開源錢包,Anchor 并沒有支持 Scatter 協(xié)議,而是自研了 EOSIO Signing Request (ESR) 協(xié)議。最近接了這個(gè)協(xié)議,談?wù)勔恍┙?jīng)驗(yàn),也方便后來(lái)者接入更順利。
首先是幾個(gè) Github 地址:
這是 Anchor 錢包的開源地址,作為接入前了解錢包用,不想看也可以不看。
這里可以迅速了解 EOSIO Signing Request (ESR) 協(xié)議基本原理,了解 EOSIO 的開發(fā)者可以快速過(guò),原理并不復(fù)雜。
接入的依賴包,接入需要的基本知識(shí)這里就都有了。它的 Github 頁(yè):https://github.com/greymass/anchor-link
接入的代碼示例。
其中 login 文件夾的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor Link - Login</title>
<script src="https://unpkg.com/anchor-link@3"></script>
<script src="https://unpkg.com/anchor-link-browser-transport@3"></script>
<script>
// app identifier, should be set to the eosio contract account if applicable
const identifier = 'example'
// initialize the browser transport
const transport = new AnchorLinkBrowserTransport()
// initialize the link
const link = new AnchorLink({
transport,
chains: [{
chainId: 'aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906',
nodeUrl: 'https://eos.greymass.com',
}]
})
// the session instance, either restored using link.restoreSession() or created with link.login()
let session
// tries to restore session, called when document is loaded
function restoreSession() {
link.restoreSession(identifier).then((result) => {
session = result
if (session) {
didLogin()
}
})
}
// login and store session if sucessful
function login() {
link.login(identifier).then((result) => {
session = result.session
didLogin()
})
}
// logout and remove session from storage
function logout() {
document.body.classList.remove('logged-in')
session.remove()
}
// called when session was restored or created
function didLogin() {
document.getElementById('account-name').textContent = session.auth.actor
document.body.classList.add('logged-in')
}
// transfer tokens using a session
function transfer() {
const action = {
account: 'eosio.token',
name: 'transfer',
authorization: [session.auth],
data: {
from: session.auth.actor,
to: 'teamgreymass',
quantity: '0.0001 EOS',
memo: 'Anchor is the best! Thank you <3'
}
}
session.transact({action}).then((result) => {
document.getElementById('log').innerHTML += `Transaction broadcast! ${ result.processed.id }\n`
})
}
// ˉ\_(ツ)_/ˉ
window.addEventListener('keypress', (event) => {
if (session && (event.key === 'F' || event.key === 'f')) {
transfer()
}
})
</script>
<style>
.logged-in #login-ui {
display: none;
}
#app-ui {
display: none;
}
.logged-in #app-ui {
display: block;
}
</style>
</head>
<body onload="restoreSession()">
<div id="app-ui">
<p>Welcome <b id="account-name">foo</b>!</p>
<ul>
<li><button onclick="transfer()">Send an homage to team Greymass</button></li>
<li><button onclick="logout()">Log out</button></li>
</ul>
<p><small>Press F to pay respects</small></p>
<pre id="log"></pre>
</div>
<div id="login-ui">
<button onclick="login()">Login</button>
</div>
</body>
</html>
EOSIO Signing Request (ESR) 協(xié)議有喚起登錄 / 支付和二維碼登錄 / 支付兩種形式,通配手機(jī)、電腦等不同設(shè)備,支持多交易。
和其他主流協(xié)議對(duì)比:
幕布源文檔:https://www.mubucm.com/doc/1L0iVwiMCJ
在我的接入使用中,在產(chǎn)品功能涉及多簽的前提下,操作能正常進(jìn)行,所以至少就目前的體驗(yàn)來(lái)講,ESR 協(xié)議對(duì) eosjs2 的操作能很好支持。
總的來(lái)說(shuō),ESR 協(xié)議的原理和接入并不復(fù)雜,可以很快速實(shí)現(xiàn),個(gè)人總結(jié)主要有下面幾個(gè)需要注意的坑:
link.login()
之前需要先link.restoreSession()
,如果有可恢復(fù) session 就直接用恢復(fù) session,不再link.login()
。另外注意link.restoreSession()
出來(lái)的值直接是 session;session 是個(gè)偽對(duì)象,從其中取 auth 進(jìn)行操作經(jīng)常會(huì)有各種問題,個(gè)人經(jīng)驗(yàn)取 auth 時(shí)最好使用模板字符串方式像這樣取:
auth = `${session.auth}`
;session.transact
如果報(bào)錯(cuò),錯(cuò)誤信息的 type 是 object(似乎又是偽對(duì)象),實(shí)際打出來(lái)是字符串。所以如果有類似alert( typeof(e)==="object"? JSON.stringify(e) : e );
的代碼,會(huì)導(dǎo)致 alert 空對(duì)象{}
;ESR 協(xié)議支持多交易,但在官方文檔代碼示例中,缺乏多交易示例。可以看到在上面代碼示例中,單交易是直接傳入 JSON 而不是 JSON 數(shù)組的,如果直接傳入多交易的 JSON 數(shù)組,會(huì)報(bào)錯(cuò)。ESR 協(xié)議中
.transact
多交易數(shù)組,需要將鍵從action
改為actions
,即以session.transact({actions:交易 JSON 數(shù)組})
的格式發(fā)起交易。