Google 致力于为黑人社区推动种族平等。查看具体举措。

通过 JavaScript 使用 Facebook 登录进行身份验证

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

您可以通过将 Facebook Login 集成到您的应用中，让您的用户使用他们的 Facebook 帐户向 Firebase 进行身份验证。您可以通过使用 Firebase SDK 执行登录流程或手动执行 Facebook 登录流程并将生成的访问令牌传递给 Firebase 来集成 Facebook 登录。

在你开始之前

  1. 将 Firebase 添加到您的 JavaScript 项目中。
  2. 在Facebook for Developers网站上，为您的应用获取App ID和App Secret 。
  3. 启用 Facebook 登录：
    1. 在Firebase 控制台中，打开Auth部分。
    2. 在登录方法选项卡上，启用Facebook登录方法并指定您从 Facebook 获得的App ID和App Secret 。
    3. 然后，确保您的OAuth 重定向 URI （例如my-app-12345.firebaseapp.com/__/auth/handler ）在产品的Facebook for Developers网站上的 Facebook 应用程序设置页面中列为您的OAuth 重定向 URI之一设置 > Facebook 登录配置。

使用 Firebase SDK 处理登录流程

如果您正在构建 Web 应用程序，使用 Firebase 使用 Facebook 帐户对用户进行身份验证的最简单方法是使用 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;

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

    // 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 提供商的 OAuth 令牌，该令牌可用于使用 Facebook API 获取其他数据。

      这也是您可以捕获和处理错误的地方。有关错误代码的列表，请查看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;
  }).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;
  }).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 扩展程序只能使用弹出操作（ signInWithPopup 、 linkWithPopup和reauthenticateWithPopup ），因为 Chrome 扩展程序不能使用 HTTP 重定向。您应该从后台页面脚本而不是浏览器操作弹出窗口调用这些方法，因为身份验证弹出窗口将取消浏览器操作弹出窗口。弹出方法只能用于使用Manifest V2的扩展。较新的Manifest V3只允许服务工作者形式的后台脚本，根本无法执行弹出操作。

在 Chrome 扩展程序的清单文件中，确保将https://apis.google.com URL 添加到content_security_policy许可名单。

下一步

用户首次登录后，会创建一个新用户帐户并将其链接到凭据（即用户名和密码、电话号码或身份验证提供商信息），即用户登录时使用的凭据。这个新帐户作为 Firebase 项目的一部分存储，可用于在项目中的每个应用中识别用户，无论用户如何登录。

  • 在您的应用程序中，了解用户身份验证状态的推荐方法是在Auth对象上设置观察者。然后，您可以从User对象中获取用户的基本配置文件信息。请参阅管理用户。

  • 在您的 Firebase 实时数据库和云存储安全规则中，您可以从auth变量中获取登录用户的唯一用户 ID，并使用它来控制用户可以访问哪些数据。

您可以通过将身份验证提供程序凭据链接到现有用户帐户来允许用户使用多个身份验证提供程序登录您的应用程序。

要注销用户，请调用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