Saltar al contenido principal

Depura y prueba tu UI personalizada localmente

Para los usuarios de Logto Cloud, hemos facilitado la opción de "Trae tu propia UI" a Logto. Los usuarios de Cloud ahora pueden subir un archivo zip que contenga los recursos de la UI personalizada en Consola > Inicio de sesión y cuenta > Marca > Trae tu UI (Consulta la página de Trae tu UI para más detalles).

Sin embargo, al desarrollar estas páginas de UI personalizadas, los usuarios quieren probar y depurar el código localmente antes de subirlo a 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, como estás desarrollando tu propia UI personalizada de inicio de sesión, necesitas una forma de navegar a las páginas de UI personalizadas que se ejecutan en tu máquina local. Esto requiere un servicio de túnel local para interceptar las solicitudes salientes de tu aplicación y redirigirlas a tus páginas 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 siguiente diagrama de secuencia ilustra cómo funciona un flujo exitoso de "inicio de sesión" con tu UI personalizada y el servicio de túnel en funcionamiento:

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

Instrucciones​

Paso 1: Ejecuta el comando​

Suponiendo que tu tenant de Cloud es foobar, y tienes una página personalizada de inicio de sesión ejecutándose en tu servidor local de desarrollo 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 recursos html estáticos sin necesidad de ejecutarlos primero en un servidor de desarrollo. Solo asegúrate de que haya un index.html en la ruta que especifiques.

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 como ejemplo una aplicación React:

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

// endpoint: 'https://foobar.logto.app/', // endpoint original de Logto Cloud
const config: LogtoConfig = {
  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 usando 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 personalizada de inicio de sesión en lugar de la UI incorporada de Logto, junto con una sesión válida (cookies) que te permitirá interactuar con Logto Experience API.

¡Feliz programación!

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