Nuxt.js + Firebase で google認証する

Nuxt.js で Firebase の google 認証を実装してみる。 面倒な認証機能がこれほど簡単に実装できるとは！

前提

• Firebase の諸々の初期設定は完了していること
  • 参考) Nuxt.js で Firebase と Cloud Firestore を使えるように初期設定を行う

ログイン処理の実装方法

ログインページ(login.vue)にgoogle認証ボタンを設置し、ログイン後にプロジェクトページ(projects.vue)へ遷移する想定

• google 認証を実装したい page で firebase を import
  • import firebase from '@/plugins/firebase'
• view にボタンなどを設置し、google認証を開始するメソッドをバインドする
  • button(@click="googleLogin") Googleでログイン
• methods: に google認証の開始メソッドを追加 (googleLogin)

googleLogin() {
  const provider = new firebase.auth.GoogleAuthProvider()
  firebase.auth().signInWithRedirect(provider)
}

• mounted: で認証情報の状態変化のハンドラを実装する

    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        // ログイン後のページに遷移する
        this.$router.push('/projects')
      } else {
        // ログイン失敗。エラー処理など(通常はあり得ない？)
      }
    })

ログイン処理後に遷移してきたページの実装方法

認証済みのユーザ情報を取得。もし取得できてなければログインページへリダイレクトする。 また、ユーザーを切り替えたい場合に備えてログアウトボタンも設置する。

• 遷移先の page で firebase を import
  • import firebase from '@/plugins/firebase'
• created: でログインユーザの情報を取得する

    const user = firebase.auth().currentUser
    if (user) {
      // ログイン済み
      this.user = user
    } else {
      // 未ログイン。ログイン画面へ遷移する
      this.$router.push('/login')
      return
    }

    // firestore のデータバインディングなど...

• view にログアウトボタンを設置
  • button(@click="logOut") ログアウト
• methods: にログアウト処理を実装する (logOut)

logOut() {
  firebase.auth().signOut()
}

user のプロパティ

user には様々なプロパティが格納されている。 主に使いそうなのは以下

• uid : ユーザ固有のID。ユーザに関連するデータとの紐づけに使える
• email : ユーザのメールアドレス。ログイン後のヘッダなどに表示するのに使える
• photoURL : アイコンのURL。ログイン後のヘッダなどに表示するのに使える

これで、googleアカウントさえあれば簡単にログインできるサービスが作れる！ 自前でパスワードなど管理しなくて済むので便利！