![見出し画像](https://assets.st-note.com/production/uploads/images/118530868/rectangle_large_type_2_6a5a66358d647e0e3e066533b81e6421.png?width=1200)
【完全保存版】Web3Authを使って、Astarでソーシャルログインを実装しよう!
0 はじめに
この記事は、こちらのYouTubeを元にして、ソーシャルログインができる、「Web3Auth」のやり方を紹介しています。
1 やってみよう
1 git clone を行う
下のように、git cloneを行って、ディレクトリを移動します。
git clone https://github.com/tahirahmadin/web3-onboarding-starter-kits.git
cd web3-onboarding-starter-kits/
![](https://assets.st-note.com/img/1696919830877-aWwgf5o27w.png?width=1200)
なお、こちらのGithubを使用しています。
2 依存関係のインストール
次に、依存関係をインストールします。
yarn install
![](https://assets.st-note.com/img/1696919825197-0FIiGAAQVh.png?width=1200)
3 立ち上げる
次のコマンドで立ち上げます。
yarn start
するとこのように成功しました。
![](https://assets.st-note.com/img/1696919818596-m1eQmiaJz2.png?width=1200)
4 ログインについて
localhost:3000を確認すると、下のように立ち上がっていました。
「Login」でログインします。
![](https://assets.st-note.com/img/1696919794759-YL5BG2WUuD.png?width=1200)
すると、このように、何でサインインを行うのかのポップアップが出ました。
今回私は、Googleログインを選択しました。
![](https://assets.st-note.com/img/1696919788185-XrYhnxdav6.png?width=1200)
「アカウントの選択」が立ち上がったので、任意のアカウントでサインインを行います。
ちなみに、ブラウザによってはあまりうまくいかないかもしれません。
私の場合は、「Google Chrome」でうまくいかず、「Brave」で行ったところ、うまくいきました。
![](https://assets.st-note.com/img/1696919782953-FmDYaz9IEO.png?width=1200)
このようなポップアップが立ち上がり、うまく接続できたようです。
![](https://assets.st-note.com/img/1696919777603-TiCy6HTUVs.png?width=1200)
5 値の取得について
では、色々と探ってみましょう。
![](https://assets.st-note.com/img/1696919764948-SjxJ02brer.png?width=1200)
例えば、「Get User Info」を押すと、このように、Eメールの情報などを取得することができました。
![](https://assets.st-note.com/img/1696919771348-yIlatcyux2.png?width=1200)
また、下のように、チェーンIDや残高なども取得することができました。
初めてやった時は、残高は0だと思います。
また、初期設定では、Mumbai(チェーンID:80001)となっていると思います。
![](https://assets.st-note.com/img/1696919753465-EjVs96f3NP.png?width=1200)
2 コードを読んでみよう
では、コードを読んでみましょう。
「App.js」を見てみます。
![](https://assets.st-note.com/img/1696913764689-BmJgrHj3js.png?width=1200)
1 Web3Authのインスタンス作成
下のように、「clientId」と「chainConfig」を使って、「Web3Auth」のインスタンスを作っていることがわかります。
「clientId」は元々Githubに埋め込まれているので、そのまま使えてしまいますが、本来は別のところに保管したほうがよさそうだと思いました。
![](https://assets.st-note.com/img/1696913948521-QdyBiwdRbs.png?width=1200)
2 chainIdについて
chainIdは一見見覚えがないですが、これを10進数に直すと、80001(mumbaiのチェーンID)となります。
また、rpcTargetはmumbaiのRPCエンドポイントを設定しているようです。
![](https://assets.st-note.com/img/1696913992005-HeEvch7cMd.png?width=1200)
3 chainNamespaceについて
「chainNamespace」は下のようになっていました。
EVM系の場合は、「EIP155」を使用します。
![](https://assets.st-note.com/img/1696918769664-hMQAMgtiUl.png?width=1200)
取得した「web3auth」は下のようにセットしています。
![](https://assets.st-note.com/img/1696914029885-Fa3L14UwVH.png?width=1200)
4 モーダルの初期化について
次に、こちらの、「initModal」を確認していきましょう。
![](https://assets.st-note.com/img/1696914057647-lV0rmE7wdG.png?width=1200)
その名の通り、モーダルを初期化しているようですね。
![](https://assets.st-note.com/img/1696914255226-EXYX7jxjE6.png?width=1200)
最後にプロバイダーをセットしています。
![](https://assets.st-note.com/img/1696914321324-kP90GEfML7.png?width=1200)
5 ログイン部分について
では、ログイン部分を見てみましょう。
「connect」が実施されています。
![](https://assets.st-note.com/img/1696914821740-i9xmHHdztA.png?width=1200)
公式を見ると、モーダルを表示させる役割を果たしているようです。
そして、返り値は「IProvider」インスタンスであることも確認できました。
![](https://assets.st-note.com/img/1696915206539-wGZepH23hu.png?width=1200)
6 ユーザー情報の取得について
次は、こちらの、「getUserInfo」関数を確認します。
![](https://assets.st-note.com/img/1696915302384-V3Mit6QNzH.png?width=1200)
下のようにユーザー情報を取得していることが確認できました。
![](https://assets.st-note.com/img/1696915421290-zojKKJIMYn.png?width=1200)
7 web3auth以外の処理について(getAccounts)
次に、「getAccounts」を確認します。
ここからは少し変わります。
「web3RPC.js」を見てみましょう。
![](https://assets.st-note.com/img/1696915659595-rAPLErynLT.png?width=1200)
すると、このように、「Web3.js」が使用されていることがわかりました。
つまり、ログインやユーザー情報の取得などは「web3auth」が行い、それ以外の部分は「Web3.js」が使われていることがわかりました。
![](https://assets.st-note.com/img/1696915793202-uDdUfhNAhR.png?width=1200)
参考までに、アカウントの取得などはこちらが使われています。
![](https://assets.st-note.com/img/1696916036934-aOZRKJ7jnB.png?width=1200)
8 web3auth以外の処理について(getBalance)
また、下のように、「getBalance」を見ても、同様に、「Web3.js」が使われていることがわかります。
![](https://assets.st-note.com/img/1696917213713-FyMz3b9uSw.png?width=1200)
「getBalance」関数が使われていますね。
![](https://assets.st-note.com/img/1696917240371-iXLsim0kpA.png?width=1200)
参考に、公式はこの部分になります。
![](https://assets.st-note.com/img/1696917326634-5NSUSebuob.png?width=1200)
他にも、「fromWei」関数などで「ether」に変換していますね。
![](https://assets.st-note.com/img/1696917614677-ZYhwQyYx6l.png?width=1200)
公式としては、この辺りが該当します。
![](https://assets.st-note.com/img/1696917527331-7f0zERRkBi.png?width=1200)
3 Astarチェーンで行ってみよう
最後に、チェーンを変えてやってみましょう。
「App.js」のこの部分を変えればうまくいきます。
AstarのチェーンIDは「592」なので、それを16進数に変換した「0x250」が入力されています。
![](https://assets.st-note.com/img/1696919494276-IAc6aGGE46.png?width=1200)
RPCはこの辺りを確認すればわかります。
もちろん、実務で行うときは、Alchemyなどで行うことが推奨されます。
![](https://assets.st-note.com/img/1696919557662-ADAqOqKt0C.png?width=1200)
今回は以上です。
ぜひやってみてください。
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊