通过 Identity Platform 让用户使用电子邮件登录
了解如何使用 Identity Platform 让用户通过 电子邮件地址和密码。
如需在 Google Cloud 控制台中直接遵循有关此任务的分步指导,请点击操作演示:
准备工作
- 登录您的 Google Cloud 账号。如果您是 Google Cloud 新手,请创建一个账号来评估我们的产品在实际场景中的表现。新客户还可获享 $300 赠金,用于运行、测试和部署工作负载。
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
确保您拥有项目的以下一个或多个角色: Identity Platform Admin, Service Usage Admin
检查角色
-
在 Google Cloud 控制台中,前往 IAM 页面。
转到 IAM - 选择项目。
-
在主账号列中,找到您的电子邮件地址所在的行。
如果您的电子邮件地址不在此列,则表示您没有任何角色。
- 在您的电子邮件地址所在的行对应的角色列中,检查角色列表是否包含所需的角色。
授予角色
-
在 Google Cloud 控制台中,前往 IAM 页面。
转到 IAM - 选择项目。
- 点击 授予访问权限。
- 在新的主账号字段中,输入您的电子邮件地址。
- 在选择角色列表中,选择一个角色。
- 如需授予其他角色,请点击 添加其他角色,然后添加其他各个角色。
- 点击 Save(保存)。
-
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
确保您拥有项目的以下一个或多个角色: Identity Platform Admin, Service Usage Admin
检查角色
-
在 Google Cloud 控制台中,前往 IAM 页面。
转到 IAM - 选择项目。
-
在主账号列中,找到您的电子邮件地址所在的行。
如果您的电子邮件地址不在此列,则表示您没有任何角色。
- 在您的电子邮件地址所在的行对应的角色列中,检查角色列表是否包含所需的角色。
授予角色
-
在 Google Cloud 控制台中,前往 IAM 页面。
转到 IAM - 选择项目。
- 点击 授予访问权限。
- 在新的主账号字段中,输入您的电子邮件地址。
- 在选择角色列表中,选择一个角色。
- 如需授予其他角色,请点击 添加其他角色,然后添加其他各个角色。
- 点击 Save(保存)。
-
启用 Identity Platform
在 Google Cloud 控制台中,前往 Identity Platform 页面 Cloud Marketplace。
<ph type="x-smartling-placeholder"></ph> 前往 Identity Platform
点击启用 Identity Platform。
配置电子邮件地址登录
前往身份提供商页面。
前往“身份平台提供方” 在 Identity Providers(身份提供商)页面上,点击 Add a provider(添加提供商)。
在选择提供商列表中,选择
电子邮件地址/密码。点击已启用切换开关将其开启。
如需保存提供方设置,请点击 Save。
创建用户
在 Google Cloud 控制台中,前往用户页面。
<ph type="x-smartling-placeholder"></ph> 前往“用户”
点击添加用户。
在电子邮件地址字段中,输入电子邮件地址和密码。请注意 值,因为您在后续步骤中会用到这些值。
如需添加用户,请点击添加。用户 页面。
登录用户
用户登录的步骤因应用使用的 SDK 版本而异。 确保您按照适用于您的应用的正确步骤操作。
SDK v9(模块化)
安装 SDK 并初始化 Firebase
Firebase JS SDK 版本 9 使用 JavaScript 模块 格式。
此工作流使用 npm,并且需要模块打包器或 JavaScript 框架 因为 v9 SDK 经过优化, 模块打包器 消除未使用的代码(摇树优化)并缩减 SDK 大小。
如需使用 v9 SDK,请执行以下步骤:
在项目目录中,使用 npm 安装 Firebase:
npm install firebase
在您的应用中,初始化 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 服务。
在 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
:您在本指南前面部分创建的用户密码。
使用模块打包器缩减大小
Firebase Web SDK 设计为可与模块打包器结合使用,用于移除任何未使用的代码(摇树优化)。对于正式版应用,我们强烈建议您使用此方法。Angular CLI 等工具 Next.js、Vue CLI、 或 创建 React 应用 自动处理通过 npm 和 导入代码库
例如,您可以使用 Webpack
生成包含捆绑的应用和依赖项代码的 dist
文件夹。请参阅将模块打包器与 Firebase 搭配使用
。
将 JavaScript 导入到网页中
创建名为
index.html
的新文件。添加两个基本 HTML 容器并导入捆绑的 js。
<script defer src="js/bundled.js"></script> <div>Identity Platform Quickstart</div> <div id="message">Loading...</div>
在网络浏览器中启动
index.html
。此时屏幕上会出现一条显示用户电子邮件地址的欢迎消息。
SDK v8(旧版)
创建网页
在本地机器上,创建一个名为
index.html
的新文件。在 HTML 文件中,添加两个 HTML 容器:
<div>Identity Platform Quickstart</div> <div id="message">Loading...</div>
使用您的 API 密钥初始化 Identity Platform Client SDK
在 Google Cloud 控制台中,前往 Identity Providers(身份提供商)页面。
<ph type="x-smartling-placeholder"></ph> 前往“身份提供方”
点击
应用程序 设置详细信息 。将初始化代码复制到
index.html
中。
登录用户
如需登录该用户,请将以下代码复制到
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:您之前创建的用户的密码
在网络浏览器中打开
index.html
。此时会出现显示用户电子邮件的欢迎消息。
如需详细了解其他 Identity Platform 限制,请参阅配额和限制。
清理
为避免因本页中使用的资源导致您的 Google Cloud 账号产生费用,请按照以下步骤操作。
删除提供商和用户
如果您使用的是现有 Google Cloud 项目,请删除提供方和用户 为避免系统向您的账号收取费用:
在 Google Cloud 控制台中,前往 Identity Providers(身份提供商)页面。
<ph type="x-smartling-placeholder"></ph> 前往“身份提供方”
要删除提供商,请点击
删除 提供商。如需确认删除,请点击删除。在 Google Cloud 控制台中,前往用户页面。
<ph type="x-smartling-placeholder"></ph> 前往“用户”
要删除您创建的用户,请点击
删除 用户。如需确认删除,请点击删除。
删除项目
为了避免产生费用,最简单的方法是删除您为本教程创建的项目。
如需删除项目,请执行以下操作:
- 在 Google Cloud 控制台中,进入管理资源页面。
- 在项目列表中,选择要删除的项目,然后点击删除。
- 在对话框中输入项目 ID,然后点击关闭以删除项目。
后续步骤
在真实应用中,您的用户将使用专用注册页面进行注册,并且 然后通过输入电子邮件地址和密码登录。Identity Platform 提供 预构建的身份验证界面 也可以用于构建自己的网页您可能还希望 支持其他登录方法,例如社交服务提供商(如 Facebook 或 Google)、手机号码、OIDC 或 SAML。
详细了解以下内容:
使用 JavaScript、Android、iOS、C++ 或 Unity 登录用户。
从现有应用中迁移用户 Identity Platform