MetaMask Signing

Last committed

22/06/18 00:24

Posted

18/06/19 18:00

MetaMask を介したメッセージ署名を行いました。

MetaMask を準備

MetaMask は Chrome 拡張機能です。下記からダウンロードください。

HTML を作成

MetaMask が用意した Ethereum web3 API を実行する HTML ファイルを作成します。

cat << EOF > metamask-signing.html
<!DOCTYPE html>
<html>
  <head>
    <title>MetaMask Signing</title>
  </head>
  <body>
    <textarea id="address" placeholder="Address" readonly></textarea>
    <textarea id="message" placeholder="Message"></textarea>
    <textarea id="sign" placeholder="Sign" readonly></textarea>
    <style>
      textarea {
        display: block;
        margin: .8em;
        width: 40em;
        height: 10em;
        max-width: 100%;
      }
    </style>
    <script>
      var web3 = new Web3(web3.currentProvider);
      var address = document.getElementById('address');
      var current = null;
      var refresh = setInterval(function() {
        if (web3.eth.defaultAccount !== current) {
          address.value = current = web3.eth.defaultAccount;
        }
      }, 100);
      var sign = document.getElementById('sign');
      document.getElementById('message').addEventListener('blur', function() {
        if (this.value) {
          var hex = web3.toHex(this.value);
          var from = web3.eth.defaultAccount;
          web3.personal.sign(hex, from, (e, r) => sign.value = r);
        }
      }, false);
    </script>
  </body>
</html>
EOF

サーバーを起動

Web サーバーはなんでもいいのですが、 Python 3 の http.server モジュールを利用するのが楽です。

python3 -m http.server

ブラウザで確認

ブラウザで確認すると MetaMask を介して署名をすることが出来ると思います。

MetaMask のアンロックを忘れずに！