概要

Vue.jsのアプリにFirebaseでログイン機能を追加し、ユーザーのデータをCloud Firestoreに格納するサンプルを作りました。

setup

import firebase from 'firebase/app'
import 'firebase/auth'
 
Vue.use(Ionic)
Vue.config.productionTip = false

const firebaseConfig = {
  apiKey: "XXXX",
  authDomain: "XXXX",
  databaseURL: "XXXX",
  projectId: "XXXXX",
  storageBucket: "",
  messagingSenderId: "XXXX",
  appId: "XXXXX"
}
firebase.initializeApp(firebaseConfig)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

ログインしfirestoreに格納

firebaseであらかじめgoogleログインを有効にしておく。
実装の流れは以下。
signInWithPopup()でgoogleログインのポップアップが開き、ログインしたユーザーデータが返ってくる。
ユーザーデータを適当なオブジェクトに格納し、そのままfirestoreのUsersコレクションの中に突っ込んでいる。
ログインが成功すればVue rooterで次の画面に進む。

import firebase from 'firebase/app'
import db from 'firebase'
export default {
  name: 'login',
  data() {
    return {
      errorMessage: '',
    }
  },
  methods: {
    googleLogin() {
      const provider = new firebase.auth.GoogleAuthProvider()
      firebase.auth().signInWithPopup(provider)
      .then((result) => {
        const userData = {
          id: result.user.uid,
          name: result.additionalUserInfo.profile.given_name,
          email: result.additionalUserInfo.profile.email,
          sex: ''
        }
        console.log(userData)
        db.firestore().collection('users').doc(result.user.uid).set(userData)
        this.$router.push('/')
      }).catch(error => {
        this.errorMessage = error.message
      })
    }
  }
}

一方でrouter.jsには、ログインしていなければlogin画面に飛ばす処理を書いておくといい。

router.beforeResolve((to, from, next) => {
  if (to.path == '/login') {
    next()
  } else {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        next()
      } else {
        next({path: '/login'})
      }
    })
  }
})

格納したデータを取ってくる

ユーザ情報を表示するページなど。createdでfirebaseからユーザ情報を取得し、データに格納している。

import firebase from 'firebase/app'
import db from 'firebase'
export default {
  name: "mypage",
  components: {
    BackToolbar
  },
  data() {
    return {
      user: {
        id: "",
        email: "",
        name: "",
        sex: ""
      }
    }
  },
  methods: {
    toHome () {
      this.$router.push('/')
    },
    logout () {
      firebase.auth().signOut().then(function() {
        this.$router.push('/login')
      }).catch(() => {
        this.$router.push('/login')
      })
    }
  },
  created() {
    const uid = firebase.auth().currentUser.uid
    db.firestore().collection('users').doc(uid).get().then( doc => {
      console.log(doc.data())
      this.user.id = doc.data().id
      this.user.email = doc.data().email
      this.user.name = doc.data().name
      this.user.sex = doc.data().sex
    })
  }
}