Trae tu propia interfaz de inicio de sesión a Logto Cloud

Antecedentes#

Logto proporciona una experiencia de inicio de sesión lista para usar que cubre todas las funciones de Logto, incluyendo inicio de sesión, registro, recuperación de contraseña, inicio de sesión único (SSO), y más. Los usuarios también pueden personalizar la apariencia de la interfaz de inicio de sesión utilizando nuestra función de "CSS personalizado".

Sin embargo, algunos usuarios todavía quieren personalizar profundamente su experiencia de inicio de sesión (tanto la interfaz como los flujos de autenticación) para que coincida con su identidad de marca y requisitos comerciales específicos. ¡Te hemos escuchado! Y estamos emocionados de anunciar que la función de "Trae tu propia interfaz" ahora está disponible en Logto Cloud.

En este tutorial, te guiaremos a través de los pasos para crear y desplegar tu propia interfaz de inicio de sesión personalizada en Logto Cloud.

Prerrequisitos#

Antes de comenzar, asegúrate de tener lo siguiente:

• Una cuenta de Logto Cloud con un plan de suscripción
• Una aplicación integrada con Logto (Inicios rápidos)
• Logto tunnel CLI instalado
• Conocimientos básicos de HTML, CSS y JavaScript

Para simplificar, usaremos el método clásico de inicio de sesión "nombre de usuario y contraseña" en los siguientes pasos. Recuerda cambiar tu método de inicio de sesión en Logto Console.

Crea tu propia interfaz de inicio de sesión personalizada#

El requisito mínimo para una interfaz de inicio de sesión es tener un archivo index.html, con un formulario de inicio de sesión que incluya al menos un campo de nombre de usuario, un campo de contraseña y un botón de envío. Usé ChatGPT para generar un HTML de muestra, y aquí tengo esta encantadora página de inicio de sesión en rosa.

He omitido los estilos CSS para simplificar, y así es cómo se ve el HTML:

También puedes comenzar con una plantilla base de tu framework de front-end favorito, como Create React App, Next.js, o Vue CLI.

Dado que Logto es de código abierto, otra recomendación es clonar el proyecto Logto Experience, y modificar el código para adaptarlo a tus necesidades. Esta es la experiencia completa de inicio de sesión integrada en Logto, escrita en React y TypeScript.

Configura Logto tunnel CLI#

Logto tunnel CLI es una herramienta que no solo sirve tus páginas HTML, sino que también te permite interactuar con la API de Experience de Logto desde tus páginas HTML en el entorno de desarrollo local.

Suponiendo que tu página index.html se encuentra en /ruta/a/tu/ui-personalizada, y que tu ID de inquilino de Logto es foobar, puedes ejecutar el comando de esta manera:

O, si estás utilizando un framework de interfaz de usuario que tiene un servidor de desarrollo integrado, y tu página se sirve en http://localhost:4000, puedes ejecutar el comando así:

Después de ejecutar el comando, el servicio de túnel se iniciará en tu máquina local http://localhost:9000/.

Realiza el inicio de sesión desde tu aplicación#

Ve a la aplicación que creaste anteriormente, y cambia el endpoint de Logto de https://foobar.logto.app/ a http://localhost:9000/ en la configuración de tu SDK de Logto.

Tomemos nuestro proyecto de ejemplo en React como ejemplo:

Haz clic en el botón de "Iniciar sesión" en tu aplicación. En lugar de ver la interfaz de inicio de sesión integrada de Logto, ahora deberías ser redirigido a tu página de inicio de sesión personalizada.

Interactúa con la API de Experience de Logto#

En este paso, interactuaremos con la API de Experience de Logto en tu interfaz personalizada. Primero, crea un archivo script.js y agrega la referencia en tu index.html.

Pon el siguiente código en tu archivo script.js.

Este script completará el flujo de inicio de sesión con nombre de usuario y contraseña con la ayuda de estas APIs:

• PUT /api/experience - Iniciar la interacción de inicio de sesión
• POST /api/experience/verification/password - Verificar el nombre de usuario y contraseña
• POST /api/experience/identification - Identificar al usuario para la interacción actual
• POST /api/experience/submit - Enviar la interacción de inicio de sesión

Consulta la documentación de la API de Experience de Logto para más detalles.

Prueba tu página de inicio de sesión personalizada#

1. Ve a tu aplicación y haz clic en el botón de "Iniciar sesión".
2. Deberías ser redirigido a tu página de inicio de sesión personalizada en http://localhost:9000/.
3. Ingresa el nombre de usuario y la contraseña, y haz clic en el botón de "Enviar".
4. Si todo está configurado correctamente, deberías ser redirigido de vuelta a tu aplicación, con la información del usuario autenticado.

Despliega tu interfaz de inicio de sesión personalizada en Logto Cloud#

Una vez que hayas terminado de desarrollar y probar tu interfaz de inicio de sesión personalizada localmente, puedes desplegarla en Logto Cloud. Simplemente crea un archivo zip de tu carpeta de interfaz personalizada y súbelo en la sección de "UI personalizada" en tu Logto Console.

Después de cargar, guarda los cambios y tu interfaz de inicio de sesión personalizada estará activa en tu tenant de Logto Cloud, reemplazando la experiencia de inicio de sesión integrada de Logto.

Finalmente, regresa a tu aplicación y cambia el URI del endpoint de nuevo al endpoint de tu Logto Cloud: https://foobar.logto.app/. Esta vez, puedes detener el servicio de túnel de Logto, y tu aplicación ahora debería funcionar directamente con la interfaz personalizada alojada en línea.

Conclusión#

En este tutorial, te hemos guiado a través del proceso de implementar y desplegar tu propia interfaz de inicio de sesión personalizada en Logto Cloud.

Con esta función, ahora puedes personalizar profundamente tu interfaz de inicio de sesión y flujos de autenticación para que coincidan con tu identidad de marca y requisitos comerciales específicos.

¡Feliz codificación! 🚀