通过 Identity Platform 让用户使用电子邮件登录

通过 Identity Platform 让用户使用电子邮件登录

了解如何使用 Identity Platform 让用户通过电子邮件地址和密码登录。

---

如需在 Google Cloud 控制台中直接遵循有关此任务的分步指导，请点击操作演示：

操作演示

---

准备工作

1. 登录您的 Google Cloud 账号。如果您是 Google Cloud 新手，请创建一个账号来评估我们的产品在实际场景中的表现。新客户还可获享 $300 赠金，用于运行、测试和部署工作负载。

2. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

   Go to project selector

3. 确保您的 Google Cloud 项目已启用结算功能。

4. Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

   Check for the roles

   1. In the Google Cloud console, go to the IAM page.

      Go to IAM
   2. Select the project.

   3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

   4. For all rows that specify or include you, check the Role colunn to see whether the list of roles includes the required roles.

   Grant the roles

   1. In the Google Cloud console, go to the IAM page.

      前往 IAM
   2. 选择项目。
   3. 点击 授予访问权限。

   4. 在新的主账号字段中，输入您的用户标识符。 这通常是 Google 账号的电子邮件地址。

   5. 在选择角色列表中，选择一个角色。
   6. 如需授予其他角色，请点击 添加其他角色，然后添加其他各个角色。
   7. 点击保存。

   8. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

      Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

      Go to project selector

   9. 确保您的 Google Cloud 项目已启用结算功能。

   10. Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

       Check for the roles

       1. In the Google Cloud console, go to the IAM page.

          Go to IAM
       2. Select the project.

       3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

       4. For all rows that specify or include you, check the Role colunn to see whether the list of roles includes the required roles.

       Grant the roles

       1. In the Google Cloud console, go to the IAM page.

          前往 IAM
       2. 选择项目。
       3. 点击 授予访问权限。

       4. 在新的主账号字段中，输入您的用户标识符。 这通常是 Google 账号的电子邮件地址。

       5. 在选择角色列表中，选择一个角色。
       6. 如需授予其他角色，请点击 添加其他角色，然后添加其他各个角色。
       7. 点击保存。

       启用 Identity Platform

       1. 在 Google Cloud 控制台中，前往 Identity Platform 页面 Cloud Marketplace。

          前往 Identity Platform

       2. 点击启用 Identity Platform。

配置电子邮件地址登录

1. 前往身份提供商页面。

   转到“身份平台提供方”

2. 在身份提供商页面上，点击添加提供商。

3. 在选择一个提供商列表中，选择 电子邮件地址/密码。

4. 点击已启用切换开关将其开启。

5. 如需保存提供方设置，请点击 Save。

创建用户

1. 在 Google Cloud 控制台中，前往用户页面。

   前往“用户”页面

2. 点击添加用户。

3. 在电子邮件地址字段中，输入电子邮件地址和密码。请记下这两个值，因为您在后面的步骤中需要用到它们。

4. 如需添加用户，请点击添加。用户页面上会列出新用户。

登录用户

用户登录的步骤因应用使用的 SDK 版本而异。 确保您针对自己的应用采取了正确的步骤。

注意：强烈建议您使用 v9 SDK，尤其是对于正式版应用。如果您需要获得其他 SDK 管理选项（例如 window.firebase）方面的支持，请参阅从版本 8 升级到模块化 Web SDK 或添加 Firebase 的其他方法。

SDK v9（模块化）

安装 SDK 并初始化 Firebase

Firebase JS SDK 版本 9 使用 JavaScript 模块格式。

此工作流使用 npm，并且需要模块打包器或 JavaScript 框架 因为 v9 SDK 经过优化， 模块打包器 消除未使用的代码（摇树优化）并缩减 SDK 大小。

如需使用 v9 SDK，请执行以下步骤：

1. 在项目目录中，使用 npm 安装 Firebase：

   npm install firebase

2. 在您的应用中，初始化 Firebase 并创建一个 Firebase 应用对象：

   import { initializeApp } from 'firebase/app';
   
   const firebaseConfig = {
       apiKey: "API_KEY",
       authDomain: "AUTH_DOMAIN"
   };
   
   const app = initializeApp(firebaseConfig);

   替换以下内容：

   • API_KEY：您的 Firebase 项目的 apiKey。
   • AUTH_DOMAIN：您的 Firebase 项目的 authDomain。

   您可以在应用的 Firebase 项目配置中找到这些值。

   Firebase 应用是一种类似于容器的对象，用于存储常见配置，并在各种 Firebase 服务之间共享身份验证凭据。在代码中初始化 Firebase 应用对象后，可以添加并开始使用 Firebase 服务。

   如果您使用 ESM 并希望使用浏览器模块，请将所有 import 行替换为以下格式：
   import { } from 'https://www.gstatic.com/firebasejs/11.0.0/firebase-SERVICE.js',
   其中 SERVICE 是 SDK 名称，例如 firebase-firestore。

   您可以使用浏览器模块快速上手，但我们建议您在生产环境中使用模块打包器。

在 JavaScript 中访问 Identity Platform

现在，您已初始化 Firebase SDK，可以在应用中的任何位置使用它。例如，下面的应用会尝试登录硬编码的用户，并在网页上显示结果。

import { initializeApp } from 'firebase/app';
import {
  onAuthStateChanged,
  signInWithEmailAndPassword,
  getAuth
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app, {/* extra options */ });

document.addEventListener("DOMContentLoaded", () => {
  onAuthStateChanged(auth, (user) => {
      if (user) {
          document.getElementById("message").innerHTML = "Welcome, " + user.email;
      }
      else {
          document.getElementById("message").innerHTML = "No user signed in.";
      }
  });
  signIn();
});

function signIn() {
  const email = "EMAIL_ID";
  const password = "PASSWORD";
  signInWithEmailAndPassword(auth, email, password)
      .catch((error) => {
          document.getElementById("message").innerHTML = error.message;
      });
}

替换以下内容：

• API_KEY：您的 Firebase 项目的 apiKey。
• AUTH_DOMAIN：您的 Firebase 项目的 authDomain。
• EMAIL_ID：您在本指南前面部分中创建的用户电子邮件地址。
• PASSWORD：您在本指南前面部分创建的用户密码。

使用模块打包器缩减大小

注意：如果您使用的是 JavaScript 框架 CLI 工具（如 Angular CLI、Next.js、Vue CLI 或 Create React App），则可以跳过此步骤。如需了解详情，请参阅我们有关模块打包的指南。

Firebase Web SDK 设计为可与模块打包器结合使用，用于移除任何未使用的代码（摇树优化）。对于正式版应用，我们强烈建议您使用此方法。对于通过 npm 安装并导入您的代码库的库，Angular CLI、Next.js、Vue CLI 或 Create React App 等工具会自动处理模块打包事宜。

例如，您可以使用 Webpack 生成包含捆绑的应用和依赖项代码的 dist 文件夹。请参阅将模块打包器与 Firebase 搭配使用 。

将 JavaScript 导入您的网页

1. 创建名为 index.html 的新文件。

2. 添加两个基本 HTML 容器并导入捆绑的 js。

   <script defer src="js/bundled.js"></script>
   <div>Identity Platform Quickstart</div>
   <div id="message">Loading...</div>
   

3. 在网络浏览器中启动 index.html。此时屏幕上会出现一条显示用户电子邮件地址的欢迎消息。

SDK v8（旧版）

创建网页

1. 在本地机器上，创建一个名为 index.html 的新文件。

2. 在 HTML 文件中，添加两个 HTML 容器：

   <div>Identity Platform Quickstart</div>
   <div id="message">Loading...</div>
   

使用您的 API 密钥初始化 Identity Platform Client SDK

1. 在 Google Cloud 控制台中，前往身份提供商页面。

   前往“身份提供商”页面

2. 点击应用设置详情。

3. 将初始化代码复制到 index.html 中。

登录用户

1. 如需登录该用户，请将以下代码复制到 index.html 中：

   <script>
     var email = "EMAIL_ID";
     var password = "PASSWORD";
   
     firebase.auth().onAuthStateChanged(function(user) {
       if (user) {
         document.getElementById("message").innerHTML = "Welcome, " + user.email;
       } else {
         document.getElementById("message").innerHTML = "No user signed in.";
       }
     });
   
     firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
       document.getElementById("message").innerHTML = error.message;
     });
   </script>
   

   此代码会调用 signInWithEmailAndPassword()，然后处理结果 与 onAuthStateChanged() 回调相关联。

   替换以下内容：

   • EMAIL_ID：您之前创建的用户的电子邮件地址
   • PASSWORD：您之前创建的用户的密码

2. 在网络浏览器中打开 index.html。此时会出现显示用户电子邮件的欢迎消息。

用户登录尝试失败次数上限。 如果用户在短时间内连续尝试登录失败，系统会暂时锁定其账号。

如需详细了解身份平台的其他限制，请参阅配额和限制。

清理

为避免因本页中使用的资源导致您的 Google Cloud 账号产生费用，请按照以下步骤操作。

删除提供商和用户

如果您使用的是现有 Google Cloud 项目，请删除提供方和用户 为避免系统向您的账号收取费用：

1. 在 Google Cloud 控制台中，前往 Identity Providers（身份提供商）页面。

   前往“身份提供方”

2. 如需删除提供商，请点击提供商名称旁边的 Delete（删除）。如需确认删除，请点击删除。

3. 在 Google Cloud 控制台中，前往用户页面。

   前往“用户”页面

4. 如需删除您创建的用户，请点击用户名称旁边的删除。如需确认删除，请点击删除。

删除项目

为了避免产生费用，最简单的方法是删除您为本教程创建的项目。

如需删除项目，请执行以下操作：

注意：删除项目会产生以下影响：

• 项目中的所有内容都会被删除。如果您将现有项目用于本文档中的任务，则删除该项目后，还将删除您已在该项目中完成的任何其他工作。
• 自定义项目 ID 丢失。创建此项目时，您可能创建了要在将来使用的自定义项目 ID。要保留使用该项目 ID 的网址（例如 appspot.com 网址），请删除项目内的所选资源，而不是删除整个项目。

如果您打算探索多个架构、教程或快速入门，则重复使用项目可以帮助您避免超出项目配额限制。

1. In the Google Cloud console, go to the Manage resources page.

   Go to Manage resources

2. In the project list, select the project that you want to delete, and then click Delete.
3. In the dialog, type the project ID, and then click Shut down to delete the project.

后续步骤

在真实应用中，您的用户将使用专用注册页面进行注册，然后通过输入其电子邮件地址和密码进行登录。Identity Platform 提供了一个预构建的身份验证界面，可用于这些页面，您也可以构建自己的身份验证界面。您可能还想支持其他登录方法，例如社交服务提供商（如 Facebook 或 Google）、手机号码、OIDC 或 SAML。

详细了解以下内容：

• 使用 JavaScript、Android、iOS、C++ 或 Unity 登录用户。

• 让用户通过 OIDC 或 SAML 登录。

• 从现有应用中迁移用户 Identity Platform