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

# 前置き
![Frame 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/b9b70a96-44dd-4204-1d90-dd06ba934d85.png)
メールアドレスログインと
要領は同じです！
コードもこちらに付け足します✍️
https://note.com/aliz/n/n7f4ae08ba828


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

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

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


# Step1

Googleサインインについてはこちら
[firebase Google Sign-In](https://firebase.google.com/docs/auth/web/google-signin)

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

<img width="766" alt="スクリーンショット 2020-05-18 18.34.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/084ff2d6-f411-018e-b0e7-5df74094aa54.png">

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

<img width="960" alt="スクリーンショット 2020-05-18 18.36.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/f2f65789-7b08-415a-c50b-bfedbd4a16e8.png">

**【解説/store/index.js】**
準備は整ったので
公式Contens2つめに参りましょう♪
[Handle the sign-in flow with the Firebase SDK](https://firebase.google.com/docs/auth/web/google-signin#handle_the_sign-in_flow_with_the_firebase_sdk)

**必須項目：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(火)公開予定です！
お楽しみに♪

**記事が公開したときにわかる様、
フォローをお願いします😀💕**
https://twitter.com/aLizlab