Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。

JavaScriptでFacebookログインを使用して認証する

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

あなたが始める前に

  1. Firebase を JavaScript プロジェクトに追加します
  2. Facebook for Developersサイトで、アプリのアプリ IDアプリ シークレットを取得します。
  3. Facebook ログインを有効にする:
    1. Firebase コンソールで、 Authセクションを開きます。
    2. [サインイン方法] タブで、 Facebookサインイン方法を有効にし、Facebook から取得したアプリ IDアプリ シークレットを指定します。
    3. 次に、 OAuth リダイレクト URI (例: my-app-12345.firebaseapp.com/__/auth/handler ) が、製品Facebook for Developersサイトの Facebook アプリの設定ページにOAuth リダイレクト URIの 1 つとしてリストされていることを確認します。設定 > Facebook ログイン設定。

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

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

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

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

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.FacebookAuthProvider();
  2. オプション: 認証プロバイダーから要求する追加の OAuth 2.0 スコープを指定します。スコープを追加するには、 addScopeを呼び出します。例えば:

    Web version 9

    provider.addScope('user_birthday');

    Web version 8

    provider.addScope('user_birthday');
    認証プロバイダーのドキュメントを参照してください。
  3. オプション: 関連するカスタム OAuth パラメーターを明示的に渡さずにプロバイダーの OAuth フローをユーザーの優先言語にローカライズするには、OAuth フローを開始する前に Auth インスタンスの言語コードを更新します。例えば:

    Web version 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();

    Web version 8

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

    Web version 9

    provider.setCustomParameters({
      'display': 'popup'
    });

    Web version 8

    provider.setCustomParameters({
      'display': 'popup'
    });
    予約済みの必須 OAuth パラメータは許可されておらず、無視されます。詳細については、認証プロバイダーのリファレンスを参照してください。
  5. Facebook プロバイダー オブジェクトを使用して Firebase で認証します。ポップアップ ウィンドウを開くか、サインイン ページにリダイレクトすることで、ユーザーに Facebook アカウントでのサインインを求めることができます。モバイル デバイスではリダイレクト方式が推奨されます。
    • ポップアップ ウィンドウでサインインするには、 signInWithPopupを呼び出します。

      Web version 9

      import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // The signed-in user info.
          const user = result.user;
      
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          const credential = FacebookAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
      
          // 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 = FacebookAuthProvider.credentialFromError(error);
      
          // ...
        });

      Web version 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // The signed-in user info.
          var user = result.user;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
      
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          var accessToken = credential.accessToken;
      
          // ...
        })
        .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 API を使用して追加データを取得するために使用できる Facebook プロバイダーの OAuth トークンを取得できることにも注意してください。

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

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

      Web version 9

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

      Web version 8

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

      Web version 9

      import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          const credential = FacebookAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          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;
          // AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Facebook Access Token. You can use it to access the Facebook API.
            var token = credential.accessToken;
            // ...
          }
          // 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 Reference Docsを参照してください。

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

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

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

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

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

次のステップ

ユーザーが初めてサインインすると、新しいユーザー アカウントが作成され、サインインに使用したユーザーの資格情報 (ユーザー名とパスワード、電話番号、または認証プロバイダー情報) にリンクされます。この新しいアカウントは 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.
});

Web version 8

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