Firebase

VueプロジェクトとFirebaseのAuthenticationでユーザ認証を実装する方法をメモしておきます。 Vue.jsやFirebaseに必要なコマンドがインストールされていること、Firebaseにプロジェクトが作成された前提で紹介していきます。 Firebase Authenticationとは Firebase Authenticationは、Webやネイティブアプリアプリにおいてユーザー認証に関する機能を提供するサービスです。 Firebase Authenticationを使用することで、ユーザーがアプリにログインする際に、メールアドレスとパスワードのログイン、Google ログインや Facebook ログインなど複数のログイン方法を使用できるようになります。 ここでは、ユーザ登録からログイン・ログアウトまでの認証・実装をまとめています。 Vueプロジェクト作成 vue-cliというVue.jsを開発するための準備をしてくれる便利ツールでVueプロジェクト(プロジェクト名は任意)を新規作成します。 [crayon-688571662c1ba565679843/] 作成したプロジェクトに移動して、yarn devでサーバを起動します。 [crayon-688571662c1bc933184298/] FirebaseにWebアプリのプロジェクトを作成 Firebaseで作成したプロジェクトにアプリを追加します。今回はVue.jsで実装するため、Webアプリを選択します。 Webアプリの設定を行っていきます。 入力が完了し、アプリを登録したら完了です。 Firebaseの設定をVue.jsに追加 次にアプリが作成されたら「Firebase SDK snippet」の構成を選択し、表示されたスクリプトをコピーします。 コピーしたスクリプトを下記ファイルのAPI情報に貼り付けます。 firebase.initializeAppでFirebaeseでFirebaseを初期化し、Firestoreを使用できるようにしています。 ・src/plugins/firebase.js [crayon-688571662c1bd090811565/] main.jsに設定したファイルをインポートできるよう下記を追記します。 ・src/main.js [crayon-688571662c1be292423373/] 認証方法の設定 次に認証方法を設定します。今回はメールアドレスで認証できるように設定しました。 Firebaseの「Authentication」から「ログイン方法」タブを押し、「メール / パスワード」を選択します。 有効にするにしたら保存を押下し、完了です。 認証周りのルーティング 認証周りのルーティングを設定しておきます。Signup、Signin、HomeのViewを作っておき、それぞれのルーティングを書いていきます。 ・src/router.js [crayon-688571662c1bf267937139/] ユーザ登録画面の実装 ユーザ登録画面を実装します。最低限のHTMLなためデザインは各自で当ててください。 まず、ユーザ登録に必要なメールアドレスとパスワードを設置します。今回はニックネームも必要なため追加しています。 登録ボタンがクリックされると、createUserWithEmailAndPasswordメソッドで入力したメールアドレスとパスワードでアカウントが作成されます。メールアドレスの重複や入力不備の場合はアラートでエラーメッセージが表示されます。 アカウント作成後にニックネームがプロフィールに更新されるようになっています。その後、ログインページに遷移します。 ・src/components/Signup.vue [crayon-688571662c1c0617614180/] ユーザログイン画面の実装 ユーザログイン画面を実装します。ユーザ登録したメールアドレスとパスワードを入力するフォームを作成します。 サインインボタンをクリックすると、signInWithEmailAndPasswordメソッドで入力したメールアドレスとパスワードでユーザ認証を行います。 ユーザ認証が完了したらホーム画面に遷移するようになっています。ユーザ認証に失敗した場合は、エラーモーダルが表示されるようになっています。 ・src/components/Signin.vue [crayon-688571662c1c3777960241/] ユーザホーム・ログアウト画面の実装 ユーザホーム・ログアウト画面を実装します。 サインアウトボタンをクリックすると、signOutメソッドでユーザのログイン状態が解除され、ログイン画面に遷移されます。 ・src/components/Home.vue [crayon-688571662c1c7996273084/] サインアウトモーダル ユーザがサインアウトする前にVuetifyを使って確認モーダルを表示したい場合の例を載せておきます。 サインアウトボタンをクリックすると確認モーダルが表示され仕様です。 ・src/components/Home.vue [crayon-688571662c1c8724808644/] ログインされていない場合のリダイレクト処理 最後にユーザがログインしていない場合のリダイレクト処理を実装します。 先ほど作成したrouter.jsにrouter.beforeEachでルーティング前の処理を書いていきます。ユーザがログインしていない場合は、ログインページにリダイレクトしています。 ・src/router.js [crayon-688571662c1c9339826923/] 以上、Vue.js + Firebaseによる認証の実装方法でした。