見出し画像

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

aLiz

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

# 前置き

スクリーンショット 2020-06-04 23.46.00

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

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

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

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

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

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

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

Twitterアカウントでログインし、
メニュー右上のAppsをクリック
Create an appをクリック
申請の仕方などはここが参考になります
https://www.itti.jp/web-direction/how-to-apply-for-twitter-api/
https://digitalnavi.net/internet/3072/

画像1

ここで皆さんビックリすることでしょう😲
申請理由を英語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

2. Create an app

画像3

3. 必須項目の入力し、createを押す
　・App name：アプリの名前
　・Application description：
　　アプリの説明(英語10〜200文字)
　・Website URL：
　　アプリを使用するウェブサイトのURL
　・Tell us how this app will be used：
　　アプリの使用方法
　　アプリの説明とほぼ同じでOK
　　(英語100文字〜)

　こちらは必須ではないですが
　後ほど入力します！
　・Callback URLs

スクリーンショット 2020-06-04 23.11.59

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

# Step3: firebaseと連携

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

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

画像5

2. Keys and tokensタブをクリック
　API key, API secret key が見れます👀
　これをfirebaseにコピペしましょう！

画像6

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

画像7

4. コールバックURLを貼り付け
　Twitter DevelopersアプリのDetailsで
　App detailsタブのEditをクリック
　Step2で一旦空欄にしていた
　Callback URLsにペーストしましょう🌟

画像8

これで設定は完了です🤗

# Step4: コードを追加

firebase Guides
Handle the sign-in flow with the Firebase SDK

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

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

【store/index.js】

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

【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="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>

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

ログインはこれだけです🌟
Twitter Developerの申請さえ通れば簡単ですね♪

また別記事でこちらも公開していきます！
・アカウント作成の方法
・ログアウトの仕方

# 次回予告

【Nuxt.js】Nuxt文法編：v-show
6/9(火)公開です！

【Nuxt.js】アプリ開発実践編：Nuxt + Vuex + firebaseでログイン付きToDoリスト②
こちらの記事は内容を整理中です🙇‍♀️
きちんとした内容にします💪

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

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

この記事が気に入ったらサポートをしてみませんか？