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 la interfaz de usuario preconstruidas. Esta función te permite cargar un archivo zip que contiene tus activos de interfaz de usuario personalizados (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 inquilino.
Esta función requiere que tu interfaz de usuario personalizada sea compatible con Single Page Application (SPA), y se recomienda usar siempre una versión de producción para un rendimiento óptimo.
Explora la función de interfaz de usuario personalizada en Logto Console
Comienza con el proyecto oficial
La forma más rápida de iniciar una interfaz de usuario de inicio de sesión personalizada es clonar el proyecto de experiencia Logto. Esta es la interfaz de usuario 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 construir el proyecto:
pnpm install && pnpm build
Todo el proyecto Logto es un monorepo de pnpm. Si deseas ejecutar el paquete de experiencia de forma independiente (sin pnpm), reemplaza workspace: dependencias en package.json con números de versión específicos (como ^1.0.0).
Una vez que se complete la construcción, encontrarás todos los activos compilados en el directorio dist. Luego crea un archivo ZIP del directorio dist: este archivo se usará para cargarlo en Logto Cloud más tarde.
Requisitos de los activos de la interfaz de usuario personalizada
Antes de cargar tus activos de interfaz de usuario personalizados, asegúrate de que cumplan con los siguientes requisitos:
- Los activos cargados deben estar empaquetados como un solo archivo zip.
- El archivo zip debe contener un archivo
index.htmlen el directorio raíz. - El archivo zip no debe exceder los 20 MB de tamaño.
- El archivo zip no debe contener ningún archivo que exceda los 10 MB de tamaño.
- El archivo zip no debe contener más de 200 archivos en total.
Carga tus activos de interfaz de usuario personalizada
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 experience > 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 que se complete la carga, guarda los cambios y tu interfaz de usuario personalizada se servirá de inmediato.
- La ventana de "Vista previa de inicio de sesión" se desactivará cuando uses tu interfaz de usuario de inicio de sesión personalizada. 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.
Desarrolla tu interfaz de usuario personalizada
Interactúa con Experience API
Tu interfaz de usuario personalizada necesita interactuar con Experience API para realizar varias acciones como iniciar sesión, registrarse, restablecer la contraseña, vincular cuentas sociales, habilitar MFA, y más. Para comprender mejor los flujos de usuario y los detalles de implementación, recomendamos revisar nuestro diseño RFC 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, 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 y comenzar a implementar rápidamente la interfaz de usuario personalizada. Por favor, consulta el repositorio de GitHub del proyecto de experiencia Logto 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 de interfaz de usuario personalizada localmente.
Esto permite a los usuarios probar y depurar la interfaz de usuario personalizada localmente antes de cargarla en Logto Cloud.
Por favor, consulta Depurar y probar tu interfaz de usuario personalizada localmente para más detalles.
Carga tus activos de interfaz de usuario personalizada usando el CLI
Además de cargar a través de la Consola, también puedes usar el Logto CLI para cargar activos de interfaz de usuario personalizada. Esto es particularmente útil para flujos de trabajo de despliegue automatizados.
Por favor, consulta Cargar activos de interfaz de usuario personalizada usando CLI para más detalles.
Restaura a 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 usuario de la experiencia de inicio de sesión volverá a la predeterminada de Logto.
Recursos relacionados
RFCS: Experience API
Experience samples Bring your own sign-in UI to Logto Cloud