web3authとは？使い方やethers.js/web3.jsとの連携まで紹介
Web3authとは？ 一言でいうと.. Metamaskが不要になる！ ユーザーは、Metamaskのかわりにweb2.0のようにgoogleやemailを用いてログインすることも可能に。DappsのUI/UXの観点で大きな効果がある。 概要 Web3Authは、Web3ウォレットおよびアプリケーション用の認証ツール。すべてのソーシャルログイン、Webおよびモバイルネイティブプラットフォーム、ウォレットなどたくさんのキー管理方法に対応している。 ソーシャルログイン: GoogleやFacebookなど通常のログイン手法を使うことができる。また、メールを用いて場合はメールにリンクが送られてくる認証形式。 非保管公開鍵インフラ:ユーザーは、暗号鍵ペアの所有権とアクセスを制御。プロバイダーが独自にユーザーの秘密キーを取得することは不可能。 UIカスタマイズ: Web3AuthのデフォルトのUIをシンプルな方法でカスタマイズ可能。また、Webとモバイルどちらも対応 (参考: https://web3auth.io/docs/how-web3auth-works) Web SDK 1. パッケージをインストール npm install --save @web3auth/modal or yarn add @web3auth/modal ※ node 18以上が必要 2. web3auth ダッシュボードでプロジェクトを作成 1. Googleアカウントなどでアカウントを作成&ログイン 2. Create Projectを選択 3. プロジェクトの作成画面 選択するのは3つ project name 名前 英語で5文字以上 select environment テストネットの場合は、sapphire testnetを選択 select chain イーサリアムベースの場合は、EVM based Chainを選択 (作成したあとのプロジェクトダッシュボード画面) ※Client IDをコード上で使用 Web3authの使い方（基礎） Import index.tsxなどでimport import { Web3Auth } from "@web3auth/modal"; web3authのインスタンス化 // web3authをインスタンス化 const web3auth = new Web3Auth({ clientId: "先程コピーしたId", // Get your Client ID from Web3Auth Dashboard chainConfig: { chainNamespace: "eip155", chainId: "0x5", // Please use 0x5 for Goerli Testnet }, }); clientIdは、先程作成したダッシュボード上でコピーアンドペースト UIのconfigを更に設定 const web3auth = new Web3Auth({ // type uiConfig uiConfig: { appName: "W3A", // <-- Your dApp Name appLogo: "<https://web3auth.io/images/w3a-L-Favicon-1.svg>", // Your dApp Logo URL theme: "light", // "light" | "dark" | "auto" loginMethodsOrder: ["apple", "google", "twitter"], defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl loginGridCol: 3, // 2 | 3 primaryButton: "externalLogin", // "externalLogin" | "socialLogin" | "emailLogin" }, chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 }, clientId: "YOUR_WEB3AUTH_CLIENT_ID", web3AuthNetwork: "cyan", }); default languageをjaにすると、日本語になる 非同期処理でインスタンスを初期化 useEffectとasync awaitを使用 const checkIfWalletIsConnected = async () => { try { if (!web3auth) { console.log("web3auth not initialized yet"); return; } await web3auth.initModal(); } catch (error) {…