Vue.jsとFirebaseでユーザ認証を実装する方法

VueプロジェクトとFirebaseのAuthenticationでユーザ認証を実装する方法をメモしておきます。

Vue.jsやFirebaseに必要なコマンドがインストールされていること、Firebaseにプロジェクトが作成された前提で紹介していきます。

Firebase Authenticationとは

Firebase Authenticationは、Webやネイティブアプリアプリにおいてユーザー認証に関する機能を提供するサービスです。

Firebase Authenticationを使用することで、ユーザーがアプリにログインする際に、メールアドレスとパスワードのログイン、Google ログインや Facebook ログインなど複数のログイン方法を使用できるようになります。

ここでは、ユーザ登録からログイン・ログアウトまでの認証・実装をまとめています。

 

Vueプロジェクト作成

vue-cliというVue.jsを開発するための準備をしてくれる便利ツールでVueプロジェクト(プロジェクト名は任意)を新規作成します。

作成したプロジェクトに移動して、yarn devでサーバを起動します。

 

FirebaseにWebアプリのプロジェクトを作成

Firebaseで作成したプロジェクトにアプリを追加します。今回はVue.jsで実装するため、Webアプリを選択します。

Webアプリの設定を行っていきます。

入力が完了し、アプリを登録したら完了です。

 

Firebaseの設定をVue.jsに追加

次にアプリが作成されたら「Firebase SDK snippet」の構成を選択し、表示されたスクリプトをコピーします。


コピーしたスクリプトを下記ファイルのAPI情報に貼り付けます。

firebase.initializeAppでFirebaeseでFirebaseを初期化し、Firestoreを使用できるようにしています。

・src/plugins/firebase.js

 

main.jsに設定したファイルをインポートできるよう下記を追記します。

・src/main.js

 

認証方法の設定

次に認証方法を設定します。今回はメールアドレスで認証できるように設定しました。

Firebaseの「Authentication」から「ログイン方法」タブを押し、「メール / パスワード」を選択します。

有効にするにしたら保存を押下し、完了です。

 

認証周りのルーティング

認証周りのルーティングを設定しておきます。Signup、Signin、HomeのViewを作っておき、それぞれのルーティングを書いていきます。

・src/router.js

 

ユーザ登録画面の実装

ユーザ登録画面を実装します。最低限のHTMLなためデザインは各自で当ててください。

まず、ユーザ登録に必要なメールアドレスとパスワードを設置します。今回はニックネームも必要なため追加しています。

登録ボタンがクリックされると、createUserWithEmailAndPasswordメソッドで入力したメールアドレスとパスワードでアカウントが作成されます。メールアドレスの重複や入力不備の場合はアラートでエラーメッセージが表示されます。

アカウント作成後にニックネームがプロフィールに更新されるようになっています。その後、ログインページに遷移します。

・src/components/Signup.vue

 

ユーザログイン画面の実装

ユーザログイン画面を実装します。ユーザ登録したメールアドレスとパスワードを入力するフォームを作成します。

サインインボタンをクリックすると、signInWithEmailAndPasswordメソッドで入力したメールアドレスとパスワードでユーザ認証を行います。

ユーザ認証が完了したらホーム画面に遷移するようになっています。ユーザ認証に失敗した場合は、エラーモーダルが表示されるようになっています。

・src/components/Signin.vue

 

ユーザホーム・ログアウト画面の実装

ユーザホーム・ログアウト画面を実装します。

サインアウトボタンをクリックすると、signOutメソッドでユーザのログイン状態が解除され、ログイン画面に遷移されます。

・src/components/Home.vue

 

サインアウトモーダル

ユーザがサインアウトする前にVuetifyを使って確認モーダルを表示したい場合の例を載せておきます。

サインアウトボタンをクリックすると確認モーダルが表示され仕様です。

・src/components/Home.vue

 

ログインされていない場合のリダイレクト処理

最後にユーザがログインしていない場合のリダイレクト処理を実装します。

先ほど作成したrouter.jsにrouter.beforeEachでルーティング前の処理を書いていきます。ユーザがログインしていない場合は、ログインページにリダイレクトしています。

・src/router.js

以上、Vue.js + Firebaseによる認証の実装方法でした。