contentみんたくみんたくの技術ブログHome開発技術Vue.jsVue.jsとFirebaseでユーザ認証を実装する方法2020年1月15日TwitterFacebookはてブPocketLINEFeedlyフィードVueプロジェクトとFirebaseのAuthenticationでユーザ認証を実装する方法をメモしておきます。Vue.jsやFirebaseに必要なコマンドがインストールされていること、Firebaseにプロジェクトが作成された前提で紹介していきます。Authenticationは、Webやネイティブアプリアプリにおいてユーザー認証に関する機能を提供するサービスです。ログインなど複数のログイン方法を使用できるようになります。ここでは、ユーザ登録からログイン・ログアウトまでの認証・実装をまとめています。Vueプロジェクト作成vue-cliというVue.jsを開発するための準備をしてくれる便利ツールでVueプロジェクト(プロジェクト名は任意)を新規作成します。devでサーバを起動します。devFirebaseにWebアプリのプロジェクトを作成Firebaseで作成したプロジェクトにアプリを追加します。今回はVue.jsで実装するため、Webアプリを選択します。Webアプリの設定を行っていきます。入力が完了し、アプリを登録したら完了です。snippet」の構成を選択し、表示されたスクリプトをコピーします。コピーしたスクリプトを下記ファイルのAPI情報に貼り付けます。firebase.initializeAppでFirebaeseでFirebaseを初期化し、Firestoreを使用できるようにしています。firebaseApp.firestore();main.jsに設定したファイルをインポートできるよう下記を追記します。次に認証方法を設定します。今回はメールアドレスで認証できるように設定しました。パスワード」を選択します。有効にするにしたら保存を押下し、完了です。認証周りのルーティング認証周りのルーティングを設定しておきます。Signup、Signin、HomeのViewを作っておき、それぞれのルーティングを書いていきます。routerユーザ登録画面の実装ユーザ登録画面を実装します。最低限のHTMLなためデザインは各自で当ててください。ユーザ登録に必要なメールアドレスとパスワードを設置します。今回はニックネームも必要なため追加しています。登録ボタンがクリックされると、createUserWithEmailAndPasswordメソッドで入力したメールアドレスとパスワードでアカウントが作成されます。メールアドレスの重複や入力不備の場合はアラートでエラーメッセージが表示されます。アカウント作成後にニックネームがプロフィールに更新されるようになっています。その後、ログインページに遷移します。{alert(error.message)})}}}</script>ユーザログイン画面の実装ユーザログイン画面を実装します。ユーザ登録したメールアドレスとパスワードを入力するフォームを作成します。サインインボタンをクリックすると、signInWithEmailAndPasswordメソッドで入力したメールアドレスとパスワードでユーザ認証を行います。ユーザ認証が完了したらホーム画面に遷移するようになっています。ユーザ認証に失敗した場合は、エラーモーダルが表示されるようになっています。{alert(error.message)})}}}</script>ユーザホーム・ログアウト画面の実装ユーザホーム・ログアウト画面を実装します。サインアウトボタンをクリックすると、signOutメソッドでユーザのログイン状態が解除され、ログイン画面に遷移されます。{this.$router.push('/signin')})}}}</script>サインアウトモーダルユーザがサインアウトする前にVuetifyを使って確認モーダルを表示したい場合の例を載せておきます。サインアウトボタンをクリックすると確認モーダルが表示され仕様です。class="headline">サインアウト確認モーダル</v-card-title><v-card-text>サインアウトします。最後にユーザがログインしていない場合のリダイレクト処理を実装します。先ほど作成したrouter.jsにrouter.beforeEachでルーティング前の処理を書いていきます。ユーザがログインしていない場合は、ログインページにリダイレクトしています。Firebaseによる認証の実装方法でした。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。