JavaScript による Twitter を使用した認証

Twitter 認証をアプリに統合すると、ユーザーが Firebase での認証に Twitter アカウントを使用できるようになります。Twitter 認証を統合するには、Firebase SDK を使用してログインフローを行うか、Twitter OAuth フローを手動で行って、取得したアクセス トークンとシークレットを Firebase に渡します。

始める前に

  1. Firebase を JavaScript プロジェクトに追加します
  2. Firebase コンソールで [Authentication] セクションを開きます。
  3. [Sign-in method] タブで、[Twitter] プロバイダを有効にします。
  4. そのプロバイダのデベロッパー コンソールで取得した API キーAPI Secret をプロバイダ構成に追加します。
    1. Twitter でデベロッパー アプリケーションとしてアプリを登録し、アプリの OAuth API キーAPI Secret を取得します。
    2. Twitter アプリの構成にあるアプリ設定ページで、Firebase OAuth リダイレクト URImy-app-12345.firebaseapp.com/__/auth/handler など)を認可コールバック URL として設定します。
  5. [保存] をクリックします。

Firebase SDK を使用したログインフローの処理

ウェブアプリをビルドする場合、Twitter アカウントを使用して Firebase でユーザーを認証する最も簡単な方法は、Firebase JavaScript SDK でログインフローを処理することです(Node.js または他の非ブラウザ環境でユーザーを認証する場合、ログインフローを手動で処理する必要があります)。

Firebase JavaScript SDK でログインフローを処理する手順は次のとおりです。

  1. Twitter プロバイダ オブジェクトのインスタンスを作成します。

    ウェブ向けのモジュラー API

    import { TwitterAuthProvider } from "firebase/auth";
    
    const provider = new TwitterAuthProvider();

    ウェブ向けの名前空間付き API

    var provider = new firebase.auth.TwitterAuthProvider();
  2. 省略可: 関連するカスタム OAuth パラメータを明示的に渡すことなく、プロバイダの OAuth フローをローカライズしてユーザーの使用言語にするには、OAuth フローを開始する前に Auth インスタンスの言語コードを更新します。次に例を示します。

    ウェブ向けのモジュラー API

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // auth.useDeviceLanguage();

    名前空間が指定されたウェブ API

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  3. 省略可: OAuth リクエストと一緒に送信する追加のカスタム OAuth プロバイダ パラメータを指定します。カスタム パラメータを追加するには、OAuth プロバイダのドキュメントで指定されたキーと、対応する値を含むオブジェクトで初期化されたプロバイダで setCustomParameters を呼び出します。

    ウェブ向けのモジュラー API

    provider.setCustomParameters({
      'lang': 'es'
    });

    名前空間が指定されたウェブ API

    provider.setCustomParameters({
      'lang': 'es'
    });
    予約済みの必須 OAuth パラメータは許可されず、無視されます。詳細については、認証プロバイダのリファレンスをご覧ください。
  4. Twitter プロバイダ オブジェクトを使用して Firebase での認証を行います。ユーザーに Twitter アカウントでログインするよう促すために、ポップアップ ウィンドウを表示するか、ログインページにリダイレクトします。モバイル デバイスではリダイレクトすることをおすすめします。
    • ポップアップ ウィンドウでログインを行う場合は、signInWithPopup を呼び出します。

      ウェブ向けのモジュラー API

      import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          const credential = TwitterAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          const secret = credential.secret;
      
          // The signed-in user info.
          const user = result.user;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      ウェブ向けの名前空間付き API

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          var token = credential.accessToken;
          var secret = credential.secret;
      
          // The signed-in user info.
          var user = result.user;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
        });
      また、Twitter プロバイダの OAuth トークンを取得し、Twitter API でそのトークンを使用して追加データをフェッチすることもできます。

      ここではエラーの検出と対応もできます。エラーコードのリストについては、Auth のリファレンス ドキュメントをご覧ください。

    • ログインページにリダイレクトしてログインする場合は、signInWithRedirect を呼び出します。「signInWithRedirect」を使用する場合は、ベスト プラクティスに従ってください。

      ウェブ向けのモジュラー API

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      ウェブ向けの名前空間付き API

      firebase.auth().signInWithRedirect(provider);
      次に、ページが読み込まれたときに getRedirectResult を呼び出して、Twitter プロバイダの OAuth トークンを取得することもできます。

      ウェブ向けのモジュラー API

      import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          const credential = TwitterAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          const secret = credential.secret;
          // ...
      
          // The signed-in user info.
          const user = result.user;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      名前空間が指定されたウェブ API

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
            // You can use these server side with your app's credentials to access the Twitter API.
            var token = credential.accessToken;
            var secret = credential.secret;
            // ...
          }
      
          // The signed-in user info.
          var user = result.user;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
        });
      ここではエラーの検出と対応もできます。エラーコードのリストについては、Auth のリファレンス ドキュメントをご覧ください。

手動でログインフローを処理する

Twitter アカウントを使用して Firebase での認証を行うために、Twitter OAuth エンドポイントを呼び出してログインフローを処理することもできます。

  1. デベロッパー向けドキュメントに沿って Twitter 認証をアプリに統合します。Twitter ログインフローの最後に、OAuth アクセス トークンと OAuth シークレットを受け取ります。
  2. Node.js アプリケーションにログインする必要がある場合は、OAuth アクセス トークンと OAuth シークレットを Node.js アプリケーションに送信します。
  3. ユーザーが Twitter でのログインに成功したら、OAuth アクセス トークンと OAuth シークレットを Firebase 認証情報(
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
    )と交換します。
  4. Firebase 認証情報を使用して Firebase での認証を行います。

    ウェブ向けのモジュラー API

    import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";
    
    // Sign in with the credential from the Facebook user.
    const auth = getAuth();
    signInWithCredential(auth, credential)
      .then((result) => {
        // Signed in 
        const credential = FacebookAuthProvider.credentialFromResult(result);
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.customData.email;
        // The AuthCredential type that was used.
        const credential = FacebookAuthProvider.credentialFromError(error);
        // ...
      });

    名前空間が指定されたウェブ API

    // Sign in with the credential from the Facebook user.
    firebase.auth().signInWithCredential(credential)
      .then((result) => {
        // Signed in       
        var credential = result.credential;
        // ...
      })
      .catch((error) => {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });

Chrome 拡張機能での Firebase 認証

Chrome 拡張機能アプリを作成する場合は、Chrome 拡張機能 ID を追加する必要があります。

  1. Firebase コンソールでプロジェクトを開きます。
  2. [Authentication] セクションで、[Sign-in method] ページを開きます。
  3. 承認済みドメインのリストに、次のような URI を追加します。
    chrome-extension://CHROME_EXTENSION_ID

Chrome 拡張機能では HTTP リダイレクトを使用できないため、Chrome 拡張機能ではポップアップ オペレーション(signInWithPopuplinkWithPopupreauthenticateWithPopup)のみを使用できます。認証ポップアップはブラウザのアクション ポップアップをキャンセルするため、ブラウザのアクション ポップアップではなくバックグラウンド ページ スクリプトからこれらのメソッドを呼び出す必要があります。ポップアップ メソッドは、Manifest V2 を使用する拡張機能でのみ使用できます。新しい Manifest V3 では、Service Worker 形式のバックグラウンド スクリプトのみが許可されます。そのため、ポップアップ オペレーションは一切実行できません。

Chrome 拡張機能のマニフェスト ファイルで、https://apis.google.com URL を content_security_policy 許可リストに必ず追加してください。

次のステップ

ユーザーが初めてログインすると、新しいユーザー アカウントが作成され、ユーザーがログイン時に使用した認証情報(ユーザー名とパスワード、電話番号、または認証プロバイダ情報)にアカウントがリンクされます。この新しいアカウントは Firebase プロジェクトの一部として保存され、ユーザーのログイン方法にかかわらず、プロジェクトのすべてのアプリでユーザーを識別するために使用できます。

  • アプリでユーザーの認証ステータスを把握するには、Auth オブジェクトにオブザーバーを設定することをおすすめします。これによって、ユーザーの基本的なプロフィール情報を User オブジェクトから取得できます。ユーザーを管理するをご覧ください。

  • Firebase Realtime Database と Cloud Storage のセキュリティ ルールでは、ログイン済みユーザーの一意のユーザー ID を auth 変数から取得し、それを使用して、ユーザーがアクセスできるデータを管理できます。

既存のユーザー アカウントに認証プロバイダの認証情報をリンクすることで、ユーザーは複数の認証プロバイダを使用してアプリにログインできるようになります。

ユーザーをログアウトするには、signOut を呼び出します。

ウェブ モジュラー API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

名前空間が指定されたウェブ API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});