Firebaseを使って、ReactでTwitterのログイン認証を行う

Firebaseはかなり便利ですよね。以前swiftでチャット画面を作ったような気がするけど割と簡単にできた気がします。今回はReactを使ってTwitterのログイン認証をしようと思います。

Twitter Application Managementからアプリを登録する

まずは、TwitterAPIを使うためのアプリ登録をしましょう。ここで、consumer_keyやsecret_keyを手に入れます。

apps.twitter.com

あとで使うので、置いておきます。

Firebaseの設定を行う

続いてFirebaseの設定をしましょう。Firebaseにログインしてプロジェクトを作ります。 webアプリにfirebaseを使用したいの上の方にある3つの中から「WebアプリにFirebaseを追加」を選択します。

スニペットが表示され、その中にapi_key等がありますね。これをwebアプリの方に追加しましょう。htmlの中で使う際にはこのままコピペして使えそうですね。今回はreactを使うので、これをコード内で以下のように設置します。

import firebase from 'firebase/firebase-browser';

const config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
}
firebase.initializeApp(config);

次にFirebaseでTwitterの認証設定をします。「Authentication」をクリックし、ログイン方法を設定しましょう。

ここのAPI_KEYとSECRET_KEYには、さっきTwitter Application Managementで取得したものを入力します。コールバックURLが表示されているので、これは、Twitter Application Managementで作成したアプリのコールバックURLにセットします。これで準備完了。次はコード側から今設定したものを使っていきましょう。

firebaseを入れる

さっきもちらっと書きましたが、ここでもfirebaseの記述を少し書きます。

$yarn add firebase@3.6.4 --save

npmを使っている方はyarn addをnpm installに変えて実行してください。

インストールしたらfirebaseをファイル内にimportします。

import firebase from 'firebase/firebase-browser';

次にさっき取得したfirebaseのapi_key等を記載します。

const config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
}
firebase.initializeApp(config);

ログインの記述を行う

Firebaseをコードからいじれるようになったので、firebaseを使ったTwitterのログイン処理を書いていきます。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import firebase from 'firebase/firebase-browser';

class Login extends React.Component {

  handleClick(e) {
    e.preventDefault();
    const provider = new firebase.auth.TwitterAuthProvider();
    firebase.auth().signInWithPopup(provider)
      .then((result) => {
          console.log(result);
        }).catch((error) => {
          console.log(error);
        });
  }

  render() {
    return(
      <button onClick={(e) => this.handleClick(e)}>ログイン</button>
    )
  }
}

export default Login;

ボタンをクリックしたら認証します。あとは、返ってきた必要な値をとって好きなようにいじる感じですね。