💭

thirdwebウォレット接続によるサインインを実装してみましょう

2022/12/14に公開

こんにちは、CryptoGamesの高橋です。

本日は、こちらの記事を元に、Ethereumウォレットによるウェブサイトへのサインインの方法を見ていきます。

https://blog.thirdweb.com/guides/how-to-add-web3-sign-in-with-thirdweb/

1.コードを準備する

では、まずはこちらから、git clone を行っていきましょう。
https://github.com/thirdweb-example/sign-in-button

下のように、できました。

次に、yarn installを行います。

次に、「.env」で秘密鍵を設定します。

「.gitignore」にも「.env」を設定します。

2.構成ファイルを確認する

では、configurationファイルを確認していきましょう。

下のように、「auth.config.js」を作成しています。

これは秘密鍵とドメイン名(署名の時に表示されます。)によって作成されます。

続いて、下のように、全ての認証のエンドポイントを管理できるように、下のように、exportを行なっています。

3.認証SDKを確認する

では、この認証を設定していきます。

下のように、「_app.js」の「ThirdwebProvider」に適用させます。

これで、アプリを通じ、SDKのフックが使えるようになりました。

最後に、ウォレット接続時に、authの中で、「loginOptional」というパラメータを渡しています。

ここでは、falseを渡していますが、もちろんカスタマイズすることも可能です。

4.実際に立ち上げてみよう

では、「yarn dev」を行い、立ち上げてみましょう。

このように、立ち上がりました。

入ろうとすると、署名を求められ、

署名を行うと、このように入ることができました。

今回は以上です。

最後までありがとうございました!

Discussion