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

🎈 この記事はWPへ移行しました
【Nuxt.js】firebase基礎編(Auth版)：Googleログインをできるようにしよう

# 前置き

メールアドレスログインと
要領は同じです！
コードもこちらに付け足します✍️
https://note.com/aliz/n/n7f4ae08ba828

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

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

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

# コードを追加

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

Authenticate Using Google Sign-In with JavaScript  |  Firebase

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

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

【解説/store/index.js】
準備は整ったので
公式Contens2つめに参りましょう♪
Handle the sign-in flow with the Firebase SDK

Authenticate Using Google Sign-In with JavaScript  |  Firebase

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

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

【store/index.js】

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')
       }).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
 },
}

【Login.vue】

<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>

【index.vue】

<template>
<div class="page">
  <Login />
  <p
    v-if="user.login"
    class="text"
  >
    ログインに成功！
  </p>
</div>
</template>

<script>
import Login from '~/components/Login.vue'

export default {
components: {
  Login: Login,
},
computed: {
  user () {
    return this.$store.getters['user']
  },
},
}
</script>

ログインはこれだけです🌟
アカウント作成や、
ログアウトの仕方はまた別記事にて♪

# 次回予告

【Nuxt.js】Nuxt文法編：v-for
6/2(火)公開予定です！
お楽しみに♪

記事が公開したときにわかる様、
フォローをお願いします😀💕

タイトル未設定

🎈 この記事はWPへ移行しました
【Nuxt.js】firebase基礎編(Auth版)：Googleログインをできるようにしよう