Nuxt.jsプロジェクトの作成
Firebaseプロジェクトの作成
https://console.firebase.google.comでFirebaseプロジェクトを作成することができます。
また、Authenticationの「ログイン方法」タブでメール/パスワードによる認証とGoogleログインを有効にしておきます。
Firebase SDKの準備
プロジェクトにfirebaseパッケージを追加します。
$ yarn add firebase
次に、先程作成したプロジェクトページから接続情報を取得します。 プロジェクトページ上段の画像のボタンをクリックすると認証情報が表示できます。
これを使用して初期化処理を書きます。
// ~/plugins/firebase.ts import firebase from "firebase" const config = { apiKey: "xxxx", authDomain: "xxxx", databaseURL: "xxxx", projectId: "xxxx", storageBucket: "xxxx", messagingSenderId: "xxxx" } const googleProvider = new firebase.auth.GoogleAuthProvider() export default !firebase.apps.length ? firebase.initializeApp(config) : firebase.app() export { googleProvider }
他のファイルでfirebaseを使用したいときは、このファイルをimportするようにします。
import firebase from "~/plugins/firebase"
なお、googleProvider
は、Firebase AuthenticationでGoogleログインを実装するための前準備です。
詳細はhttps://firebase.google.com/docs/auth/web/google-signin?hl=jaを参照のこと。
サインアップ/サインイン用のページ作成
このページは以下のコンポーネントを含んでいます。
コンポーネント | 機能 |
---|---|
EmailSignup | メールアドレスとパスワードによるサインアップ |
EmailSignin | メールアドレスとパスワードによるサインイン |
GoogleSignin | Googleログイン |
次の章からは、これらのコンポーネントを実装していきます。
なお、今回はCSSフレームワークとしてMaterializeを使用しています。
コンポーネントの実装
EmailとPasswordによるサインアップ
参考: https://firebase.google.com/docs/auth/web/password-auth?hl=ja
firebase.auth().createUserWithEmailAndPassword
にemailとpasswordを渡すだけでサインアップ処理が完了します。
メールアドレスやパスワードが不正の場合など、何かエラーが出た場合はcatch
で捕捉できます。
EmailとPasswordによるサインイン
サインアップの時の似ていますが、clickした時の関数がサインイン用のものになっています。
Googleログイン
参考: https://firebase.google.com/docs/auth/web/google-signin?hl=ja
Googleログイン用のボタンはhttps://developers.google.com/identity/branding-guidelinesから拾ってこれます。
ログイン中のユーザー情報の保持
サインアップ/サインイン機能に関してはここまでの内容で完了ですが、実際にユーザー情報を使用するためには、ユーザー情報をどこかに保持しておかなければなりません。
今回はVuexストアを使って、ページ遷移のたびにユーザー情報を取得することにしました。
Vuexストアの準備
ユーザーを保持するためのVuexストアを作成します。 モジュールモードで定義しています。
Do not mutate vuex store state outside mutation handlers
エラーを無効にするため、strictモードはオフにします。
ページ遷移時にユーザー情報をセット
plugins/auth.ts
を作成し、ページ遷移の際に、ユーザー情報をストアに設定するようにします。
https://firebase.google.com/docs/auth/web/manage-users?hl=ja#get_the_currently_signed_in_userの通り、onAuthStateChanged
を使用してログイン中のユーザー情報を取得します。
上記の処理がロード時に読み込まれるように、nuxt.config.js
に以下の設定を追加します。
このとき、クライアント側でのみ処理を行いたいため、ssr: false
を指定します。
plugins: [ { src: "~/plugins/auth.ts", ssr: false } ]
また、以下の部分はサインインが完了しているのにサインインページにアクセスしようとした際に、トップページにリダイレクトする処理となっています。
if (user) { if (to.name === "signin") { redirect("/") } }
まとめ
今回はNuxt.jsとFirebase Authenticationで遊んでみました。
とても簡単に認証機能が実装できるFirebase Authenticationですが、実際のサービスを作るためにはFirestoreを使用してユーザーとデータを紐付ける必要があります。
今回でFirebase Authenticationは全貌は掴めたので、次回はFirestoreも触れたら良いなと思います。