作爲一個 EOSIO 開源錢包，Anchor 並沒有支持 Scatter 協議，而是自研了 EOSIO Signing Request (ESR) 協議。最近接了這個協議，談談一些經驗，也方便後來者接入更順利。
首先是幾個 Github 地址：
這是 Anchor 錢包的開源地址，作爲接入前瞭解錢包用，不想看也可以不看。
這裏可以迅速瞭解 EOSIO Signing Request (ESR) 協議基本原理，瞭解 EOSIO 的開發者可以快速過，原理並不複雜。
接入的依賴包，接入需要的基本知識這裏就都有了。它的 Github 頁：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) 協議有喚起登錄 / 支付和二維碼登錄 / 支付兩種形式，通配手機、電腦等不同設備，支持多交易。
和其他主流協議對比：
幕布源文檔：https://www.mubucm.com/doc/1L0iVwiMCJ
在我的接入使用中，在產品功能涉及多籤的前提下，操作能正常進行，所以至少就目前的體驗來講，ESR 協議對 eosjs2 的操作能很好支持。
總的來說，ESR 協議的原理和接入並不複雜，可以很快速實現，個人總結主要有下面幾個需要注意的坑：
link.login()之前需要先link.restoreSession()，如果有可恢復 session 就直接用恢復 session，不再link.login()。另外注意link.restoreSession()出來的值直接是 session；session 是個僞對象，從其中取 auth 進行操作經常會有各種問題，個人經驗取 auth 時最好使用模板字符串方式像這樣取：
auth = `${connected.auth}`；session.transact如果報錯，錯誤信息的 type 是 object（似乎又是僞對象），實際打出來是字符串。所以如果有類似alert( typeof(e)==="object"? JSON.stringify(e) : e );的代碼，會導致 alert 空對象{}；ESR 協議支持多交易，但在官方文檔代碼示例中，缺乏多交易示例。可以看到在上面代碼示例中，單交易是直接傳入 JSON 而不是 JSON 數組的，如果直接傳入多交易的 JSON 數組，會報錯。ESR 協議中
.transact多交易數組，需要將鍵從action改爲actions，即以session.transact({actions:交易 JSON 數組})的格式發起交易。