使用 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. 确保您拥有项目的以下一个或多个角色： Identity Platform Admin, Service Usage Admin

   检查角色

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

      转到 IAM
   2. 选择项目。

   3. 在主账号列中，找到您的电子邮件地址所在的行。

      如果您的电子邮件地址不在此列，则表示您没有任何角色。

   4. 在您的电子邮件地址所在的行对应的角色列中，检查角色列表是否包含所需的角色。

   授予角色

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

      转到 IAM
   2. 选择项目。
   3. 点击 授予访问权限。
   4. 在新的主账号字段中，输入您的电子邮件地址。
   5. 在选择角色列表中，选择一个角色。
   6. 如需授予其他角色，请点击 添加其他角色，然后添加其他各个角色。
   7. 点击 Save（保存）。

5. 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

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

7. 确保您拥有项目的以下一个或多个角色： Identity Platform Admin, Service Usage Admin

   检查角色

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

      转到 IAM
   2. 选择项目。

   3. 在主账号列中，找到您的电子邮件地址所在的行。

      如果您的电子邮件地址不在此列，则表示您没有任何角色。

   4. 在您的电子邮件地址所在的行对应的角色列中，检查角色列表是否包含所需的角色。

   授予角色

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

      转到 IAM
   2. 选择项目。
   3. 点击 授予访问权限。
   4. 在新的主账号字段中，输入您的电子邮件地址。
   5. 在选择角色列表中，选择一个角色。
   6. 如需授予其他角色，请点击 添加其他角色，然后添加其他各个角色。
   7. 点击 Save（保存）。

启用 Identity Platform

1. 在 Google Cloud 控制台中，转到 Cloud Marketplace 中的 Identity Platform 页面。

   前往 Identity Platform

2. 点击启用 Identity Platform。

配置电子邮件地址登录

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

   前往“身份平台提供方”

2. 在 Identity Providers（身份提供商）页面上，点击 Add a provider（添加提供商）。

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/10.12.2/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 控制台中，前往 Identity Providers（身份提供商）页面。

   前往“身份提供方”

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。此时会出现显示用户电子邮件的欢迎消息。

用户登录失败的次数有限制。多次快速登录失败的尝试都会导致用户暂时无法登录其账号。

如需详细了解其他 Identity Platform 限制，请参阅配额和限制。

清理

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

删除提供商和用户

如果您使用的是现有 Google Cloud 项目，请删除您创建的提供方和用户，以避免帐号产生费用：

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

   前往“身份提供方”

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

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

   前往“用户”

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

删除项目

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

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

警告：删除项目会产生以下影响

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

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

1. 在 Google Cloud 控制台中，进入管理资源页面。

   转到“管理资源”

2. 在项目列表中，选择要删除的项目，然后点击删除。
3. 在对话框中输入项目 ID，然后点击关闭以删除项目。

后续步骤

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

详细了解以下内容：

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

• 使用 OIDC 或 SAML 登录用户。

• 将用户从现有应用迁移到 Identity Platform。