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

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

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

---

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

操作演示

---

准备工作

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

2. 在 Google Cloud Console 中的项目选择器页面上，选择或创建一个 Google Cloud 项目。

   注意：如果您不打算保留在此过程中创建的资源，请创建新的项目，而不要选择现有的项目。完成本教程介绍的步骤后，您可以删除所创建的项目，并移除与该项目关联的所有资源。

   转到“项目选择器”

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. 在 Google Cloud Console 中的项目选择器页面上，选择或创建一个 Google Cloud 项目。

   注意：如果您不打算保留在此过程中创建的资源，请创建新的项目，而不要选择现有的项目。完成本教程介绍的步骤后，您可以删除所创建的项目，并移除与该项目关联的所有资源。

   转到“项目选择器”

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. 在身份提供方页面上，点击添加提供方。

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

4. 点击已启用，将其切换为开启状态。

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

创建用户

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.11.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 或创建 React 应用），则可以跳过此步骤。如需了解详情，请参阅我们关于模块捆绑的指南。

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

失败的用户登录尝试存在限制。 多次尝试登录失败后，用户可能会暂时无法访问自己的帐号。

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

清理

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

删除提供商和用户

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

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

   转到“身份提供方”

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。