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

前置き

今回はTwitterアカウントでログイン🐥
Twitterはユーザー数が多いので
これができたらすっごく便利です💕

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

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

Step1: Twitter Developerアカウント作成の申請

Googleログインとは違い
外部のアカウントでログインします。
Twitter Developerを使用します🌟

まずはfirebaseのGuidesを見てみましょう👀
Before you begin
4. Register your app
API keyなどが必要ですね💡

Twitter Developer でアカウント作成

Twitter Developer へ飛びましょう！🐥
ここでアプリを作成し、
API keyを入手します！

Twitterアカウントでログインし、
メニュー右上のAppsをクリック
Create an appをクリック
申請の仕方などはここが参考になります

申請文を英語で書く

ここで皆さんビックリすることでしょう😲
申請理由を英語200文字以上で
書かねばなりません！笑
ログインです、ログイン！笑
とにかくログイン機能の実装したい！
ってことを伝えましょう🌟
Google翻訳を使いました📚

例文)
I want to implement login with a Twitter account on my website. I have already implemented login with a google account. All I have to do now is Twitter and facebook! It is very convenient to be able to log in with an already created account.

グーグルアカウントの
ログインは実装しちゃってて
あとはこのTwitterとFacebookアカウントでの
ログインをしたいんです！
って内容です。
これで無事承認されました🤗

Step2: アプリを作成する

申請が通るとメールが届きます💌
メール内のbutton押すと
アカウントが作成されます🌟

次は実際にアプリを作成していきましょう！

1. Headerにあるアカウント名から > Apps を押す

2. Create an app を押す

3. 必須項目の入力し、createを押す

App name：アプリの名前
Application description：
アプリの説明(英語10〜200文字)
Website URL：
アプリを使用するウェブサイトのURL
Tell us how this app will be used：
アプリの使用方法
アプリの説明とほぼ同じでOK
(英語100文字〜)
Callback URLs
こちらは必須ではないですが
後ほど入力します！

これでアプリの完成です🤗

Step3: firebaseと連携

アプリが完成したので
API keyなどの確認をしていきましょう！

1. アプリのDetailsをクリック

2. Keys and tokensタブをクリック

API key, API secret key が見れます👀
これをfirebaseにコピペしましょう！

3. firebaseにコピペ

プロジェクトサイドメニューAuthentication
> Sign-in method > Twitter
> App ID とApp secretをペースト
ここでコールバックURLをコピーしましょう！

4. コールバックURLを貼り付け

Twitter DevelopersアプリのDetailsで
App detailsタブのEditをクリック
Step2で一旦空欄にしていた
Callback URLsにペーストしましょう🌟

これで設定は完了です🤗

Step4: コードを追加

Handle the sign-in flow with the Firebase SDK

解説

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

actions loginTwitterを作成
ログインできたら
ログイン状態をtrueにしたいので
それを行うcheckLoginをdispatchで呼ぶ
不要な物を削除
コメント
セミコロン(;)
var token
var user
state, checkLoginのemail
→メールアドレスログイン時に
　ユーザーのemailを取得し、
　表示させるために記載していたもの
　SNSアカウントを使用するため不要

コード

) file

import firebase from '~/plugins/firebase'

export const state = () => ({
 user: {
  uid: '',
  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)
      })
 },
 loginTwitter ({ dispatch }) {
  var provider = new firebase.auth.TwitterAuthProvider()
  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 })
      commit('switchLogin')
    }
  })
 },
}

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

import firebase from '~/plugins/firebase'

export const state = () => ({

user: {

uid: '',

})

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)

})

loginTwitter ({ dispatch }) {

var provider = new firebase.auth.TwitterAuthProvider()

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

commit('switchLogin')

}

})

}

export const mutations = {

getData (state, payload) {

state.user.uid = payload.uid

switchLogin (state) {

state.user.login = true

}

) 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="loginTwitter"
     >
       twiiterでログイン
     </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})
   },
   loginTwitter () {
     this.$store.dispatch('loginTwitter')
   },
 }
}
</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="loginTwitter"

twiiterでログイン

</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})

loginTwitter () {

this.$store.dispatch('loginTwitter')

}

</script>