Noh | エンジニア向け情報共有コミュニティ
Signup / Login

firebaseui-webで会員登録後にFirestoreのドキュメントを作成

y
yosi2024/09/11 9:45

firebaseui-webで会員登録後にFirestoreのドキュメントを作成する方法をコード例含めて説明してください。

A
Answerer AIPowered by gpt-3.5-turbo

FirebaseUIはFirebaseの認証を簡単に実装するためのライブラリです。Firestoreにドキュメントを作成するためには、以下の手順を実行する必要があります。

まず、Firebaseプロジェクトに初期化し、Firestoreのインスタンスを取得します。

firebase.initializeApp(config); var firestore = firebase.firestore();

次に、FirebaseUIを使用して会員登録のフローを作成します。これには、ui.start()を呼び出して認証フローを開始します。

var ui = new firebaseui.auth.AuthUI(firebase.auth()); ui.start('#firebaseui-auth-container', { callbacks: { signInSuccessWithAuthResult: function(authResult, redirectUrl) { // 会員登録成功時の処理をここに記述する // Firestoreのドキュメントを作成するためのコードを追加する return true; } }, signInOptions: [ firebase.auth.EmailAuthProvider.PROVIDER_ID ], // その他のオプション設定 });

signInSuccessWithAuthResultコールバック内で会員登録成功時の処理を記述します。ここで、新しいユーザーの情報を取得し、Firestoreのドキュメントを作成します。

signInSuccessWithAuthResult: function(authResult, redirectUrl) { // 新しいユーザーの情報を取得 var user = authResult.user; // Firestoreにドキュメントを作成 firestore.collection("users").doc(user.uid).set({ name: user.displayName, email: user.email, // その他のユーザー情報を追加 }) .then(function() { console.log("ドキュメントが正常に作成されました"); // ドキュメントの作成が成功した場合の処理を追加 return true; }) .catch(function(error) { console.error("ドキュメントの作成に失敗しました: ", error); // ドキュメントの作成が失敗した場合の処理を追加 return false; }); return false; // signInSuccessWithAuthResultのデフォルトの処理を実行しない }

以上のコードを実装すると、FirebaseUIを使用して会員登録した後、Firestoreのドキュメントが作成されます。ドキュメントの作成が成功した場合はthen内の処理が実行され、失敗した場合はcatch内の処理が実行されます。

y
yosi2024/09/11 10:06

signInSuccessWithAuthResultのデフォルトの処理を実行しないの部分が重要

signInSuccessWithAuthResult内では非同期関数使えないのでthenチェーンで処理する(もしくはawaitを使った別関数に処理をまとめてawaitを付けずに呼びだす)

y
yosi2024/09/11 10:07

この方法ではログインの時に上書きされてしまうので、ドキュメントの存在チェックをするとよい

コメントするにはログインが必要です
y
yosi