[Nuxt]Firebase Authenticationを使ってTwitterログインを実装!

前回のHostingに続いて今回はAuthenticationです。利用頻度の多そうなTwitter認証をNuxt.jsで実装していきたいと思います。

参考: [https://qiita.com/yusuke-asaoka/items/54dd6c933bb07787cbd1#%E8%AA%8D%E8%A8%BC%E3%81%AE%E6%BA%96%E5%82%99:title] [https://firebase.google.com/docs/auth/web/manage-users:title] [https://firebase.google.com/docs/auth/web/twitter-login:title]

準備

Twitter Developerに行ってTwitter APIを取得します。

そして、Firebaseの管理画面でAuthentication > ログイン方法 > Twitterを選択して有効にします。書かれてあるコールバックURLをTwitter Appのコールバックの所に書いて、API KeyとSecretKeyをFirebaseのログイン方法であるTwitterの設定に反映させればおっけーかな。

次にNuxt.jsのplugins/firebase.jsに記述しましょう。

まずはパッケージをダウンロード!

$ npm install --save firebase

そして、FirebaseのConsoleからconfigをコピーして記述。

import firebase from 'firebase'

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: "<api_key>",
    authDomain: "<your app>.firebaseapp.com",
    databaseURL: "https://<your-app>.firebaseio.com",
    projectId: "<your app>",
    storageBucket: "<your-app>.appspot.com",
    messagingSenderId: "<your id>"
  })
}

export default firebase

FirebaseのAPIKeyは直接記述しても問題はないようです。。

準備はこれで完了ですね!

実装

それでは認証を作っていきましょう。

pages/index.vueにこんな感じで!

<template>
  <section class="section">
    <div v-if="!isLogin">
      <button @click="twitterLogin">Twitterでログインする</button>
    </div>
    <div v-else>
      <p>Welcome, {{ user.displayName }}!</p>
      <button @click="logout">ログアウト</button>
    </div>
  </section>
</template>

<script>
import firebase from '@/plugins/firebase'

export default {
  asyncData () {
    return {
      isLogin: false,
      user: []
    }
  },
  mounted: function () {
    firebase.auth().onAuthStateChanged(user =>{
      if (user) {
        this.isLogin = true
        this.user = user
      } else {
        this.isLogin = false
        this.user = []
      };
    })
  },
  methods: {
    twitterLogin () {
      var provider = new firebase.auth.TwitterAuthProvider()
      firebase.auth().signInWithPopup(provider)
    },
    logout () {
      firebase.auth().signOut()
    }
  }
}
</script>

これでいい感じに表示されたと思います!

実際にサーバーを起動してみましょう。うまくログインできたと思います!