magic.linkを使ったウォレットレスオンボーディング

magic.linkがFlowブロックチェーンに対応したようなので、巷で話題のウォレットレスオンボーディングとやらを体験してみたいと思います。

アカウント作成

まずはmagic.linkのアカウントが必要なので、magic.linkのサイトでアカウントを作りましょう。

メールアドレスを入力して画面を進んでいくと、ウォレットの種類を選ぶ画面になるので、NetworkをFlow(Testnet)、Wallet TypeをUniversal WalletにしてNextをクリックします。

次のChoose your authはそのままにしてGet API Keysをクリックしましょう。

デモ

デモの立ち上げ

npxのコマンドが表示されるので、コピーしてターミナルで実行します。Node.jsを入れていない人は、こちらの記事を参考にしてみてください。

しばらく待つと3000番ポートでサービスが立ち上がるので、ブラウザでhttp://localhost:3000にアクセスします。問題が起きていなければ、デモの画面が表示されます。

ログイン

Connectをクリックしましょう。

従来のWeb3サービスならウォレットを選択する所ですが、Google認証かメールアドレス認証を選ぶ事が出来ますね! 使いたい認証方法を選んでログインすると、デモ画面が表示されます。Walletの所にFlowのアドレスが表示されているので、Flowのアカウントが作られている事が判ります。。

flowviewでアドレスを入力して検索すると、確かにアカウントが作られている事が判ります

入金

試しに送金してみたいので、テスト用のFLOWをもらいましょう。Get Test FLOWをクリックしてください。flow faucetというサイトが表示されます。

Your Account Addressの所には、デモ画面のWalletに表示されていたアドレスを入力します。TokenをTestnet FLOWにしたら、人間である事を確認して、FUND YOUR ACCOUNTをクリックしてください。しばらく待つと、1,000 FLOWを受け取った画面が表示されます。

デモの画面に戻って、Walletの所にあるRefreshをクリックしてください。

1,000 FLOW増えました!

送金

それでは送金してみましょう。Send Transactionの所にあるReceiving Addressに送金先のアドレスを入力します。先頭に0xを付ける事を忘れないでください。次に、Amount (FLOW)の所に送りたい金額を入れ、Send Transactionをクリックします。認証を通ると、確認画面が表示されます。

Approveをクリックすると、今度はトランザクションの確認画面が表示されます。

Confirmをクリックし、しばらく待つとトランザクションが完了します。

WalletのRefreshをクリックすると、送金した分だけ減っている事を確認しましょう。送金先のアドレスの残高は、flowview等で確認できます。