跳到主要内容

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

对于 Logto Cloud 用户，我们让你可以轻松地将“自定义 UI”引入 Logto。Cloud 用户现在可以在 控制台 > 登录体验 > 品牌 > 自定义 UI 上传包含自定义 UI 资源的 zip 文件（查看 自定义 UI 页面了解更多详情）。

然而，在开发这样的自定义 UI 页面时，用户希望在上传到 Logto Cloud 之前在本地测试和调试代码。这个 CLI 命令帮助你设置一个本地隧道，并将以下三个实体连接在一起：你的 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，并且拥有有效的会话（cookies），允许你进一步与 Logto 体验 (Experience) API 交互。

编码愉快！

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