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

Contexto#

Logto proporciona una interfaz de usuario de inicio de sesión lista para usar que cubre todas las funciones de Logto, incluidas el 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 usuario de inicio de sesión usando 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 de usuario como los flujos de autenticación) para alinearse con su marca y requisitos comerciales específicos. ¡Te hemos escuchado! Y estamos emocionados de anunciar que la función "Trae tu propia interfaz de usuario" 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.

Requisitos previos#

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 (Guías de inicio rápido)
• CLI de túnel Logto instalado
• Conocimientos básicos de HTML, CSS y JavaScript

Para simplificar, usaremos el método clásico de inicio de sesión con "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 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 una entrada de nombre de usuario, una entrada de contraseña y un botón de enviar. Usé ChatGPT para generar un HTML de ejemplo, y aquí tengo esta página de inicio de sesión rosada y encantadora.

He omitido los estilos CSS por simplicidad, y aquí se ve lo simple que es el HTML:

También puedes empezar con una plantilla 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 ajustarlo a tus necesidades. Esta es la experiencia de inicio de sesión incorporada completa de Logto, escrita en React y TypeScript.

Configurar CLI de túnel Logto#

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

Suponiendo que tu página index.html esté ubicada en /ruta/a/tu/interfaz-personalizada, y tu ID de inquilino Logto sea foobar, puedes ejecutar el comando de esta manera:

O, si estás usando un framework de interfaz de usuario que tiene un servidor de desarrollo incorporado, 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/.

Iniciar 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 "Iniciar sesión" en tu aplicación. En lugar de ver la interfaz de inicio de sesión incorporada de Logto, ahora deberías ser redirigido a tu página de inicio de sesión personalizada.

Interactúa con la API de Experiencia de Logto#

En este paso, interactuaremos con la API de Experiencia de Logto en tu interfaz personalizada. Primero, creemos un archivo script.js y añadamos la referencia en tu index.html.

Coloca 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 la 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 los documentos de la API de Experiencia 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 "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 "Enviar".
4. Si todo está configurado correctamente, deberías ser redirigido de nuevo a tu aplicación, con la información de usuario autenticada.

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 a la sección "Interfaz personalizada" en tu Logto Console.

Después de subir, guarda los cambios, y tu interfaz de inicio de sesión personalizada se activará en tu inquilino de Logto Cloud, reemplazando la experiencia de inicio de sesión incorporada de Logto.

Finalmente, regresa a tu aplicación y cambia el URI del endpoint de nuevo a tu endpoint de 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 los flujos de autenticación para alinearse con tu marca y requisitos comerciales específicos.

¡Feliz codificación! 🚀