まいにちDappsの5日目は3日目で作成したサービス内ウォレットをより実用的なDappsとして開発するために、Firebase Authと連携してFirestoreでデータ管理をしていきます。
これまで作成したDappsはいずれもweb3ログインをさせるだけでした。web3ログインで得られるデータはオンチェーンのものに限られます。これでも十分成り立つDappsの要件はありますが、ユーザーごとにプライベートなデータ管理が必要だったりオフチェーンのほうが効率が良いケースがあります。その際は従来のオフチェーンのデータベース（クラウド）を利用したデータ管理とAuthでの権限管理をする必要があります。
Thirdweb × Firebase Auth
https://portal.thirdweb.com/auth/integrations/firebase の記事を元に進めていきます。
Firebaseで新しいプロジェクトを作ります。
プロジェクトの設定>サービスアカウントから新しいキーを生成します。
npx thirdweb create app --template firebase-auth でテンプレートから作成しちゃいます。中でやっていることは参考元の記事に書いてある通り、npm moduleのインストールやfirebase initの設定、状態管理の設定などです。
.env.local ファイルを作成して上記firebaseの情報を環境変数に設定します。
firebaseのコンソールからAuthenticationを開始します。
yarn devでlocalhostを立ち上げます。
connect walletをしてさらにSign inをするとログイン状態が確認できます。
なお、firestoreを開始してルールを以下に設定すると、ユーザーのデータは誰からも閲覧できるがユーザー本人しか編集できない、というルールを追加することができます。
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// The wildcard expression {userId} makes the userId variable available in rules.
match /users/{userId} {
// Only allow users to update their own documents.
allow create, update, delete: if request.auth != null && request.auth.uid == userId;
// But anybody can read their profile.
allow read;
}
}
}Web3Auth × FIrebase Auth
まいにちDapps#3で取り上げたWeb3Authも同様の連携が可能です。
こちらの記事を元に進めていきます。
https://web3auth.io/docs/content-hub/guides/firebase#interacting-with-blockchain
Firebaseのプロジェクトを作成してAuthenticationのmethodのgoogleログインを有効にしておきます。
web3Authのダッシュボードからplug and playでプロジェクトを作成します。
ReactのプロジェクトをWeb3Authのテンプレートから作成します。
npx degit Web3Auth/web3auth-pnp-examples/web-no-modal-sdk/custom-authentication/firebase-react-no-modal-example w3a-firebase-demo && cd w3a-firebase-demo && npm install && npm run start
firebaseのinit情報とWeb3AuthのClient IDを適切な場所に置くと出来上がりです。
まとめ
以上今回は2つの実装方法をご紹介しました。
ウォレット接続だけであればsdkを使ってすぐできますが、Firebase Authのようなweb2のAuthシステムとの連携は一手間必要なのでDapps開発エンジニアであれば押さえておきたいところです。
弊社Pontechはweb3に関わる開発を得意とするテック企業です。サービス開発に関するご相談はこちらのフォームからお願いいたします。
また、受託開発案件に共に取り組むメンバーを募集しています！ご興味のある方はぜひお話させてください！
