在 JavaScript 中使用 Google 登录服务进行身份验证

您可以将 Google 登录集成到您的应用中,让您的用户可使用自己的 Google 帐号进行 Firebase 身份验证。您可以使用 Firebase SDK 实施登录流程,或者手动实施 Google 登录流程,并将取得的 ID 令牌传递给 Firebase,从而集成 Google 登录。

开始前的准备工作

  1. 将 Firebase 添加至您的 JavaScript 项目
  2. 在 Firebase 控制台中启用 Google 登录:
    1. Firebase 控制台中,打开身份验证 (Authentication) 部分。
    2. 登录方法标签中,启用 Google 登录方法并点击保存

使用 Firebase SDK 处理登录流程

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

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

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

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

    • 要用重定向至登录页面的方法登录,请调用 signInWithRedirect
      firebase.auth().signInWithRedirect(provider);
      
      然后,您还可以在页面加载时通过调用 getRedirectResult 来检索 Google 提供商的 OAuth 令牌:
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // This gives you a Google Access Token. You can use it to access the Google 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 扩展程序才能使用弹出式操作(signInWithPopuplinkWithPopup),因为 Chrome 扩展程序无法使用 HTTP 重定向。您应该从后台脚本而不是浏览器操作弹出窗口中调用这些方法,因为身份验证弹出窗口将取消浏览器操作弹出窗口。

后续步骤

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

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

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

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

要让用户退出登录,可调用 signOut

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

发送以下问题的反馈:

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