使用 Google 进行身份验证 (JavaScript)

您可以让用户使用他们的 Google 帐号进行 Firebase 身份验证。 您可以使用 Firebase SDK 执行 Google 登录流程，也可以利用“使用 Google 帐号登录”库并将生成的 ID 令牌传递给 Firebase 来手动执行登录流程。

准备工作

  1. 将 Firebase 添加至您的 JavaScript 项目。
  2. 在 Firebase 控制台中启用 Google 登录方法：
    1. 在 Firebase 控制台中，打开 Auth 部分。
    2. 在登录方法标签页中，启用 Google 登录方法并点击保存。

使用 Firebase SDK 处理登录流程

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

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

  1. 创建 Google 提供方对象实例：

    Web 模块化 API

    import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
    auth_google_provider_create.js

    Web 命名空间型 API

    var provider = new firebase.auth.GoogleAuthProvider();
    google-signin.js
  2. 可选：指定您希望向身份验证提供方申请的额外 OAuth 2.0 范围。如需添加范围，请调用 addScope。例如：

    Web 模块化 API

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    auth_google_provider_scopes.js

    Web 命名空间型 API

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    google-signin.js
    请参阅身份验证提供方文档。
  3. 可选：如需将提供方的 OAuth 流程本地化为用户偏好的语言，而不明确传递相关自定义 OAuth 参数，请在启动 OAuth 流程之前先更新 Auth 实例中的语言代码。例如：

    Web 模块化 API

    import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
    auth_set_language_code.js

    Web 命名空间型 API

    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 模块化 API

    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    auth_google_provider_params.js

    Web 命名空间型 API

    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    google-signin.js
    禁止使用保留的必需 OAuth 参数，系统将忽略此类参数。如需了解详情，请参阅身份验证提供方参考文档。
  5. 使用 Google 提供方对象进行 Firebase 身份验证。您可以打开弹出式窗口或将用户重定向至登录页面，提示用户使用自己的 Google 帐号登录。在移动设备上最好使用重定向方法。
    • 如需使用弹出式窗口登录，请调用 signInWithPopup：

      Web 模块化 API

      import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access the Google API.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    // The signed-in user info.
    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;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
      auth_google_signin_popup.js

      Web 命名空间型 API

      firebase.auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a Google Access Token. You can use it to access the Google 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;
    // ...
  });
      google-signin.js
      此外请注意，您可以检索 Google 提供方的 OAuth 令牌，使用该令牌可通过 Google API 提取额外数据。

      您还可以在此处捕获并处理错误。如需获取错误代码列表，请参阅身份验证参考文档。

    • 需重定向到登录页面进行登录，请调用 signInWithRedirect：使用“signInWithRedirect”时，请遵循最佳实践。

      Web 模块化 API

      import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js

      Web 命名空间型 API

      firebase.auth().signInWithRedirect(provider);
      index.js
      此外，您还可以在页面加载时，调用 getRedirectResult 来检索 Google 提供方的 OAuth 令牌：

      Web 模块化 API

      import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access Google APIs.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    // The signed-in user info.
    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;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
      auth_google_signin_redirect_result.js

      Web 命名空间型 API

      firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a Google Access Token. You can use it to access the Google 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;
    // ...
  });
      google-signin.js
      您还可以在此处捕获并处理错误。如需获取错误代码列表，请参阅身份验证参考文档。

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

如果您是在构建 Chrome 扩展程序应用，则必须添加 Chrome 扩展程序 ID：

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

由于 Chrome 扩展程序无法使用 HTTP 重定向，因此只能使用弹出式操作方式（signInWithPopup、linkWithPopup 和 reauthenticateWithPopup）。您应该从后台页面脚本而不是弹出式窗口（浏览器操作）中调用这些方法，因为身份验证的弹出式窗口将取消浏览器操作的弹出式窗口。弹出式操作方式只能在使用 Manifest V2 的扩展程序中使用。较新的 Manifest V3 只允许采用 Service Worker 形式的后台脚本，无法执行弹出式操作方式。

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

后续步骤

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

  • 在您的应用中，建议通过在 Auth 对象上设置观测者 (observer) 来了解用户的身份验证状态。然后，您便可从 User 对象获取用户的基本个人资料信息。请参阅管理用户。

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

您可以将多个身份验证提供方凭据与一个现有用户帐号关联，让用户可以使用多个身份验证提供方登录您的应用。

如需让用户退出登录，请调用 signOut：

Web 模块化 API

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 命名空间型 API

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