Trae tu propia interfaz de usuario
Logto te permite traer tu propia interfaz de usuario para reemplazar completamente la interfaz de la 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 recursos personalizados de interfaz (HTML, CSS, JavaScript, imágenes, etc.), alojarlos en los servidores de Logto Cloud y usarlos 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 utilizar 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 personalizada de inicio de sesión es clonar el proyecto de experiencia de Logto. 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 de experiencia 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 de interfaz, 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 superar los 20MB de tamaño.
- El archivo zip no debe contener ningún archivo que supere los 10MB de tamaño.
- El archivo zip no debe contener más de 200 archivos en total.
Sube tus recursos personalizados de interfaz
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 Consola > Inicio de sesión y cuenta > Personalización > Trae tu propia interfaz.
- 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 interfaz personalizada 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 personalizada de inicio de sesión en una nueva pestaña del navegador.
Desarrolla tu interfaz personalizada
Interactúa con Experience API
Tu interfaz personalizada necesita interactuar con 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 Experience API de inicio de sesión.
Proyectos de ejemplo
Proporcionamos 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 local y depuración
Para el desarrollo local y la depuración, proporcionamos la herramienta Logto Tunnel CLI para:
- Redirigir solicitudes de Experience API desde tu máquina local al endpoint de Logto Cloud.
- Probar tu implementación personalizada de interfaz 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 de interfaz usando la CLI
Además de subirlos a través de la Consola, también puedes usar Logto CLI para subir recursos personalizados de interfaz. Esto es especialmente útil para flujos de trabajo de despliegue automatizado.
Consulta Sube recursos personalizados de interfaz usando 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 "Trae tu propia interfaz". 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