[Firebase] AuthenticationでTwitter認証 (Web編)

この記事は 2019年3月2日 に書かれたものです

以前はFirebaseへメールアドレスでのログインを行いましたが、今回はTwitterでの認証に挑戦したいと思います。

1 AuthenticationでTwitterログイン
2 参考ページ

AuthenticationでTwitterログイン

Twitterでアプリを作成

まず最初にTwitterでデベロッパー登録を行う必要があります。承認されるまでに数時間〜数日かかりますので思いついたら早めに申請しておくのがおすすめです。

TwitterのDeveloper登録をする - 2019年2月版

https://blog.katsubemakito.net/articles/twitterdeveloper_join_201902

以前はTwitterのAPIを利用するためには所定の項目に入力すればそれで終わっていたのですが、最近は入力した項目をTwitter社の方が問題ないかチェックをしているようです。世知辛い世の中になったもんです(´・ω・`)今回はTwitterへデベロッパーアカウントとしての申請を行ってみます。申請するログインTwitterにログインした状態、または以下のページにアクセスし申請を行うアカウントでログインを行います。申請内容の入力「Create an app」ボタンをクリックアプリを作成するにはデベロッパーアカウントへの登録が必要云々と表示される...

ねこの足跡R

その後Twitter上でOAuthアプリを作成します。といっても何も難しいことはなく必要な項目をフォームに入力するだけです。このときにCallback URLの入力を求められたら、いったんFirebseのWebコンソールへ移動します。

Twitterアプリを新規に作成する

https://blog.katsubemakito.net/articles/twitter-app-create

Twitterのログイン機能を自分のサイトに設置したり、APIを利用するためにはTwitterへ開発者登録後にアプリの作成を行う必要があります。デベロッパー登録開発者登録を行っていない場合はこちらをまずは行います。詳細は過去の記事を参照ください。Twitterの中の人が申請内容の確認作業を行うため、審査中はアプリの登録や利用などは行うことができません。タイミングによりますが私の場合は4時間程度でした。ネット上を見回すと10日前後かかった方もいらっしゃるようなので、早めにやっておいたほうが良いでしょう。この作業は最初の1...

ねこの足跡R

Twitterのデベロッパーサイトは日本語訳されていませんので、私もそうなのですが英語が苦手な方はGoogle翻訳をタブで開きながら行えばなんとかなります。

コンソール上の設定

FirebaseのWebコンソールへログインしたら、メニュー「Authentication」→「ログイン方法」とたどります。

画面の真ん中あたりにある「Twitter」のアコーディオンメニューを開き、「有効にする」にチェックしたあと

「コールバックURL」をTwitterのアプリ作成画面にコピー
Twitterのアプリが作成できたらKeys and tokensにある「API key」「API secret key」を、Firebaseのこの画面にコピー

最後に「保存」をクリックすれば作業完了です。

ソースコード

config.js

いつものやつです。FirebaseのWebコンソールに表示されたものをそのままコピペします。

// コンソールの内容をそのままコピペ
var config = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "test-f76bc.firebaseapp.com",
  databaseURL: "https://test-f76bc.firebaseio.com",
  projectId: "test-f76bc",
  storageBucket: "test-f76bc.appspot.com",
  messagingSenderId: "0000000000000"
};
firebase.initializeApp(config);

index.html

今回もFirebaseUIを利用します。signInOptionsにfirebase.auth.TwitterAuthProvider.PROVIDER_IDを指定するだけですね。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Firebase Auth for Twitter</title>
  <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
  <style>h1{text-align: center;}</style>
</head>
<body>
  <h1>Firebase Auth for Twitter</h1>
  <div id="firebaseui-auth-container"></div>

  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth__ja.js"></script>
  <script src="/js/config.js"></script>
  <script>
    //----------------------------------------------
    // Firebase UIの設定
    //----------------------------------------------
    var uiConfig = {
        // ログイン完了時のリダイレクト先
        signInSuccessUrl: '/auth/twitter/done.html',

        // 利用する認証機能
        signInOptions: [
          firebase.auth.TwitterAuthProvider.PROVIDER_ID
        ],

        // 利用規約のURL(任意で設定)
        tosUrl: 'http://example.com/kiyaku/',
        // プライバシーポリシーのURL(任意で設定)
        privacyPolicyUrl: 'http://example.com/privacy'
      };

      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      ui.start('#firebaseui-auth-container', uiConfig);
  </script>
</body>
</html>

done.html

ログイン完了時に表示される画面です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Firebase Auth for Twitter</title>
</head>
<body>
  <h1>...Please wait</h1>
  <div id="info"></div>

  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
  <script src="/js/config.js"></script>
  <script>
    firebase.auth().onAuthStateChanged( (user) => {
      let h1   = document.querySelector('h1');
      let info = document.querySelector('#info');

      if(user) {
        h1.innerText   = 'Login Complete!';
        info.innerHTML = `${user.displayName}さんがログインしました<br>` +
                         `(${user.uid})`;
        console.log(user);
      }
      else {
        h1.innerText = 'Not Login';
      }
    });
  </script>
</body>
</html>