Web3Authを使ったWeb3認証をチュートリアルで試す

Web3Authは、Web3アプリやウォレットのための認証インフラストラクチャ　と言われているサービスです。

Web3は、ブロックチェーンの技術(分散型のネットワーク)を基盤としたインターネットの概念ということなのですが、 ネットワークに参加しているコンピューター同士で直接やり取りし、データも分散して保存するので特定の企業を介さずコンテンツや個人データを管理できるようになると言われています。 Web2は読み取り/書き込みWebだが大企業に情報が集中、Web3は仲介されていない読み取り/書き込みWeb。

※ Web3に関しての参考文献

そして、任意のブロックチェーンネットワークに接続できるすべてのWebサイトまたはアプリケーションは、Web3アプリまたはdAppsと見なされます。 Web3アプリは特定のブロックチェーン上で実行されるか、少なくともユーザーに特定のブロックチェーンとの対話を提供するので、ユーザーがこれらの特定の暗号ネットワークに接続するための安全な方法が必要になります。 Web3認証を使用することで我々ユーザーは選択したネットワークに接続できます。 Web3認証ではEmailとパスワードの組み合わせではなく、暗号化されたキーを利用するのですが、キーの交換などが複雑でユーザーに優しくないので代替してくれるサービスが登場しています。

Web3Authもその一つで、すべてのソーシャルログイン、Webおよびモバイルネイティブプラットフォーム、ウォレット、およびその他のキー管理方法をすべて集約してくれるサービスとなっています。 Web3Authを使用すると、ユーザーは多要素アカウントと同様にキーを処理し、OAuthログイン、デバイス、およびその他の要素を使用してキーペアを管理します。ユーザーの完全な暗号化秘密鍵は、データベースや参加ノードのいずれであっても、鍵インフラストラクチャシステムのどこにも記録されません(※ 参考欄を参照)。

Web3Authのログインイメージ図）

やってみる

実際にローカルPC上で動かせるReactアプリにWeb3Authを使ってWeb3認証を組み込んでみます。

組み込みにはSDKを使います。

Web,Android,IOS,ReactNative,flutter用が用意されていました。

Web3Authダッシュボードでアカウントを作成

サインアップページからサインアップを行います。

名前、会社名、メールアドレスを記入し、アカウント(ワークスペース)を作成します。

作成後、ダッシュボードに遷移します。

プロジェクトを作成

Web3Authを使用するには、開発者ダッシュボードでプロジェクトを作成し、クライアントIDを取得する必要があります。

※ ローカルホストの開発にはアプリの登録は必要ありません。

Create a Projectボタンを押すと、ダイアログが立ち上がるので

プロジェクト名を入力して作成します。

プロジェクトにはClient IDとSecretが付随しており、アプリケーションへの組み込みに必要になってきます。

組み込み

実際にSDKをアプリに組み込む際の例です。

色々なアプリの組み込み例はWeb3Authのレポジトリにありますので参照してください。

Reactの例)

Web3AuthのSDKは、ユーザー/アプリケーションのフロントエンドクライアント上にのみ存在し、OAuthプロバイダーとAuthネットワーク間の相互作用を処理します。

※ アーキテクチャ

SDKのインストール

以下のコマンドをプロジェクトのディレクトリで実行してインストールします

npm i --save @web3auth/web3auth

モジュールのインポート

import { Web3Auth } from "@web3auth/web3auth";
import { CHAIN_NAMESPACES, ADAPTER_EVENTS } from "@web3auth/base";

初期化

web3authクラスを初期化してインスタンスを作成します。 web3authクラスを初期化するためにchainNamespaceが必要で,chainNamespaceはweb3authを初期化したいチェーンの種類を意味します。

const web3AuthInstance = new Web3AuthCore({
  chainConfig: { chainNamespace: eip155 },
  clientId: "YOUR_CLIENT_ID_HERE",
});

await web3AuthInstance.initModal();

現在、Web3Authは3つのchainNamespacesをサポートしています

clientIdには作成したプロジェクトに紐づいているClient IDを使います。

イベントのハンドリング

Web3Authが発信するイベントを検知して、ユーザーとWeb3Authとのやりとりをアプリに通知し、それらを処理します。

※ 例えば、ユーザーがログインしているかどうかをチェックするロジックを実装することができます

const subscribeAuthEvents = (web3AuthInstance: Web3Auth) => {
      web3AuthInstance.on(ADAPTER_EVENTS.CONNECTED, (data: unknown) => {
        console.log("Yeah!, you are successfully logged in", data);
      });

      web3AuthInstance.on(ADAPTER_EVENTS.CONNECTING, () => {
        console.log("connecting");
      });

      web3AuthInstance.on(ADAPTER_EVENTS.DISCONNECTED, () => {
        console.log("disconnected");
      });

      web3AuthInstance.on(ADAPTER_EVENTS.ERRORED, (error) => {
        console.error("some error or user has cancelled login request", error);
      });
};

ログイン/ログアウトのトリガー

const login = async () => {
    if (!web3AuthInstance) {
      console.log("web3auth not initialized yet");
      return;
    }
    const provider = await web3AuthInstance.connect();
    setProvider(provider);
 };

const logout = async () => {
    if (!web3AuthInstance) {
      console.log("web3auth not initialized yet");
      return;
    }
    await web3AuthInstance.logout();
    setProvider(null);
};

connect()関数を使用してログインモーダルを表示されます

logout()関数を使用してユーザーをログアウトさせます。

動作確認

アプリケーションをブラウザでアクセスしてログインできるか試してみました。

googleでログイン

Web3ウォレットでログイン(Torus Wallet)

ログインとログアウトを試しただけでしたが、SDKを使い数行のコードを書くだけでWeb3Authをアプリケーションに統合することが可能でした。

Web2認証とWeb3認証の間のギャップを埋めるための最も人気のある安全な代替手段の1つと言われているのも頷けますね。 分散型インターネット用のWeb3アプリケーションの開発はまだまだ複雑で時間がかかると言われていますが、Web3Authなどのサービスを使うことによって最終的に解決されていくのではないでしょうか。 実際に試してみて、Web３認証に関してもこれからどんどん学習していきたいと思いました。

参考

• Web3Authとは何ですか？
• Web3Authはどのように機能しますか？
• キー管理とセキュリティ