月: 2023年1月

前提の話 Firebaseの初期化の設定などはここでは省略します。今回はGoogleアカウントでの認証を例にメモ的な感じでまとめています。 実装としてはGoogleアカウントで認証し、登録情報をFirestoreに登録するといった流れです。 NuxtとFirebaseのバージョンは以下の通りです。 Nuxt: 3.0.0 Firebase: 9.15.0 Googleアカウントで認証する Googleアカウントで登録する流れを実装していきます。 まずは登録するための画面をcomponentsに作成します。このコンポーネントはpagesで呼び出すイメージです。 「Googleで登録」のボタンを押下するとgoogleSignUpメソッドが呼び出されます。ここでのuseAuth()とgoogleSignUpメソッドは後ほど実装していきます。 ・components/SignUpForm.vue [crayon-67169c8c6c5ba483937698/] 「Googleで登録」のボタンを押下したgoogleSignUpメソッドがここで呼ばれます。GoogleAuthProviderのインスタンスを作成し、signInWithPopupを呼び出すことで、Google認証にポップアップが表示されます。 Google認証が完了したら、そのデータを元にgetUserメソッドでFirestoreのデータを取得しにいきます。 既にFirestoreにデータがある場合は、認証完了済みなのでログイン画面に遷移させます。データがない場合は新規登録なので、新しくFirestoreにuserデータを登録し、mypage画面に遷移させます。 最後にupdateUserメソッドを呼び出し、useState() を使ってuserの状態管理をしています。alertのところはいい感じのポップアップかトーストを実装したいところです。 ・composables/useAuth.ts [crayon-67169c8c6c5bd138210333/] updateUserメソッドを使ってuserのstateの状態を管理しています。 認証後はuserのstateにUser情報を入れ、ログアウトなどの認証情報が破棄された場合はnullを入れます。 ・composables/useUser.ts [crayon-67169c8c6c5bf253524924/] 認証状態のチェック 認証後のマイページに認証されていない場合はアクセスできないようにしたい場合、認証状態をチェックするなどの処理が必要になります。 その場合はmiddlewareで認証状態をチェックし、認証されていない場合はログインページに遷移させるなどの処理を実装します。 definePageMetaで指定してあげることで、このmiddlewareの処理が実行されます。 また、ログイン済みの場合にログインページを表示する場合は、マイページに遷移させるなどの処理も必要になるかと思います。 ・middleware/auth.global.ts [crayon-67169c8c6c5c1574153161/] 全てのルートで実行したい処理がある場合は、Nuxt3のグローバルミドルウェアを使うことで実現できます。 .globalが付いたファイルは呼び出し処理を書かずに全てのルートで実行されます。 ・middleware/auth-check.global.ts [crayon-67169c8c6c5c2312442968/]

Nuxt3 + Firebase Authenticationで認証機能を実装する