Anchor

新しいEOS接続方法Anchor Link（アンカーリンク）

 

仮想通貨EOSのブロックチェーンに接続するにはScatter（スキャッター）がメジャーですが、ブロックプロデューサー候補のGreymass開発のAnchor（アンカー）がScatterに変わるdApps接続方法として注目を集めています。

目次
  1. QRコードのみで接続できるAnchor Link
  2. Anchor Linkのサンプルコード
  3. 最後に

QRコードのみで接続できるAnchor Link

従来はScatterなどのデスクトップアプリを立ち上げてdAppsに接続する必要がありました。

今回の接続方法はiPhoneにAnchor（アンカー）というアプリ（現時点2020年6月3日ではiOSのTestflight経由のアプリのみ）をインストールして、QRを読むだけで、ログイン、トランザクションなどの処理を行うことができるようになりました。

EOSERS（イオサーズ）
2020.05.28
Anchor（アンカー） EOSIOウォレットと認証システムがモバイル化
https://eosers.com/2020/05/28/anchor（アンカー）-eosioウォレットと認証システムがモ
Greymassチームがモバイル版のAnchor（アンカー） ウォレットを発表しました。1か月以上前に新しいデスクトップウォレットをリリースしたばかりのGreymassは、エコシステムで最も包括的なウォレットの1つを簡単に作成しました。ユーザーはEOSIOエコシステムへの接続を簡単に維持できるようになり、すべてのプラットフォームで単一のウォレットを使用できるようになります。AnchorウォレットについてAnchor（アンカー） ウォレットのモバイルバージョンは、いくつかの興味深い点で、デスクトップウォレットよりも柔軟性に優れています。…

なんでiPhoneでQRコードによる接続が必要なのかというと、AppleがdApps起動用のブラウザをアプリに搭載するのを排除してきており、秘密鍵のみを管理する鍵管理アプリにすることで規制を回避できる可能性があります。

Anchor Linkのサンプルコード

EOSブロックチェーンにAnchor Linkで接続するサンプルコードを明記しました。

以下のコードもコピペするだけで動作するものとなります。

<!DOCTYPE html>
<html lang="jp">
<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"></script>
<script src="https://unpkg.com/anchor-link-browser-transport"></script>
<script>
    
 // アプリ識別子、該当する場合はeosio契約アカウントに設定する必要があります
 const identifier = 'example'
        
 // ブラウザのトランスポートを初期化する
 const transport = new AnchorLinkBrowserTransport()
        
 // リンクを初期化する
 const link = new AnchorLink({transport})
        
 // ink.restoreSession（）を使用して復元された、またはlink.login（）で作成されたセッションインスタンス
 let session

 // ドキュメントのロード時に呼び出されるセッションの復元を試みます
 function restoreSession() {
  link.restoreSession(identifier).then((result) => {
   session = result
   if (session) {
    didLogin()
   }
  })
 }

 // ログインしてセッションを保存する（成功した場合）
 function login() {
  link.login(identifier).then((result) => {
   session = result.session
   didLogin()
  })
 }

 // ログアウトしてストレージからセッションを削除
 function logout() {
  document.body.classList.remove('logged-in')
  session.remove()
 }

 // セッションが復元または作成されたときに呼び出されます
 function didLogin() {
  document.getElementById('account-name').textContent = session.auth.actor
  document.body.classList.add('logged-in')
 }

 // セッションを使用してトークンを転送する
 function transfer() {
  const action = {
   account: 'eosio.token',
   name: 'transfer',
   authorization: [session.auth],
   data: {
    from: session.auth.actor,
    to: 'eoserscrypto',
    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 (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>ようこそ <b id="account-name">名無しさん</b>！</p>
<ul>
<li><button onclick="transfer()">eoserscryptoに送金する</button></li>
<li><button onclick="logout()">ログアウト</button></li>
</ul>
<p><small>Fキーを押してeoserscryptoに送金する</small></p>
<pre id="log"></pre>
</div>
<div id="login-ui">
<button onclick="login()">ログイン</button>
</div>
</body>
</html>

 

QRコードをAnchorアプリで読み込むだけでEOSブロックチェーンに接続できたと思います。

非常に簡単で、スタイリッシュな接続になっています。

最後に

今回Anchor Linkの簡単なソースコードと接続について紹介しました。
次回は、実際に各機能のサンプルコードを紹介していきたいと思います。

Anchor dApps EOS アカウント ウォレット プログラミング 仮想通貨 暗号通貨
EOS初心者おすすめ記事
合わせて読みたい
RELATED POST