简体中文

    将你的自定义登录 UI 集成到 Logto Cloud

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

    Charles
    Charles
    Developer

    背景

    Logto 提供了一个开箱即用的登录体验 UI，涵盖了所有 Logto 功能，包括登录、注册、找回密码、单点登录 (SSO) 等。 用户也可以使用我们的"自定义 CSS"功能去定制登录体验 UI 的外观和感觉。

    然而，部分用户依然希望深入定制他们的登录体验（包括 UI 和认证流程），以便与他们的品牌和特定业务需求相匹配。 我们听到了你们的声音！我们很高兴地宣布，Logto Cloud 已经推出了“自带 UI”功能。

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

    前提条件

    在开始之前，请确保你具有以下内容：

    为简化流程，以下步骤将使用经典的“用户名和密码”登录方法。记得在 Logto 控制台中更改你的登录方法。

    用户名密码登录

    创建你的自定义登录 UI

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

    自定义登录页面

    我为了简单起见省略了 CSS 样式，下面是 HTML 的简单代码：

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

    由于 Logto 是开源的，另一个建议是克隆 Logto Experience 项目，并修改代码以满足你的需求。这是一个完整功能的 Logto 内置登录体验 UI，使用 React 和 TypeScript 编写。

    设置 Logto tunnel CLI

    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。

    与 Logto Experience API 交互

    在此步骤中，我们将在你的自定义 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 文档。

    测试你的自定义登录页面

    1. 前往你的应用程序并点击“登录”按钮。
    2. 你应该被重定向到 http://localhost:9000/ 上的自定义登录页面。
    3. 输入用户名和密码，然后点击“提交”按钮。
    4. 如果一切设置正确，你应该被重定向回你的应用程序，并获得已认证的用户信息。

    部署你的自定义登录 UI 到 Logto Cloud

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

    上传自定义 UI

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

    自定义 UI 启用

    最后，回到你的应用程序，将端点 URI 改回你的 Logto 云端点：https://foobar.logto.app/。 这次，你可以停止 Logto tunnel 服务，你的应用程序现在应该可以直接与在线托管的自定义 UI 一起工作。

    结论

    在本教程中，我们逐步演示了如何将自己实现的自定义登录 UI 部署到 Logto Cloud。

    通过这个功能，你现在可以深入定制你的登录 UI 和认证流程，以便符合你的品牌和特定的业务需求。

    祝编程愉快！🚀

    免费试用 Logto 云