简体中文
  • custom-ui
  • bring-your-own-ui
  • custom-sign-in
  • custom-auth-flow

将你自己的登录界面引入 Logto Cloud

本教程将指导你创建并部署你自己的定制登录界面到 Logto Cloud。

Charles
Charles
Developer

背景

Logto 提供了一个开箱即用的登录体验界面，涵盖了所有 Logto 功能，包括登录、注册、密码恢复、单点登录 (SSO) 等。 用户还可以使用我们的“自定义 CSS”功能自定义登录体验界面的外观和感觉。

然而，一些用户仍然希望深度定制他们的登录体验（包括界面和身份验证流程），以匹配他们的品牌和特定业务需求。 我们听到了你的需求！我们非常兴奋地宣布，“Bring your own UI” 功能现在已在 Logto Cloud 中可用。

在本教程中，我们将指导你如何创建并将你自己的定制登录界面部署到 Logto Cloud。

前提条件

在你开始之前，请确保你具备以下条件:

为了简单起见，我们将在以下步骤中使用经典的“用户名 & 密码”登录方法。记得在 Logto 控制台中更改你的登录方法。

用户名密码登录

创建你的定制登录界面

登录界面的最低要求是拥有一个 index.html 文件，其中包含一个登录表单，至少要有一个用户名输入框、一个密码输入框和一个提交按钮。 我使用 ChatGPT 生成了一个示例 HTML，结果得到了这个粉嫩可爱的登录页面。

自定义登录页面

为了简单起见，我省略了 CSS 样式，这里是简单的 HTML 代码:

你也可以从你喜欢的前端框架，如 Create React App、Next.js 或 Vue CLI 的模板开始。

由于 Logto 是开源的，另一个推荐的方式是克隆 Logto Experience 项目，并根据你的需求修改代码。这是由 React 和 TypeScript 编写的 Logto 内置完整功能的登录体验界面。

设置 Logto tunnel CLI

Logto tunnel CLI 是一个不仅能为你的 HTML 页面提供服务，还可以让你在本地开发环境中与 Logto 的体验 API 进行交互的工具。

假设你的 index.html 页面位于 /path/to/your/custom-ui，并且你的 Logto tenant ID 是 foobar，你可以这样运行命令:

或者，如果你正在使用一个带有内置开发服务器的 UI 框架，并且你的页面在 http://localhost:4000 提供服务，你可以这样运行命令:

运行命令后，隧道服务将在本地机器的 http://localhost:9000/ 启动。

从你的应用触发登录

前往你之前创建的应用，并在 Logto SDK 配置中将 Logto 端点从 https://foobar.logto.app/ 更改为 http://localhost:9000/。

以我们的 React 示例项目为例:

在你的应用程序中点击“登录”按钮。你应该会被重定向到你自定义的登录页面，而不是看到内置的 Logto 登录界面。

与 Logto Experience API 的交互

在此步骤中，我们将在你的自定义界面中与 Logto Experience API 进行交互。首先，让我们创建一个 script.js 文件，并在你的 index.html 中添加引用。

将以下代码放入你的 script.js 文件中。

此脚本将借助这些 API 完成用户名和密码登录流程:

  • PUT /api/experience - 启动登录交互
  • POST /api/experience/verification/password - 验证用户名和密码
  • POST /api/experience/identification - 为当前交互识别用户
  • POST /api/experience/submit - 提交登录交互

更多详情请参阅 Logto Experience API 文档。

测试你的自定义登录页面

  1. 打开你的应用，点击“登录”按钮。
  2. 你应该会被重定向到你的自定义登录页面 http://localhost:9000/。
  3. 输入用户名和密码，然后点击“提交”按钮。
  4. 如果一切设置正常，你应该会被重定向回你的应用，并显示已验证的用户信息。

将你的定制登录界面部署到 Logto Cloud

一旦你在本地完成了自定义登录界面的开发和测试，你可以将其部署到 Logto Cloud。 只需创建一个包含自定义界面的 zip 文件，并将其上传到 Logto 控制台的“自定义 UI”部分。

上传自定义 UI

上传后保存更改，你的自定义登录界面将在你的 Logto Cloud 租户中上线，取代内置的 Logto 登录体验。

自定义 UI 已启用

最后，回到你的应用程序，并将端点 URI 改回你的 Logto cloud 端点: https://foobar.logto.app/。 这次，你可以停止 Logto 隧道服务，现在你的应用程序将直接与线上托管的自定义界面配合工作。

结论

在本教程中，我们逐步介绍了如何将自定义登录界面实现并部署到 Logto Cloud。

通过这个功能，你现在可以深度定制你的登录界面和身份验证流程，以匹配你的品牌和特定业务需求。

祝编码愉快！ 🚀

免费试用 Logto 云