Trae tu propia interfaz de usuario
Logto te permite traer tu propia interfaz de usuario para reemplazar completamente la interfaz de experiencia de inicio de sesión incorporada, además de las opciones de personalización de interfaz preconstruidas. Esta función te permite subir un archivo zip que contenga tus propios recursos de interfaz (HTML, CSS, JavaScript, imágenes, etc.), alojarlo en los servidores de Logto Cloud y usarlo como la experiencia de inicio de sesión para los usuarios de tu tenant.
Esta función requiere que tu interfaz personalizada sea compatible con aplicaciones de una sola página (SPA), y se recomienda usar siempre una compilación de producción para un rendimiento óptimo.
Explora la función de interfaz personalizada en Logto Console
Comienza con el proyecto oficial
La forma más rápida de iniciar una interfaz de inicio de sesión personalizada es clonar el proyecto Logto experience. Esta es la interfaz de experiencia de inicio de sesión incorporada de Logto que cubre todas las funciones y las mejores prácticas de Logto. Puedes personalizarla para adaptarla a tus necesidades.
Después de revisar el código, simplemente ejecuta el siguiente comando para compilar el proyecto:
pnpm install && pnpm build
Todo el proyecto Logto es un monorepo pnpm. Si deseas ejecutar el paquete experience de forma independiente (sin pnpm), reemplaza las dependencias workspace: en package.json por números de versión específicos (como ^1.0.0).
Una vez completada la compilación, encontrarás todos los recursos compilados en el directorio dist. Luego crea un archivo ZIP del directorio dist: este archivo se usará para subirlo a Logto Cloud más adelante.
Requisitos de los recursos de la interfaz personalizada
Antes de subir tus recursos personalizados, asegúrate de que cumplan con los siguientes requisitos:
- Los recursos a subir deben estar empaquetados en un solo archivo zip.
- El archivo zip debe contener un archivo
index.htmlen el directorio raíz. - El archivo zip no debe exceder los 20MB de tamaño.
- El archivo zip no debe contener ningún archivo que exceda los 10MB de tamaño.
- El archivo zip no debe contener más de 200 archivos en total.
Sube tus recursos personalizados
Procede con precaución al usar esta función en producción, ya que afectará inmediatamente la experiencia de inicio de sesión de tus usuarios.
- Navega a Console > Sign-in & account > Branding > Bring your UI.
- Haz clic para seleccionar o arrastra y suelta tu archivo zip creado en el paso anterior, y el proceso de carga comenzará automáticamente.
- Una vez completada la carga, guarda los cambios y tu interfaz personalizada estará disponible de inmediato.
- La ventana de "Vista previa de inicio de sesión" se desactivará cuando uses tu propia interfaz de inicio de sesión. Sin embargo, aún puedes hacer clic en el botón "Vista previa en vivo" para probar tu página de inicio de sesión personalizada en una nueva pestaña del navegador.
Configura fuentes CSP personalizadas
Logto aplica un encabezado Content Security Policy (CSP) a las páginas de interfaz personalizada. Si tu interfaz personalizada carga scripts de terceros o se conecta a servicios externos, agrega los origins adicionales permitidos en Console > Sign-in & account > Branding > Bring your UI.
Puedes configurar:
script-src: Permite orígenes de JavaScript module o script, como proveedores de CAPTCHA, analytics o tag manager.connect-src: Permite endpoints de red usados porfetch, XMLHttpRequest, EventSource y conexiones WebSocket.
Ejemplo:
{
"scriptSrc": ["https://scripts.example.com"],
"connectSrc": ["https://api.example.com", "wss://events.example.com"]
}
Usa origins HTTPS para ambas directives. connect-src también acepta origins wss:// para conexiones WebSocket. Logto agrega estas fuentes a la política de seguridad existente solo cuando tus recursos de interfaz personalizada están activos.
Desarrolla tu interfaz personalizada
Interactúa con Experience API
Tu interfaz personalizada necesita interactuar con la Experience API para realizar varias acciones como iniciar sesión, registrarse, restablecer contraseña, vincular cuentas sociales, habilitar MFA y más. Para comprender mejor los flujos de usuario y los detalles de implementación, te recomendamos revisar nuestro RFC de diseño de Experience API, que proporciona especificaciones técnicas completas y ejemplos.
También necesitas acceder a otras configuraciones de la Experiencia de Inicio de Sesión, como colores de marca, logotipo de la empresa, favicon, política de contraseñas, frases de idioma localizadas e incluso CSS personalizado, a través del endpoint de la Experience API de inicio de sesión.
Maneja CAPTCHA cuando esté habilitado
La experiencia de inicio de sesión incorporada de Logto maneja CAPTCHA automáticamente. Si tu tenant utiliza Bring your UI y habilita la protección contra bots CAPTCHA, tu interfaz personalizada debe completar la integración de CAPTCHA en el frontend antes de llamar a PUT /api/experience.
Envía el token del proveedor devuelto como captchaToken en el cuerpo de la solicitud PUT /api/experience. Consulta las guías específicas del proveedor para más detalles:
Proyectos de ejemplo
Ofrecemos una colección de proyectos de ejemplo para ayudarte a comprender e implementar rápidamente una interfaz personalizada. Consulta el repositorio de GitHub del proyecto Logto Experience para más detalles.
Además, continuaremos trabajando en proporcionar más proyectos de ejemplo simplificados y basados en escenarios para cubrir los casos de uso más comunes. ¡Mantente atento a nuestras futuras actualizaciones!
Desarrollo y depuración local
Para el desarrollo y la depuración local, proporcionamos la herramienta Logto Tunnel CLI para:
- Proxiar solicitudes de Experience API desde tu máquina local al endpoint de Logto Cloud.
- Probar tu implementación personalizada localmente.
Esto permite a los usuarios probar y depurar la interfaz personalizada localmente antes de subirla a Logto Cloud.
Consulta Depura y prueba tu interfaz personalizada localmente para más detalles.
Sube tus recursos personalizados usando la CLI
Además de subirlos a través de la consola, también puedes usar la CLI de Logto para subir recursos personalizados. Esto es especialmente útil para flujos de trabajo de despliegue automatizado.
Consulta Sube recursos personalizados usando la CLI para más detalles.
Restaura la experiencia de inicio de sesión incorporada de Logto
Si deseas restaurar la experiencia de inicio de sesión incorporada de Logto, simplemente haz clic en el botón de eliminar en la tarjeta Bring your UI. Después de guardar los cambios, la interfaz de experiencia de inicio de sesión volverá a la predeterminada de Logto.
Recursos relacionados
RFCS: Experience API
Ejemplos de ExperienceTrae tu propia interfaz de inicio de sesión a Logto Cloud