在 JavaScript 中使用 Facebook 登录进行身份验证

您可以将 Facebook 登录机制集成到您的应用中,让您的用户能够使用自己的 Facebook 帐号进行 Firebase 身份验证。您可以使用 Firebase SDK 实施登录流程,或者手动实施 Facebook 登录流程,并将生成的访问令牌传递至 Firebase,从而集成 Facebook 登录机制。

准备工作

  1. 将 Firebase 添加到您的 JavaScript 项目
  2. Facebook for Developers 网站上,获取您的应用的应用 ID应用密钥
  3. 启用 Facebook 登录机制:
    1. Firebase 控制台中,打开 Authentication(身份验证)部分。
    2. 登录方法标签上,启用 Facebook 登录方法,并指定您之前从 Facebook 获得的应用 ID应用密钥
    3. 然后,请务必转到 Facebook for Developers 网站,依次点击产品设置 > Facebook 登录配置,然后在您的 Facebook 应用的设置页面中,确保您的 OAuth 重定向 URI(例如 my-app-12345.firebaseapp.com/__/auth/handler)出现在 OAuth 重定向 URI 列表中。

使用 Firebase SDK 处理登录流程

如果您要构建网页应用,通过用户的 Facebook 帐号对用户进行 Firebase 身份验证时,最简单的方法是使用 Firebase JavaScript SDK 来处理登录流程。(如果您希望在 Node.js 或其他非浏览器环境中对用户进行身份验证,则必须手动处理登录流程。)

要使用 Firebase JavaScript SDK 处理登录流程,请按以下步骤操作:

  1. 创建 Facebook 提供方对象实例:
    var provider = new firebase.auth.FacebookAuthProvider();
    
  2. 可选:指定您希望向身份验证提供方请求获取的额外的 OAuth 2.0 范围。如需添加范围,请调用 addScope。例如:
    provider.addScope('user_birthday');
    
    请参阅身份验证提供方文档
  3. 可选:要在未明确传递相关自定义 OAuth 参数的情况下将提供方的 OAuth 流程本地化为用户偏好的语言,请在启动 OAuth 流程之前先更新 Auth 实例中的语言代码。例如:
    firebase.auth().languageCode = 'fr_FR';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  4. 可选:指定您希望通过 OAuth 请求发送的其他自定义 OAuth 提供方参数。如需添加自定义参数,请使用包含 OAuth 提供方文档中指定的密钥及相应值的对象,在已初始化的提供方服务中调用 setCustomParameters。例如:
    provider.setCustomParameters({
      'display': 'popup'
    });
    
    禁止使用保留的必需 OAuth 参数,系统将忽略此类参数。 有关详情,请参阅身份验证提供方参考
  5. 使用 Facebook 提供方对象进行 Firebase 身份验证。您可以提示您的用户,让其通过打开弹出式窗口或重定向到登录页面的方法用自己的 Facebook 帐号登录。在移动设备上最好使用重定向方法。
    • 要使用弹出式窗口登录,请调用 signInWithPopup
      firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a Facebook Access Token. You can use it to access the Facebook API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
      }).catch(function(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 提供方的 OAuth 令牌,该令牌可用于通过 Facebook API 提取额外数据。

      您还可以通过这种方法捕捉并处理错误。要获取错误代码列表,请参阅身份验证参考文档

    • 要用重定向至登录页面的方法登录,请调用 signInWithRedirect
      firebase.auth().signInWithRedirect(provider);
      
      然后,您还可以在页面加载时通过调用 getRedirectResult 检索 Facebook 提供方的 OAuth 令牌:
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          var token = result.credential.accessToken;
          // ...
        }
        // The signed-in user info.
        var user = result.user;
      }).catch(function(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;
        // ...
      });
      
      您还可以通过这种方法捕捉并处理错误。要获取错误代码列表,请参阅身份验证参考文档

在 Chrome 扩展程序中进行 Firebase 身份验证

如果您正在构建 Chrome 扩展程序应用,则必须将 Chrome 扩展程序 ID 列入白名单:

  1. Firebase 控制台中打开您的项目。
  2. Authentication(身份验证)部分中,打开登录方法页面。
  3. 向“已获授权的网域”列表添加格式如下的 URI:
    chrome-extension://CHROME_EXTENSION_ID

由于 Chrome 扩展程序无法使用 HTTP 重定向,因此只能使用弹出式操作(signInWithPopuplinkWithPopup)。您应该从后台脚本而不是浏览器操作弹出窗口中调用这些方法,因为身份验证弹出窗口将取消浏览器操作弹出窗口。

在 Chrome 扩展程序的清单文件中,确保将 https://apis.google.com 网址加入到 content_security_policy 白名单中。

后续步骤

在用户首次登录后,系统会创建一个新的用户帐号,并将其与该用户登录时使用的凭据(即用户名、密码、电话号码或者身份验证提供方信息)相关联。此新帐号存储在您的 Firebase 项目中,无论用户采用何种方式登录,您项目中的每个应用都可以使用此帐号来识别用户。

  • 在您的应用中,建议采用在 Auth 对象上设置观察者的方式来了解用户的身份验证状态。您可以从 User 对象获取用户的个人资料基本信息。请参阅管理用户

  • 在您的 Firebase 实时数据库和 Cloud Storage 安全规则中,您可以从 auth 变量获取已登录用户的唯一用户 ID,然后用此 ID 来控制用户可以访问哪些数据。

您可以通过将身份验证提供方凭据关联至现有用户帐号,让用户可以使用多个身份验证提供方服务登录您的应用。

要让用户退出帐号,可调用 signOut

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

发送以下问题的反馈:

此网页
需要帮助?请访问我们的支持页面