Twitter を使用したユーザーのログイン

このドキュメントでは、Identity Platform を使用して Twitter でユーザーのログインを行う方法について説明します。

始める前に

このチュートリアルは、すでに Identity Platform が有効であり、HTML と JavaScript を使用して作成された基本的なウェブアプリがあることを前提としています。その方法については、クイックスタートをご覧ください。

Twitter をプロバイダとして構成する

Twitter を ID プロバイダとして構成するには:

  1. Cloud Console で [ID プロバイダ] ページに移動します。

    [ID プロバイダ] ページに移動

  2. [プロバイダを追加] をクリックします。

  3. リストから [Twitter] を選択します。

  4. Twitter のアプリ ID とアプリ シークレットを入力します。ID とシークレットをまだ持っていない場合は、Twitter アプリページから取得できます。

  5. Twitter アプリの有効な OAuth リダイレクト URI として、[Twitter の構成] に表示されている URI を構成します。

  6. [承認済みドメイン] で [ドメインを追加] をクリックして、アプリのドメインを登録します。開発目的の場合は、localhost はデフォルトですでに有効になっています。

  7. [アプリケーションの構成] で [設定の詳細] をクリックします。このスニペットをアプリのコードにコピーして、Identity Platform Client SDK を初期化します。

  8. [保存] をクリックします。

Client SDK を使用したユーザーのログイン

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

    JaveScript 

    var provider = new firebase.auth.TwitterAuthProvider();
    twitter-popup.html

  1. 省略可: 認証フローをローカライズします。言語を指定するか、デバイスのデフォルトの言語を使用できます。

    JaveScript 

    firebase.auth().languageCode = 'fr_FR';
// To apply the default browser preference instead of
// explicitly setting it.
// firebase.auth().useDeviceLanguage();

  2. 省略可: その他のカスタム OAuth パラメータを指定します。これは Twitter 特有であり、通常は認証エクスペリエンスのカスタマイズに使用されます。

    JaveScript 

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

    OAuth または Identity Platform で予約されているパラメータを渡すことはできません。

  3. Twitter プロバイダ オブジェクトを使用して、ユーザーのログインを行います。ポップアップ ウィンドウを開く、または現在のページをリダイレクトできます。モバイル デバイスでは、リダイレクトの方がユーザーにとってより簡単な方法です。

    ポップアップを表示するには、signInWithPopup() を呼び出します。

    JaveScript 

    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;
  // ...
});
    twitter-popup.html

    ページをリダイレクトするには、まず signInWithRedirect() を呼び出します。

    JaveScript 

    firebase.auth().signInWithRedirect(provider);
    twitter-redirect.html

    次に、ページが読み込まれるときに getRedirectResult() を呼び出すことによって、Twitter トークンを取得します。

    JaveScript 

    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;
  // ...
});
    twitter-redirect.html

アクセス トークンを取得したら、そのトークンを使用して Twitter API を呼び出すことができます。例:

REST 

curl --request POST
  --url 'https://api.twitter.com/1.1/statuses/update.json?status=Hello%20world'
  --header 'authorization: OAuth oauth_consumer_key="CONSUMER_API_KEY",
  oauth_nonce="OAUTH_NONCE", oauth_signature="OAUTH_SIGNATURE",
  oauth_signature_method="HMAC-SHA1", oauth_timestamp="OAUTH_TIMESTAMP",
  oauth_token="ACCESS_TOKEN", oauth_version="1.0"'

手動でのユーザーのログイン

Client SDK を使用しない場合は、次の手順でログイン フローを手動で処理することもできます。

  1. デベロッパー向けドキュメントの手順に沿って Twitter 認証をアプリに統合します。

  2. 前の手順で実装したフローを使用して、Twitter でユーザーのログインを行います。

  3. Twitter から受け取ったトークンを Identity Platform の認証情報と交換します。

    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);

  4. 認証情報を使用して、Identity Platform でユーザーのログインを行います。

    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;
  // ...
});

次のステップ