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();
    auth_facebook_provider_create.js

    Web version 8

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

    Web version 9

    provider.addScope('user_birthday');
    auth_facebook_provider_scopes.js

    Web version 8

    provider.addScope('user_birthday');
    facebook.js
    認証プロバイダーのドキュメントを参照してください。
  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();
    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
  4. オプション: OAuth 要求で送信する追加のカスタム OAuth プロバイダー パラメーターを指定します。カスタム パラメータを追加するには、OAuth プロバイダのドキュメントで指定されているキーと対応する値を含むオブジェクトを使用して、初期化されたプロバイダでsetCustomParametersを呼び出します。例えば：

    Web version 9

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

    Web version 8

    provider.setCustomParameters({
  'display': 'popup'
});
    facebook.js
    予約済みの必須 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);

    // ...
  });
      auth_facebook_signin_popup.js

      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.js
      また、Facebook API を使用して追加データを取得するために使用できる Facebook プロバイダーの 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を呼び出して、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);
    // ...
  });
      auth_facebook_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 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;
    // ...
  });
      facebook.js
      これは、エラーをキャッチして処理できる場所でもあります。エラー コードのリストについては、 Auth Reference Docsを参照してください。

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

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

  1. Firebase コンソールでプロジェクトを開きます。
  2. [認証]セクションで、[サインイン方法] ページを開きます。
  3. 次のような 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 プロジェクトの一部として保存され、ユーザーのサインイン方法に関係なく、プロジェクト内のすべてのアプリでユーザーを識別するために使用できます。

  • アプリでユーザーの認証ステータスを知るための推奨される方法は、 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