【Nuxt.js】firebase基礎編(Auth版)：Googleログインをできるようにしよう

前置き

メールアドレスログインと
要領は同じです！
コードもこちらに付け足します✍️

【Nuxt.js】firebase基礎編(Auth版)：メールアドレスログインをできるようにしよう

ということで
firebaseAuthを使います💡

使わなくてもできますが
その場合はやることが
3倍には増えます…笑
Google Cloud Platformから
OAuthクラウドIDを発行したり
tokenの照会をするコードを書いたり😦💦

firebaseAuthを使うと
すっっごく！！！
簡単に！！！
実装できます🌟

コードを追加

Googleサインインについてはこちら

まずはAuthentication > Sign-in method
Googleを選択

メールアドレスを選択し保存するだけ！

準備は整ったので
公式Contens2つめに参りましょう♪
Handle the sign-in flow with the Firebase SDK

必須項目：1, 5
Optional：2, 3, 4
ということで必須項目だけ
Vuexにコピペしていきます。

コード

) file

import firebase from '~/plugins/firebase'

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

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

export const actions = {
 login({ dispatch }, payload) {
   firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
     .then(user => {
         console.log('成功！')
         dispatch('checkLogin')
         $router.push('/')
       }).catch((error) => {
         alert(error)
       })
 },
 loginGoogle ({ dispatch }) {
   var provider = new firebase.auth.GoogleAuthProvider()
   firebase.auth().signInWithPopup(provider).then(function (result) {
     dispatch('checkLogin')
   }).catch(function (error) {
     console.log(error)
   })
 },
 checkLogin ({ commit }) {
   firebase.auth().onAuthStateChanged(function (user) {
     if (user) {
       commit('getData', { uid: user.uid, email: user.email })
       commit('switchLogin')
     }
   })
 },
}

export const mutations = {
 getData (state, payload) {
   state.user.uid = payload.uid
   state.user.email = payload.email
 },
 switchLogin (state) {
   state.user.login = true
 },
}

import firebase from '~/plugins/firebase'

export const state = () => ({

user: {

uid: '',

email: '',

})

export const getters = {

user: state => {

return state.user

}

export const actions = {

firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)

.then(user => {

console.log('成功！')

dispatch('checkLogin')

$router.push('/')

}).catch((error) => {

alert(error)

})

loginGoogle ({ dispatch }) {

var provider = new firebase.auth.GoogleAuthProvider()

firebase.auth().signInWithPopup(provider).then(function (result) {

dispatch('checkLogin')

}).catch(function (error) {

console.log(error)

})

checkLogin ({ commit }) {

firebase.auth().onAuthStateChanged(function (user) {

if (user) {

commit('getData', { uid: user.uid, email: user.email })

commit('switchLogin')

}

})

}

export const mutations = {

getData (state, payload) {

state.user.uid = payload.uid

state.user.email = payload.email

switchLogin (state) {

state.user.login = true

}

解説

actions loginGoogleを作成
ログインできたら
ログイン状態をtrueにしたいので
それを行うcheckLoginをdispatchで呼ぶ
不要な物を削除
コメント
セミコロン(;)
var token
var user

) pages

<template>
 <div class="login">
   <p
     v-if="user.login"
     class="text"
   >
     {{ user }}
   </p>
   <form
     v-else
     class="form"
     @submit.prevent
   >
     <label class="label">
       <span class="label">
         email
       </span>
       <input
         class="input"
         type="text"
         v-model="email"
       >
     </label>
     <label class="label">
       <span class="label">
         password
       </span>
       <input
         class="input"
         type="password"
         v-model="password"
       >
     </label>
     <button
       class="button"
       type="submit"
       @click="login"
     >
       Login
     </button>
　　　　　<button
       class="button"
       type="submit"
       @click="loginGoogle"
    　　>
       googleでログイン
    　　</button>
   </form>
 </div>
</template>

<script>
export default {
 computed: {
   user () {
     return this.$store.getters['user']
   },
 },
 data () {
   return {
     email: '',
     password: '',
   }
 },
 methods : {
   login (email, password) {
     this.$store.dispatch('login', {email: this.email, password: this.password})
   },
  　loginGoogle () {
    　this.$store.dispatch('loginGoogle')
  　},
 }
}
</script>

v-if="user.login"

class="text"

</p>

<form

v-else

class="form"

@submit.prevent

</span>

<input

class="input"

type="text"

v-model="email"

</label>

password

</span>

<input

class="input"

type="password"

v-model="password"

</label>

<button

class="button"

type="submit"

@click="login"

</button>

　　　　　<button

class="button"

type="submit"

@click="loginGoogle"

googleでログイン

　　</button>

</form>

</div>

</template>

export default {

computed: {

user () {

return this.$store.getters['user']

data () {

return {

email: '',

password: '',

}

methods : {

this.$store.dispatch('login', {email: this.email, password: this.password})

　loginGoogle () {

　this.$store.dispatch('loginGoogle')

}

</script>