跳到主要内容

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

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

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

为什么我需要这个？​

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

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

此外，你需要与 Logto 的体验 API 交互以认证用户和管理会话。此服务还将帮助转发这些体验 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 体验 API 交互。

编码愉快！