loading...
Cover image for Firebase with Nuxt ②認証編

Firebase with Nuxt ②認証編

ryunishimura profile image Ryu Nishimura ・2 min read

更新していくよ

目次

  1. Google, Twitter認証
  2. 認証状態の永続化
  3. ログアウト
  4. 名寄せ
  5. アカウントの削除

Firebase Authentication 日本語ドキュメント

前提で必要な知識

  • Vuexの基本的な使い方
  • Nuxtの基本的な知識
  • Vueの基本的な知識

1. Google, Twitter認証

  • Googleログインはデフォルトで使える。
  • Twitter Developerでアカウントの作成とAPI Keyの発行を行う。

Google はメールとソーシャルの両方の ID プロバイダとして機能します。

JavaScript で Google ログインを使用して認証する
JavaScript による Twitter を使用した認証

Twitter アプリの構成にあるアプリ設定ページで、Firebase OAuth リダイレクト URI(my-app-12345.firebaseapp.com/__/auth/handler など)を認証コールバック URL として設定します。

OAuth リダイレクト URIは分かりにくいですが、
[Authentication] セクションのTwitterプロバイダに記載されています。

Alt Text

このTwitterモーダルの下の方にあるよ

import firebase from "@/plugins/firebase"

export const state = () => ({
  user: {
    uid: "",
    email: "",
    login: false,
  },
})

export const getters = {
  user: (state) => {
    return state.user
  },
}

export const actions = {
  googleLogin({ dispatch }) {
    var provider = new firebase.auth.GoogleAuthProvider()
    firebase
      .auth()
      .signInWithPopup(provider)
      .then(() => {
        dispatch("checkLogin")
      })
      .catch((error) => {
        console.log(error)
      })
  },

  checkLogin({ commit }) {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        commit("setData", { uid: user.uid, email: user.email })
        commit("setLogin")
      }
    })
  },
}

export const mutations = {
  setData(state, payload) {
    state.user.uid = payload.uid
    state.user.email = payload.email
  },

  setLogin(state) {
    state.user.login = true
  },
}
Enter fullscreen mode Exit fullscreen mode

識別子で判断しているっぽい
メールアドレスが同じだったら、GoogleでもTwitterでも同じユーザーだと判断してる。
プロバイダは、最初にログインしたアカウントが入る。

Alt Text

2. 認証状態の永続化

Firebase でユーザーを管理する
認証状態の永続性

firebase.auth().onAuthStateChangedを使います。

この部分で実行しています。
onAuthStateChangeduserの有無を検知し、setDatasetDataでユーザー情報をセットしています。

checkLogin({ commit }) {
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      commit("setData", { uid: user.uid, email: user.email })
      commit("setLogin")
    }
  })
},
Enter fullscreen mode Exit fullscreen mode

common.jsというmixinsに書いておいて、共通化させておきました。

export default {
  computed: {
    user() {
      return this.$store.getters.user
    },
  },

  created() {
    this.$store.dispatch("checkLogin")
  },

  methods: {
    googleLogin() {
      this.$store.dispatch("googleLogin")
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

vueファイルは、このような形になりました。

import common from "@/mixins/common.js"

export default {
  mixins: [common],
}
Enter fullscreen mode Exit fullscreen mode

3. ログアウト

  • firebase.auth().signOut()を使います。
  • state.userを初期化します。
import firebase from "@/plugins/firebase"

export const actions = {
  logout({ commit }) {
    firebase.auth().signOut()
    commit("resetUser")
  },
}

export const mutations = {
  resetUser(state) {
    state.user.uid = ""
    state.user.email = ""
    state.user.login = false
  },
}
Enter fullscreen mode Exit fullscreen mode

4. 名寄せ

  • user.providerDataを使って、認証プロバイダを取得する。

JavaScript を使用してアカウントに複数の認証プロバイダをリンクする

var user = firebase.auth().currentUser
user.providerData
// => ['google.com', 'twitter.com']
Enter fullscreen mode Exit fullscreen mode
  computed: {
    isLinkGoogle() {
      return this.user.providerData.some((data) => {
        if (data.providerId === "google.com") {
          return true
        }
      })
    },

    isLinkTwitter() {
      return this.user.providerData.some((data) => {
        if (data.providerId === "twitter.com") {
          return true
        }
      })
    },
  },
Enter fullscreen mode Exit fullscreen mode

user.providerDataに紐づいている認証プロバイダが確認できるので、そのデータを使って、設定画面に連携済みかどうか判定する。

5. アカウントの削除(ユーザーの削除)

To delete a user, the user must have signed in recently.

Posted on by:

ryunishimura profile

Ryu Nishimura

@ryunishimura

Favorites❤️ JAMStack/Serverless/Nuxt.js/Contentful

Discussion

pic
Editor guide