このページは Cloud Translation API によって翻訳されました。

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

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

あなたが始める前に

Firebase を JavaScript プロジェクトに追加します。
Firebase コンソールで、 Authセクションを開きます。
[サインイン方法] タブで、 Twitterプロバイダーを有効にします。
そのプロバイダーの開発者コンソールからAPI キーとAPI シークレットをプロバイダー構成に追加します。
1. アプリを開発者アプリケーションとして Twitter に登録し、アプリの OAuth API キーとAPI シークレットを取得します。
2. Firebase OAuth リダイレクト URI (例: my-app-12345.firebaseapp.com/__/auth/handler ) が、 Twitter アプリの config のアプリの設定ページで認証コールバック URLとして設定されていることを確認してください。
[保存]をクリックします。

Firebase SDK でログインフローを処理する

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

Firebase JavaScript SDK でサインインフローを処理するには、次の手順に従います。

Twitter プロバイダーオブジェクトのインスタンスを作成します。
Web version 9
ツリーシェーク可能な Web v9 モジュラー SDK とバージョン 8 からのアップグレードの詳細をご覧ください。
```
import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js
```
Web version 8
```
var provider = new firebase.auth.TwitterAuthProvider();twitter.js
```
オプション: 関連するカスタム OAuth パラメーターを明示的に渡さずにプロバイダーの OAuth フローをユーザーの優先言語にローカライズするには、OAuth フローを開始する前に Auth インスタンスの言語コードを更新します。例えば：
Web version 9
ツリーシェーク可能な Web v9 モジュラー SDK とバージョン 8 からのアップグレードの詳細をご覧ください。
```
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 version 8
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
オプション: OAuth 要求で送信する追加のカスタム OAuth プロバイダーパラメーターを指定します。カスタムパラメータを追加するには、OAuth プロバイダのドキュメントで指定されているキーと対応する値を含むオブジェクトを使用して、初期化されたプロバイダでsetCustomParametersを呼び出します。例えば：
Web version 9
ツリーシェーク可能な Web v9 モジュラー SDK とバージョン 8 からのアップグレードの詳細をご覧ください。
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
Web version 8
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
予約済みの必須 OAuth パラメータは許可されておらず、無視されます。詳細については、認証プロバイダーのリファレンスを参照してください。

Twitter プロバイダーオブジェクトを使用して Firebase で認証します。ポップアップウィンドウを開くか、サインインページにリダイレクトすることで、ユーザーに Twitter アカウントでのサインインを促すことができます。モバイルデバイスではリダイレクト方式が推奨されます。

ポップアップウィンドウでサインインするには、 signInWithPopupを呼び出します。

Web version 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 version 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

また、Twitter API を使用して追加データを取得するために使用できる Twitter プロバイダーの OAuth トークンを取得できることにも注意してください。

これは、エラーをキャッチして処理できる場所でもあります。エラーコードのリストについては、 Auth Reference Docsを参照してください。

サインインページにリダイレクトしてサインインするには、 signInWithRedirectを呼び出します。

Web version 9

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

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

Web version 8

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

次に、ページの読み込み時にgetRedirectResultを呼び出して、Twitter プロバイダーの OAuth トークンを取得することもできます。

Web version 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 version 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

これは、エラーをキャッチして処理できる場所でもあります。エラーコードのリストについては、 Auth Reference Docsを参照してください。

account-exists-with-different-credential エラーの処理

Firebase コンソールで [メールアドレスごとに 1 つのアカウント] 設定を有効にした場合、ユーザーが別の Firebase ユーザーのプロバイダー (Google など) 用に既に存在するメールアドレスを使用してプロバイダー (Twitter など) にサインインしようとすると、エラーauth/account-exists-with-different-credentialがAuthCredentialオブジェクト (Twitter oauth トークンとシークレット) と共にスローされます。目的のプロバイダーへのサインインを完了するには、ユーザーはまず既存のプロバイダー (Google) にサインインしてから、以前のAuthCredential (Twitter oauth トークンとシークレット) にリンクする必要があります。

signInWithPopupを使用すると、次の例のようなコードauth/account-exists-with-different-credentialエラーを処理できます。


// Step 1.
// User tries to sign in to Twitter.
auth.signInWithPopup(new firebase.auth.TwitterAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Twitter credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Twitter account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Twitter credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Twitter account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

リダイレクトモード

このエラーは、リダイレクトモードでも同様の方法で処理されますが、ページリダイレクト間で保留中の資格情報をキャッシュする必要があるという違いがあります (たとえば、セッションストレージを使用)。

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

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

開発者のドキュメントに従って、Twitter 認証をアプリに統合します。 Twitter サインインフローの最後に、OAuth アクセストークンと OAuth シークレットを受け取ります。
Node.js アプリケーションにサインインする必要がある場合は、OAuth アクセストークンと OAuth シークレットを Node.js アプリケーションに送信します。
ユーザーが Twitter で正常にサインインしたら、OAuth アクセストークンと OAuth シークレットを Firebase 資格情報と交換します:
```
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
```

Firebase 認証情報を使用して Firebase で認証します。

Web version 9

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

Web version 8

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

Chrome 拡張機能で Firebase を使用して認証する

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

Firebase コンソールでプロジェクトを開きます。
[認証]セクションで、[サインイン方法] ページを開きます。
次のような URI を承認済みドメインのリストに追加します:
```
chrome-extension://CHROME_EXTENSION_ID
```

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

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

プロジェクトの作成時に、Firebase はプロジェクトに固有のサブドメインをプロビジョニングします: https://my-app-12345.firebaseapp.com 。

これは、OAuth サインインのリダイレクトメカニズムとしても使用されます。そのドメインは、サポートされているすべての OAuth プロバイダーに対して許可する必要があります。ただし、これは、アプリケーションにリダイレクトする前に、ユーザーが Twitter にサインインしているときにそのドメインが表示される可能性があることを意味します。

サブドメインが表示されないようにするには、Firebase Hosting でカスタムドメインを設定します。

ホスティング用にドメインをセットアップするの手順 1 から 3 に従います。ドメインの所有権を確認すると、Hosting はカスタムドメインの SSL 証明書をプロビジョニングします。
カスタムドメインをFirebase コンソールの承認済みドメインのリストに追加します: auth.custom.domain.com 。
Twitter 開発者コンソールまたは OAuth セットアップページで、カスタムドメインでアクセスできるリダイレクトページの URL をホワイトリストに登録します: https://auth.custom.domain.com/__/auth/handler 。

JavaScript ライブラリを初期化するときに、 authDomainフィールドでカスタムドメインを指定します:

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

次のステップ

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

アプリでユーザーの認証ステータスを知るための推奨される方法は、 Authオブジェクトにオブザーバーを設定することです。その後、 Userオブジェクトからユーザーの基本的なプロファイル情報を取得できます。ユーザーの管理を参照してください。
Firebase Realtime Database と Cloud Storageセキュリティルールでは、サインインしているユーザーの一意のユーザー ID をauth変数から取得し、それを使用してユーザーがアクセスできるデータを制御できます。

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

ユーザーをサインアウトするには、 signOutを呼び出します。

Web version 9

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

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

Web version 8

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

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

あなたが始める前に

Firebase SDK でログイン フローを処理する

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

account-exists-with-different-credential エラーの処理

ポップアップモード

リダイレクト モード

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

Web version 9

Web version 8

Chrome 拡張機能で Firebase を使用して認証する

Twitter サインイン用のリダイレクト ドメインのカスタマイズ

次のステップ

Web version 9

Web version 8

Firebase SDK でログインフローを処理する

リダイレクトモード

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

Twitter サインイン用のリダイレクトドメインのカスタマイズ