０　はじめに

この記事は、こちらの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などで行うことが推奨されます。

今回は以上です。

ぜひやってみてください。