快速入门:使用电子邮件和密码登录用户

本快速入门介绍如何使用 Identity Platform 让用户通过电子邮件和密码登录。

准备工作

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

    转到“项目选择器”

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

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

    转到“项目选择器”

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

启用 Identity Platform

  1. 转到 Cloud Console 中的 Identity Platform Marketplace 页面。

    转到 Identity Platform Marketplace 页面

  2. 点击启用 Identity Platform。Identity Platform 页面会显示在 Cloud Console 中。

配置电子邮件登录

  1. 转到 Cloud Console 中的 身份提供商页面。

    转到“身份提供商”页面

  2. 点击添加提供商

  3. 从提供商和企业联盟标准列表中选择电子邮件/密码

  4. 启用开关切换为开启

  5. 点击保存

创建用户

  1. 转到 Cloud Console 中的用户页面。

    转到“用户”页面

  2. 点击添加用户

  3. 输入电子邮件地址和密码。

  4. 点击保存。新用户会显示在用户列表中。

登录用户

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

  2. 添加两个基本 HTML 容器:

    <div>Identity Platform Quickstart</div>
    <div id="message">Loading...</div>
    
  3. 使用您的 API 密钥初始化 Identity Platform Client SDK:

    1. 转到 Cloud Console 中的 身份提供商页面。

      转到“身份提供商”页面

    2. 点击应用设置详情

    3. 将初始化代码复制到 index.html 中。类似如下所示:

      <script src="https://www.gstatic.com/firebasejs/9.6.5/firebase.js"></script>
      <script>
        // Initialize Identity Platform
        var config = {
          apiKey: "abcdefg123456",
          authDomain: "myproject.firebaseapp.com"
        };
        firebase.initializeApp(config);
      </script>
      
  4. 通过调用 signInWithEmailAndPassword() 登录用户,然后使用 onAuthStateChanged() 回调处理结果。在以下示例中,将 emailpassword 替换为您之前创建的用户的值:

    <script>
      var email = "example@gmail.com";
      var password = "hunter2";
    
      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>
    
  5. 在网络浏览器中启动 index.html。此时会出现显示用户电子邮件的欢迎消息。

恭喜!您已使用 Identity Platform 登录您的第一个用户。

后续步骤

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

详细了解如何使用这些方法: