Saltar al contenido principal

Depura y prueba tu UI personalizada localmente

Para los usuarios de Logto Cloud, hemos facilitado que puedas "Traer tu propia UI" a Logto. Los usuarios de Cloud ahora pueden cargar un archivo zip que contenga los activos de UI personalizados en Consola > Experiencia de inicio de sesión > Branding > Trae tu UI (Consulta la página de Trae tu UI para más detalles).

Sin embargo, al desarrollar dichas páginas de UI personalizadas, los usuarios quieren probar y depurar el código localmente antes de cargarlo en Logto Cloud. Este comando de CLI te ayuda a configurar un túnel local y conectar las siguientes 3 entidades juntas: tu endpoint de autenticación de Logto Cloud, tu aplicación y tu UI personalizada de inicio de sesión.

¿Por qué necesito esto?​

Por defecto, cuando haces clic en el botón de "inicio de sesión" en tu aplicación, serás dirigido a la página de inicio de sesión configurada en el endpoint de Logto. Un flujo de inicio de sesión exitoso se puede ilustrar de la siguiente manera:

Pero ahora, dado que estás desarrollando tu propia UI personalizada de inicio de sesión, necesitas una forma de navegar a las páginas de UI personalizadas de inicio de sesión que se ejecutan en tu máquina local en su lugar. Esto requiere un servicio de túnel local para interceptar las solicitudes salientes de tu aplicación y redirigirlas a tus páginas de UI personalizadas de inicio de sesión.

Además, necesitas interactuar con la Experience API de Logto para autenticar usuarios y gestionar sesiones. Este servicio también ayudará a reenviar estas solicitudes de Experience API a Logto Cloud para evitar problemas de CORS.

El diagrama de secuencia a continuación ilustra cómo funciona un flujo de "inicio de sesión" exitoso con tu UI personalizada y el servicio de túnel en su lugar:

Con el servicio de túnel en su lugar, ahora puedes desarrollar y probar tu UI personalizada de inicio de sesión localmente, sin necesidad de cargar los activos en Logto Cloud cada vez que realices un cambio.

Instrucciones​

Paso 1: Ejecuta el comando​

Suponiendo que tu ID de inquilino de Cloud es foobar, y tienes una página de inicio de sesión personalizada ejecutándose en tu servidor de desarrollo local en http://localhost:4000, entonces puedes ejecutar el comando de esta manera:

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

También funciona si tienes un dominio personalizado configurado en Logto:

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

Alternativamente, el comando también admite activos HTML estáticos sin necesidad de ejecutarlo primero en un servidor de desarrollo. Solo asegúrate de que haya un index.html en la ruta que especificaste.

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

Paso 2: Actualiza el URI del endpoint en tu aplicación​

Finalmente, ejecuta tu aplicación y configura su endpoint de Logto a la dirección del servicio de túnel http://localhost:9000/ en su lugar.

Tomemos una aplicación React como ejemplo:

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

const config: LogtoConfig = {
  // endpoint: 'https://foobar.logto.app/', // endpoint original de Logto Cloud
  endpoint: 'http://localhost:9000/', // dirección del servicio de túnel
  appId: '<your-application-id>',
};

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

Si estás utilizando inicio de sesión social, también necesitas actualizar el URI de redirección en la configuración de tu proveedor social a la dirección del servicio de túnel.

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

Si todo está configurado correctamente, cuando hagas clic en el botón de "inicio de sesión" en tu aplicación, deberías ser dirigido a tu página de inicio de sesión personalizada en lugar de la UI integrada de Logto, junto con una sesión válida (cookies) que te permita interactuar más con la Experience API de Logto.

¡Feliz codificación!

Automatiza la implementación de tu UI personalizada de inicio de sesión con el flujo de trabajo de GitHub Actions