【完全保存版】Web3Authを使って、Astarでソーシャルログインを実装しよう！
０ はじめに
この記事は、こちらのYouTubeを元にして、ソーシャルログインができる、「Web3Auth」のやり方を紹介しています。
１ やってみよう
１ git clone を行う
下のように、git cloneを行って、ディレクトリを移動します。
git clone https://github.com/tahirahmadin/web3-onboarding-starter-kits.git
cd web3-onboarding-starter-kits/ 
なお、こちらのGithubを使用しています。
２ 依存関係のインストール
次に、依存関係をインストールします。
yarn install
３ 立ち上げる
次のコマンドで立ち上げます。
yarn startするとこのように成功しました。
４ ログインについて
localhost:3000を確認すると、下のように立ち上がっていました。
「Login」でログインします。
すると、このように、何でサインインを行うのかのポップアップが出ました。
今回私は、Googleログインを選択しました。
「アカウントの選択」が立ち上がったので、任意のアカウントでサインインを行います。
ちなみに、ブラウザによってはあまりうまくいかないかもしれません。
私の場合は、「Google Chrome」でうまくいかず、「Brave」で行ったところ、うまくいきました。
このようなポップアップが立ち上がり、うまく接続できたようです。
５ 値の取得について
では、色々と探ってみましょう。
例えば、「Get User Info」を押すと、このように、Eメールの情報などを取得することができました。
また、下のように、チェーンIDや残高なども取得することができました。
初めてやった時は、残高は０だと思います。
また、初期設定では、Mumbai（チェーンID：80001）となっていると思います。
２ コードを読んでみよう
では、コードを読んでみましょう。
「App.js」を見てみます。
１ Web3Authのインスタンス作成
下のように、「clientId」と「chainConfig」を使って、「Web3Auth」のインスタンスを作っていることがわかります。
「clientId」は元々Githubに埋め込まれているので、そのまま使えてしまいますが、本来は別のところに保管したほうがよさそうだと思いました。
２ chainIdについて
chainIdは一見見覚えがないですが、これを10進数に直すと、80001（mumbaiのチェーンID）となります。
また、rpcTargetはmumbaiのRPCエンドポイントを設定しているようです。
３ chainNamespaceについて
「chainNamespace」は下のようになっていました。
EVM系の場合は、「EIP155」を使用します。
取得した「web3auth」は下のようにセットしています。
４ モーダルの初期化について
次に、こちらの、「initModal」を確認していきましょう。
その名の通り、モーダルを初期化しているようですね。
最後にプロバイダーをセットしています。
５ ログイン部分について
では、ログイン部分を見てみましょう。
「connect」が実施されています。
公式を見ると、モーダルを表示させる役割を果たしているようです。
そして、返り値は「IProvider」インスタンスであることも確認できました。
６ ユーザー情報の取得について
次は、こちらの、「getUserInfo」関数を確認します。
下のようにユーザー情報を取得していることが確認できました。
７ web3auth以外の処理について（getAccounts）
次に、「getAccounts」を確認します。
ここからは少し変わります。
「web3RPC.js」を見てみましょう。
すると、このように、「Web3.js」が使用されていることがわかりました。
つまり、ログインやユーザー情報の取得などは「web3auth」が行い、それ以外の部分は「Web3.js」が使われていることがわかりました。
参考までに、アカウントの取得などはこちらが使われています。
８ web3auth以外の処理について（getBalance）
また、下のように、「getBalance」を見ても、同様に、「Web3.js」が使われていることがわかります。
「getBalance」関数が使われていますね。
参考に、公式はこの部分になります。
他にも、「fromWei」関数などで「ether」に変換していますね。
公式としては、この辺りが該当します。
３ Astarチェーンで行ってみよう
最後に、チェーンを変えてやってみましょう。
「App.js」のこの部分を変えればうまくいきます。
AstarのチェーンIDは「592」なので、それを16進数に変換した「0x250」が入力されています。
RPCはこの辺りを確認すればわかります。
もちろん、実務で行うときは、Alchemyなどで行うことが推奨されます。
今回は以上です。
ぜひやってみてください。
いいなと思ったら応援しよう！
