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

# 前置き
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/12cc28b3-d939-10e5-03ac-bcc59c7181ac.png)
既に作成されたSNSアカウントで
ログインできるって便利ですよね✨🚲
今回はFacebookでログインしてみましょう🙋‍♀️

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

ということで
firebaseAuthを使います💡
# Step1: FBアプリの作成

外部のアカウントでログインするため
もろもろ必要になります🌟


Facebookサインインについてはこちら👀
Before you begin
1は済んでいるので2から始めましょう！
https://firebase.google.com/docs/auth/web/facebook-login

Facebook for Developers 
ここでアプリを作成し
App IDとApp secretを確認していきます💡
https://developers.facebook.com/apps

1. まずはFBアカウントでログインします。
2. ![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/b0b92acf-7a28-15f5-b010-eaf59e7d7dad.png)
2. マイアプリをクリック！
　(ログインの文字がマイアプリに変わってます)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/27236aa5-29a3-0241-1aa2-b5a4a391304b.png)
3. 新しいアプリを作成
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/bea41429-539a-8bae-2cb0-b033bb12a3ed.png)
4. アプリ名を入力
「アプリIDを作成してください」をクリック
　セキュリティチェックが通ればアプリが作成されます🌟
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/24eb5836-4efb-9e4a-7153-f3cb3f0b77e3.png)
# Step2: FBアプリの連携

1.App IDとApp secretを確認
　アプリが作成されると
　そのままアプリのダッシュボードへ行きます。
　サイドメニュー 設定 > ベーシック
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/2279c67e-401c-cda5-eb5a-d5899f64b008.png)
2. firebaseに貼り付ける
　firebaseのプロジェクトサイドメニューAuthentication
　> Sign-in method > Facebook
　> App ID とApp secretをペースト
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/0e984f85-cc56-a84b-cf37-260e47760f86.png)
3. OAuth リダイレクト URIをコピー
　App ID と App secretの下にあるこれです🌟
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/4991443b-4581-b4d9-f8aa-b56bded13d41.png)
# Step3: OAuthリダイレクトURIの設定　

1. Facebookログインの設定
　ここから設定をしていきます。
　製品を追加 > Facebookログイン > 設定
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/cd010677-e71a-00f1-0dff-2eb947e4144b.png)
2. 設定に移る
　クイックスタートの画面に飛びますが
　サイドメニューの設定をクリックします！
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/3b20aa2c-691c-9934-e4e9-778145169b05.png)
3. 有効なOAuthリダイレクトURIを入力
　ここにfirebaseでコピーしたURIを貼り付けます！
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/c5452477-fbad-acc5-f6d2-84a7d15e81c3.png)
これで設定は完了です🤗✨

# Step4: コードを追加

firebase Guides
[Handle the sign-in flow with the Firebase SDK](https://firebase.google.com/docs/auth/web/facebook-login#handle_the_sign-in_flow_with_the_firebase_sdk)

**【解説/store/index.js】**
**必須項目：1, 5
Optional：2, 3, 4**
ということで必須項目だけ
Vuexにコピペしていきます。

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

```store/index.js

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)
      })
},
 loginFacebook ({ dispatch }) {
  var provider = new firebase.auth.FacebookAuthProvider()
  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="loginFacebook"
   >
      facebookでログイン
   </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})
  },
  loginFacebook () {
   this.$store.dispatch('loginFacebook')
  },
 }
}
</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>
```

ログインはこれだけです🌟
意外とシンプルですよね！
アカウント作成や、
ログアウトの仕方はまた別記事にて♪


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