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

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

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

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

准备工作

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

使用 Firebase SDK 处理登录流程

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

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

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

    Web version 9

    import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
    auth_google_provider_create.js

    Web version 8

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

    Web version 9

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

    Web version 8

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    google-signin.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({
  'login_hint': 'user@example.com'
});
    auth_google_provider_params.js

    Web version 8

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

      Web version 9

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

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

      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 来检索 Google 提供方的 OAuth 令牌：

      Web version 9

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

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