JavaScript で Twitter を使用して認証する

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

準備

  1. Firebase を JavaScript プロジェクトに追加します
  2. Twitter でデベロッパー アプリケーションとしてアプリを登録し、アプリの API キーAPI シークレットを取得します。
  3. Twitter ログインを有効にします。
    1. Firebase console で [認証] を開きます。
    2. [ログイン方法] タブで [Twitter] を有効にし、Twitter から取得した [API キー] と [API シークレット] を指定します。
    3. 次に、Firebase OAuth リダイレクト URImy-app-12345.firebaseapp.com/__/auth/handler など)を Twitter アプリの設定にあるアプリ設定ページでコールバック URL として設定します。

Firebase SDK を使用してログインフローを処理する

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

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

  1. Twitter プロバイダ オブジェクトのインスタンスを作成します。
     verbatim feae2cfbafc1844110e158241cfff0b5 var provider = new firebase.auth.TwitterAuthProvider(); endverbatim feae2cfbafc1844110e158241cfff0b5 
    
  2. 省略可: OAuth リクエストと一緒に送信したい追加のカスタム OAuth プロバイダ パラメータを指定します。カスタム パラメータを追加するには、OAuth プロバイダのドキュメントで指定されたキーと対応する値を含むオブジェクトで初期化されたプロバイダで setCustomParameters を呼び出します。次に例を示します。
    provider.setCustomParameters({
      'lang': 'es'
    });
    
    保存された必須 OAuth パラメーターは許可されず、無視されます。詳細については、認証プロバイダのリファレンスを参照してください。
  3. Twitter プロバイダ オブジェクトを使用して Firebase での認証を行います。ユーザーに Twitter アカウントでログインするよう促すために、ポップアップ ウィンドウを表示するか、ログインページにリダイレクトします。モバイル端末ではリダイレクトすることをおすすめします。
    • ポップアップ ウィンドウでログインを行う場合は、signInWithPopup を呼び出します。
       verbatim 24697790424976911e7e0370c67634d4 firebase.auth().signInWithPopup(provider).then(function(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.
        var token = result.credential.accessToken;
        var secret = result.credential.secret;
        // The signed-in user info.
        var user = result.user;
        // ...
      }).catch(function(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;
        // ...
      }); endverbatim 24697790424976911e7e0370c67634d4 
      
      また、Twitter プロバイダの OAuth トークンを取得することもできます。このトークンによって、Twitter API を使用して追加データをフェッチできます。

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

    • ログインページにリダイレクトしてログインを行う場合は、signInWithRedirect を呼び出します。
       verbatim 0427c0ae75ec2ca3a39842ad60f51f07 firebase.auth().signInWithRedirect(provider); endverbatim 0427c0ae75ec2ca3a39842ad60f51f07 
      
      次に、ページが読み込まれたときに getRedirectResult を呼び出すことによって、Twitter プロバイダの OAuth トークンを取得することもできます。
       verbatim 0a040aad589eaf15e4d6e8e332fb2765 firebase.auth().getRedirectResult().then(function(result) {
        if (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 = result.credential.accessToken;
          var secret = result.credential.secret;
          // ...
        }
        // The signed-in user info.
        var user = result.user;
      }).catch(function(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;
        // ...
      }); endverbatim 0a040aad589eaf15e4d6e8e332fb2765 
      
      ここではエラーの検出と対応もできます。エラーコードのリストについては、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 での認証を行います。
     verbatim 578f183941260542750a8df640f16e29 firebase.auth().signInWithCredential(credential).catch(function(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;
      // ...
    }); endverbatim 578f183941260542750a8df640f16e29 

次のステップ

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

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

  • Firebase Realtime Database と Firebase Storage のセキュリティ ルールで、ログイン済みユーザーに固有のユーザー ID を auth 変数から取得し、これを使用してユーザーがアクセスできるデータを制御できます。

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

ユーザーのログアウトを行うには signOut を呼び出します。

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}, function(error) {
  // An error happened.
});

フィードバックを送信...