跳到主要内容

在本地调试和测试你的自定义 UI

对于 Logto Cloud 用户，我们让你可以轻松地将“自定义 UI”带入 Logto。Cloud 用户现在可以在 控制台 > 登录与账户 > 品牌设置 > 自定义 UI 上传包含自定义 UI 资源的 zip 文件（详细信息请查看 自定义 UI 页面）。

然而，在开发这些自定义 UI 页面时，用户希望在上传到 Logto Cloud 之前，能够在本地测试和调试代码。这个 CLI 命令可以帮助你建立本地隧道，并将以下 3 个实体连接在一起： 你的 Logto Cloud 认证 (Authentication) 端点、你的应用程序，以及你的自定义登录 UI。

为什么需要这个？​

默认情况下，当你在应用程序中点击“登录”按钮时，会跳转到 Logto 端点配置的登录页面。一次成功的登录流程可以如下图所示：

但现在由于你正在开发自己的自定义登录 UI，你需要一种方式跳转到本地运行的自定义登录 UI 页面。 这就需要一个本地隧道服务来拦截来自你应用程序的外部请求，并将其重定向到你的自定义登录 UI 页面。

此外，你还需要与 Logto 的体验 (Experience) API 交互，以认证 (Authentication) 用户并管理会话。 该服务还会帮助你将这些体验 (Experience) API 请求转发到 Logto Cloud，以避免 CORS 问题。

下方的时序图展示了在有自定义 UI 和隧道服务的情况下，一个成功的“登录”流程是如何运作的：

有了隧道服务，你现在可以在本地开发和测试你的自定义登录 UI，无需每次更改都上传资源到 Logto Cloud。

操作指南​

步骤 1：执行命令​

假设你的 Cloud 租户 ID 是 foobar，并且你有一个自定义登录页面在本地开发服务器 http://localhost:4000 上运行，那么你可以这样执行命令：

logto-tunnel -p 9000 --experience-uri http://localhost:4000/ --endpoint https://foobar.logto.app/

如果你在 Logto 中配置了自定义域名，也同样适用：

logto-tunnel -p 9000 --experience-uri http://localhost:4000/ --endpoint https://your.custom.domain/

另外，该命令也支持静态 html 资源，无需先在开发服务器上运行。只需确保你指定的路径下有 index.html 文件即可。

logto-tunnel -p 9000 --experience-path /path/to/your/static/files --endpoint https://foobar.logto.app/

步骤 2：在你的应用程序中更新端点 URI​

最后，运行你的应用程序，并将其 Logto 端点设置为隧道服务地址 http://localhost:9000/。

以 React 应用为例：

import { LogtoProvider, LogtoConfig } from '@logto/react';

const config: LogtoConfig = {
  // endpoint: 'https://foobar.logto.app/', // 原 Logto Cloud 端点
  endpoint: 'http://localhost:9000/', // 隧道服务地址
  appId: '<your-application-id>',
};

const App = () => (
  <LogtoProvider config={config}>
    <YourAppContent />
  </LogtoProvider>
);

如果你使用了社交登录，还需要在社交平台的设置中将重定向 URI 更新为隧道服务地址。

http://localhost:9000/callback/<connector-id>

如果一切设置正确，当你在应用程序中点击“登录”按钮时，应该会跳转到你的自定义登录页面，而不是 Logto 内置 UI，并且会带有有效的会话（cookie），允许你进一步与 Logto 体验 (Experience) API 交互。

祝你编码愉快！

使用 GitHub Actions 工作流自动部署你的自定义登录 UI