Nuxt.jsでFirebase Authを使ってみる

コード Vue.js/Nuxt.js

個人プロジェクトでNuxt.jsでFirebase Authを使うことになったので備忘録として書きます。

初期設定

ライブラリのインストール

npm install --save firebase

Firebaseの初期化
plugins/firebase.js

import firebase from "firebase";
if (firebase.apps.length === 0) {
firebase.initializeApp({
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
});
}
export default firebase;

*「Firebaseのコンソール」→「プロジェクトを設定」→「マイアプリ」から取得できるキーなどに書き換えてください。

ログインページの作成

今回はGoogleログインで実装します。
Authenticationの設定からGoogleを有効化します。
pages/login.vue

<template>
  <div class="top">
      <h1>ログイン</h1>
      <button @click="google">Googleアカウントでログイン</button>
  </div>
</template>

<style scoped>
</style>

<script>
import firebase from "~/plugins/firebase.js";

export default {
  methods: {
    google: function() {
      var provider = new firebase.auth.GoogleAuthProvider();
      provider.addScope("https://www.googleapis.com/auth/contacts.readonly");
      firebase.auth().languageCode = "ja";
      firebase
        .auth()
        .signInWithPopup(provider)
        .then(result => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;

          var token = credential.accessToken;
          var user = result.user;
         this.$router.push("/userpage");         
        })
        .catch(error => {
          var errorCode = error.code;
          var errorMessage = error.message;
          var email = error.email;
          var credential = error.credential;
          alert("認証に失敗しました")
          // ...
        });
    },
  }
};
</script>

ログイン状態を確認する

import firebase from "@/plugins/firebase.js";
export default {
  mounted: function() {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        console.log(user)
      } else {
        fire_this.$router.push("/login");
      }
    });
  }
};

ログインした状態でページを表示するとコンソールにユーザー情報が出力されます。

参考ページ

Firebase Authentication

コメント

タイトルとURLをコピーしました