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

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

始める前に

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

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

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

Google Cloud コンソールで [ID プロバイダ] ページに移動します。

[ID プロバイダ] ページに移動
[プロバイダを追加] をクリックします。
リストから [Twitter] を選択します。
Twitter のアプリ ID とアプリシークレットを入力します。ID とシークレットをまだ持っていない場合は、Twitter アプリページから取得できます。
Twitter アプリの有効な OAuth リダイレクト URI として、[Twitter の構成] に表示されている URI を構成します。
[承認済みドメイン] で [ドメインを追加] をクリックして、アプリのドメインを登録します。開発目的の場合は、localhost はデフォルトですでに有効になっています。
[アプリケーションの構成] で [設定の詳細] をクリックします。このスニペットをアプリのコードにコピーして、Identity Platform Client SDK を初期化します。
[保存] をクリックします。

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

Twitter プロバイダオブジェクトのインスタンスを作成します。
Web バージョン 9

ツリーシェイキングが可能な Web バージョン 9 のモジュラー SDK の詳細と、バージョン 8 からのアップグレード方法をご確認ください。
```
import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js
```
Web バージョン 8
```
var provider = new firebase.auth.TwitterAuthProvider();twitter.js
```

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

Web バージョン 9

import { getAuth } from "firebase/auth";

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

Web バージョン 8

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

省略可: その他のカスタム OAuth パラメータを指定します。これは Twitter 特有であり、通常は認証エクスペリエンスのカスタマイズに使用されます。OAuth または Identity Platform で予約されているパラメータを渡すことはできません。

Web バージョン 9

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

Web バージョン 8

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

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

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

Web バージョン 9

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

Web バージョン 8

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.js

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

signInWithRedirect、linkWithRedirect、reauthenticateWithRedirect を使用する場合は、ベストプラクティスに従ってください。

Web バージョン 9

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_redirect.js

Web バージョン 8

firebase.auth().signInWithRedirect(provider);index.js

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

Web バージョン 9

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

Web バージョン 8

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

アクセストークンを取得したら、そのトークンを使用して 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 を使用しない場合は、次の手順でログインフローを手動で処理することもできます。

デベロッパー向けドキュメントの手順に沿って Twitter 認証をアプリに統合します。
前の手順で実装したフローを使用して、Twitter でユーザーのログインを行います。
Twitter から受け取ったトークンを Identity Platform の認証情報と交換します。
Web バージョン 9

ツリーシェイキングが可能な Web バージョン 9 のモジュラー SDK の詳細と、バージョン 8 からのアップグレード方法をご確認ください。
```
import { TwitterAuthProvider } from "firebase/auth";

const credential = TwitterAuthProvider.credential(accessToken, secret);auth_twitter_provider_credential.js
```
Web バージョン 8
```
var credential = firebase.auth.TwitterAuthProvider.credential(accessToken, secret);twitter.js
```

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

Web バージョン 9

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

// Sign in with the credential from the user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .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;
    // ...
  });auth_signin_credential.js

Web バージョン 8

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

次のステップ

Identity Platform ユーザーの詳細について確認する。
他の ID プロバイダでユーザーのログインを行う。