Vue、FirebaseでツイッターのOAuthを使ったログイン機能を追加する

はじめに

入社までの間でいろいろなところに出かけようと思っていたが、このご時世むやみに出かけるのも怖い。
おとなしく家でなにか作ろうと思ったので、前から気になっていたFirebaseを使ってみたのでそのまとめ。

到達目標

FirebaseでTwitterアカウントを使ったユーザー認証を実装

Firebaseの登録

まず、Firebaseとはなにかということですが、いろいろな機能を提供しているバックエンドサービスです。
詳しくはここがわかりやすかったので知りたい人は見てください。

利用するために登録をしましょう。
Firebase

使ってみるを押します。
そうすると下の画面になるのでプロジェクトを作成を押してプロジェクトを作成しましょう。

プロジェクト名を入力し、規約に同意し、続行をクリックします。
続いてGoogle アナリティクスを導入するかの選択ですが、そのまま導入でいいと思います。
Google アナリティクスはアクセス解析ツールです。
次に進み地域を日本に設定し、2項目の規約に同意しプロジェクトを作成を押します。

しばらく待つと、ダッシュボードに飛びます。

この画面になればFirebaseの利用登録は終了です。

Twitter APIの使用準備

続いて、TwitterAPIの使用準備です。
これをすることで、FireBaseで使用できるログインオプションのTwitterが使えるようになります。

利用準備

Twitter Developers

右上のログインを押して、APIを使えるようにするユーザーでTwitterにログインします。
ログインするともとのページに戻ってきて、ログインの部分が変わっています。
このApplyをクリックします。

そうしたら、Apply for developer accountをクリックします。

下の画面に移動したら左から2列目の2段めにある「Building tools for Twitter users」を選択しましょう。

APIを使えるようにするアカウントが表示されているか確認します。

アカウントの部分に赤字でなにか書いてあり、リンクがあったらリンクを押してください。
これはアカウントに電話番号が登録されていない場合に表示されます。
設定したら戻って来て更新してください。
その後下の国を選ぶ部分を日本に選択し、「What would you like us to call you?」の部分は開発者アカウントをなんと呼びますか？とのことなので、ニックネームでもなんでもいいので登録します。
続いて利用目的の登録です。
「In your words」は、APIをどういった使い方をするかを説明します。
200文字以上ないと通らないので頑張ってください。
その後も各内容の説明をガリガリ書いていきます。
必要ないものはチェックを消して、書かないようにします。

次に進むと各内容の確認が出てくるので、内容に間違いがなければ進みます。
利用規約の確認が出てくるので同意して進みます。
そうすると登録したメールアドレスに確認のメールが来るので、リンクに飛んで認証しましょう。

Appの作成

登録がおわったら再度Twitter Developersにアクセスしアプリの作成を行いましょう。

右上のメニューからAppsを選択します。

Appsのページに飛ぶので、Create an appをクリックしてアプリを作成しましょう。
アプリの名前、説明、ページのURL、コールバックなど入力します。
このとき「Enable Sign in with Twitter」にチェックを入れましょう。
自分はページのURLとコールバックが決まっていなければとりあえずQiitaのマイページのURLを入力しておきました。
進むと注意事項が書かれたモーダルが表示されるので、確認してCreateを押します。
アプリが作成できたら「Keys and tokens」をクリックしてConsumer API keyを確認しましょう。

このあとFirebaseの設定で使用するのでひかえておいてください。

firebaseの設定

Firebaseに戻ってログイン方法（Auth）を設定します。

先程作成したFirebaseのダッシュボードに行き、左のメニューから「開発⇛Authentication」をクリックします。ログイン方法が出てくるのでクリックしてツイッターを有効にします。
ここに先程ひかえたAPI Tokenを入力します。
下に出ているコールバックURLをコピーしておき保存を押します。
Twitterの方に戻り、先程作ったAppを編集しコールバックの欄にコピーしたURLを入力します。
これで準備は終了です。

Vueプロジェクトの作成

早速Vueのプロジェクトを作っていきましょう！
下のコマンドを実行してプロジェクトを作成します。
Vueが入ってない方は入れておいてください。

コンソール

vue create プロジェクト名

<!--終わったら-->
cd プロジェクト名
npm install -s firebase

Firebaseのダッシュボードに行き左メニューの上の方にある歯車マークを押します。
「settings」が開かれるので、下の方にある「Firebase SDK snippet」のスクリプトをコピーします。

Vueのファイルを編集していきます。
まず、VueでFirebasaeを使えるようにします。

main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import firebase from 'firebase' // 追記

Vue.config.productionTip = false

// Your web app's Firebase configuration
const firebaseConfig = { // 先ほどコピーしたもの
  apiKey: '***************************',
  authDomain: '***************************',
  databaseURL: '***************************',
  projectId: '***************************',
  storageBucket: '***************************',
  messagingSenderId: '***************************',
  appId: '***************************',
  measurementId: '***************************' 
}
// Initialize Firebase
firebase.initializeApp(firebaseConfig)　// 追記
firebase.analytics()　// 追記

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

続いてHomeにログインボタンを作り、ユーザー情報を取得しましょう。

./src/views/Home.vue

<template>
  <div class="signin">
    <h2>Sign in</h2>
    <button @click="signin">Signin</button>
  </div>
</template>

<script>
import firebase from 'firebase'

export default {
  name: 'Signin',
  methods: {
    signin: function () {
      const provider = new firebase.auth.TwitterAuthProvider()
      firebase.auth().signInWithPopup(provider)
        .then(
          result => {
            if (user) {
              console.log(result.user)
            } else {
              alert('有効なアカウントではありません')
            }
          })
    }
  }
}
</script>

一通り設定が終わったので動作を確認しましょう！

コンソール

npm run serve

ブラウザでhttp://localhost:8080/ にアクセスすると以下のような画面が出ると思います。

Signinを押すとTwitterの連携の確認が出て来ると思います。
うまく認証できればコンソールにユーザー名やトプ画のURLなど様々な情報が取得できていると思います。

終わりに

とりあえず、FirebaseとVueを使ってTwitterのOAuth認証で作ったWebアプリにログイン機能をつけることができました。
ここからいろいろな機能を追加していきWebアプリを作っていこうと思います。

参考にさせていただいた記事など

Vue.jsとfirebaseを使ってTwitter認証してみた【ユーザー名・プロフ写真の取得と表示・ログイン状態維持の方法も併せて】@nekoGorilla様
認証付きの簡易チャットを作る！-基礎から学ぶ Vue.js様