かねブロ: XRP用のウォレットを自作するー新規ウォレット作成

前回作った test.html をコピーして名前を wallet.html に変更してから、不要なコードを削除しておきます。このファイルにこれからコードを追加していきます。

[wallet.html]

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.js"></script>
  <script src="ripple-0.17.4.js"></script>
  <script>
    //ここにJavaScriptコードを書いていきます
  </script>
  <style type="text/css">
    //ここにCSSを書いていきます
    td, th { border: 1px solid black; padding: 5px; }
    table { border-collapse: collapse; }
  </style>
</head>
<body>
  //ここにHTMLを書いていきます
</body>
</html>

１．オフライン用のRippleAPIインスタンスを作る

まず、オフラインでRippleAPIを利用するためのインスタンスを作ります。次のコードを<script>～</script>の最初に書いてください。

const apiOffline = new ripple.RippleAPI();

ちなみに、Rippleサーバーに接続してオンラインでRippleAPIを利用するには以下のようにします。

const apiOnline = new ripple.RippleAPI({ server: 'wss://s1.ripple.com' });

２．ウォレットを作る

ウォレットは、アドレスとシークレットキーという二つの要素から成ります。

アドレスとシークレットキーを生成するには generateAddress() というメソッドを使います。このメソッドはオフラインで使えます。

返り値は次のようなオブジェクトになります。

{
    "address": "rGCkuB7PBr5tNy68tPEABEtcdno4hE6Y7f",
    "secret": "sp6JS7f14BuwFY8Mw6bTtLKWauoUs"
}

まず、<body>～</body>にcreateNewWallet()を呼び出すボタンと結果の表を表示する場所を作ります。ボタンをクリックすると、そのボタンの下に注意書きと新しく生成されたアドレスとシークレットキーを表示するようにします。

<body>
    <form>
        <input type="button" class="button" onClick="createNewWallet()">
    </form>
    <div id="new_wallet"></div>
</body>

    #container {
        width: 50%;
        margin: 0 auto;
    }    
    .button {
        font-size: 1.4em;
        font-weight: bold;
        padding: 10px 30px;
        background-color: #248;
        color: #fff;
        border-style: none;
        border-radius: 5px;
    }

ブラウザで読み込むと、下のようなボタンが表示されるはずです。

では、generateAddress()メソッドを使ってアドレスとシークレットキーを生成して、表形式で表示する createNewWallet() という関数をつくってみましょう。

function createNewWallet() {
    const apiOffline = new ripple.RippleAPI(); // RippleAPIインスタンスを生成
    const pair = apiOffline.generateAddress(); // アドレスとシークレットキーを生成
    const address = pair.address;              // アドレスを取り出す
    const secret = pair.secret;                // シークレットキーを取り出す
    document.getElemetById('new_wallet').innerHTML =
        "<ul><li>下に表示されているアドレスとシークレットキーを紙に書くなどして保存してください</li>" +
        "<li>特にシークレットキーの保管には十分注意してください。</li>" +
        "<li>画像にしたりやテキストファイルにコピーして保存する場合はUSBメモリーなどの外部メモリーで保存するなどして、インターネットから切り離された状態で保管してください。</li>" +
        "<li>シークレットキーを失くすと資金を引き出すことができなくなります。</li></ul>" +
        "<li>シークレットキーを他人に知られると勝手に資金を引き出される危険があります。</li></ul>" +
        "<table><tr><th>Address</th><td>" +
         address +
        "</td></tr><th>Secret</th><td>" +
        secret +
        "</td></tr></table>"
};

「新規にウォレットを作成」ボタンをクリックすると、下の画像のように表示されます。

３．今回のまとめ

ここまでのコードをまとめると次のようになります。

[wallet.html]

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>XRP Wallet</title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.js"></script>
    <script src="ripple-0.17.4.js"></script>

    <script>


        function createNewWallet() {
            const apiOffline = new ripple.RippleAPI();
            const addressAndSecret = apiOffline.generateAddress();
            const address = addressAndSecret.address;
            const secret = addressAndSecret.secret;

            document.getElementById("new_wallet").innerHTML =
            "<ul><li>下に表示されているアドレスとシークレットキーを紙に書くなどして保存してください</li>" +
            "<li>特にシークレットキーの保管には十分注意してください。</li>" +
            "<li>画像にしたりやテキストファイルにコピーして保存する場合はUSBメモリーなどの外部メモリーで保存するなどして、インターネットから切り離された状態で保管してください。</li>" +
            "<li>シークレットキーを失くすと資金を引き出すことができなくなります。</li>" +
            "<li>シークレットキーを他人に知られると勝手に資金を引き出される危険があります。</li></ul>" +
            "<table><tr><th>Address</th><td>" +
            address +
            "</td></tr><tr><th>Secret</th><td>" +
            secret +
            "</td></tr></table>";
        };

    </script>

    <style type="text/css">
    #container {
        max-width: 600px;
        margin: 0 auto;
    }    
    .button {
        font-size: 1.4em;
        font-weight: bold;
        padding: 10px 30px;
        width: 100%;
        margin: 40px 0px 0px 0px;
        background-color: #248;
        color: #fff;
        border-style: none;
        border-radius: 5px;        
    } 
    table {
        margin: 10px auto;
        width: 500px;
    }
    td, th { border: 1px solid black; padding: 5px; }
    table { border-collapse: collapse; }
    </style>
</head>

<body>
    <div id="container">
        <form>
            <input type="button" class="button" value="新規にウォレットを作成" onClick="createNewWallet()">    
        </form>
        <div id="new_wallet"></div>  
    </div>
</body>
</html>

かねブロ

2017年5月10日水曜日

XRP用のウォレットを自作するー新規ウォレット作成

１．オフライン用のRippleAPIインスタンスを作る

２．ウォレットを作る

３．今回のまとめ

0 件のコメント:

コメントを投稿

2017年5月10日水曜日

XRP用のウォレットを自作する ー 新規ウォレット作成

１．オフライン用のRippleAPIインスタンスを作る

２．ウォレットを作る

３．今回のまとめ

0 件のコメント:

コメントを投稿

XRP用のウォレットを自作するー新規ウォレット作成