简体中文
将你的自定义登录 UI 集成到 Logto Cloud
本教程将指导你创建并部署自己的自定义登录 UI 到 Logto Cloud。
Charles
Developer
Developer
本教程将指导你创建并部署自己的自定义登录 UI 到 Logto Cloud。
Logto 提供了一个开箱即用的登录体验 UI，涵盖了所有 Logto 功能，包括登录、注册、找回密码、单点登录 (SSO) 等。 用户也可以使用我们的"自定义 CSS"功能去定制登录体验 UI 的外观和感觉。
然而，部分用户依然希望深入定制他们的登录体验（包括 UI 和认证流程），以便与他们的品牌和特定业务需求相匹配。 我们听到了你们的声音！我们很高兴地宣布，Logto Cloud 已经推出了“自带 UI”功能。
在本教程中，我们将指导你如何创建并部署你自己的自定义登录 UI 到 Logto Cloud。
在开始之前，请确保你具有以下内容：
为简化流程，以下步骤将使用经典的“用户名和密码”登录方法。记得在 Logto 控制台中更改你的登录方法。
登录 UI 的最低要求是有一个 index.html 文件，其中包含至少一个用户名输入框、一个密码输入框和一个提交按钮的登录表单。
我使用 ChatGPT 生成了一个示例 HTML，这是我创建的一个粉色可爱的登录页面。
我为了简单起见省略了 CSS 样式，下面是 HTML 的简单代码：
你也可以从你喜欢的前端框架，如 Create React App、Next.js 或 Vue CLI 开始使用模板项目。
由于 Logto 是开源的，另一个建议是克隆 Logto Experience 项目，并修改代码以满足你的需求。这是一个完整功能的 Logto 内置登录体验 UI，使用 React 和 TypeScript 编写。
Logto tunnel CLI 是一个工具，它不仅可以服务你的 HTML 页面，还允许你在本地开发环境中与你的 HTML 页面与 Logto 的 Experience API 交互。
假设你的 index.html 页面位于 /path/to/your/custom-ui，你的 Logto 租户 ID 是 foobar，你可以这样运行命令：
或者，如果你使用的 UI 框架自带开发服务器，并且你的页面在 http://localhost:4000 提供服务，你可以这样运行命令：
运行命令后，隧道服务将在你的本地机器上启动，地址为 http://localhost:9000/。
前往你之前创建的应用程序，并将 Logto 端点从 https://foobar.logto.app/ 更改为 http://localhost:9000/ 在你的 Logto SDK 配置中。
让我们以我们的 React 示例项目为例：
在你的应用程序中点击“登录”按钮。你现在应该被重定向到你的自定义登录页面，而不是内置的 Logto 登录 UI。
在此步骤中，我们将在你的自定义 UI 中与 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 文档。
http://localhost:9000/ 上的自定义登录页面。一旦你在本地完成了自定义登录 UI 的开发和测试，可以将其部署到 Logto Cloud。 只需创建你自定义 UI 文件夹的 zip 文件，并将其上传到 Logto 控制台的“自定义 UI”部分。
上传后，保存更改，你的自定义登录 UI 将在你的 Logto Cloud 租户中上线，替换内置的 Logto 登录体验。
最后，回到你的应用程序，将端点 URI 改回你的 Logto 云端点：https://foobar.logto.app/。
这次，你可以停止 Logto tunnel 服务，你的应用程序现在应该可以直接与在线托管的自定义 UI 一起工作。
在本教程中，我们逐步演示了如何将自己实现的自定义登录 UI 部署到 Logto Cloud。
通过这个功能，你现在可以深入定制你的登录 UI 和认证流程，以便符合你的品牌和特定的业务需求。
祝编程愉快！🚀