Webflow es una plataforma SaaS para la creación y alojamiento de sitios web, que ofrece un editor visual en línea que simplifica el proceso de diseñar, construir y lanzar sitios web con minimal código.
Este artículo te guiará a través de la integración de Logto con tus proyectos de Webflow, permitiendo la autenticación de usuarios sin problemas.
Navega a la Consola de Logto, crea una aplicación utilizando la plantilla "Vanilla JS" o "Crear sin framework", y selecciona "Aplicación de una sola página" como el tipo de aplicación.
En este paso, agregaremos código personalizado a nivel global a tu sitio. Dado que Webflow es un sitio web estático, utilizaremos el SDK @logto/browser (Vanilla JS) para la autenticación de usuarios. Ya que no se puede usar NPM, importaremos nuestro SDK a través de un servicio CDN como jsdelivr.com.
En el panel de Webflow, pasa el cursor sobre tu sitio recién creado y haz clic en el icono de "Engranaje" en la esquina superior derecha.
En la página de configuración que se abre, encuentra "Código personalizado" en el menú de navegación izquierdo y pega el siguiente código JavaScript en la sección "Código en el encabezado". Puedes encontrar tu ID de aplicación y la URL del endpoint en los detalles de la aplicación Logto.
Ve a la Consola de Logto, en la configuración de la aplicación, encuentra el campo "Redirect URIs" y coloca https://tu-maravilloso-sitio.webflow.io/callback, luego haz clic en "Guardar cambios".
Regresa al diseñador de Webflow y agrega un botón de "Iniciar sesión" en la página de inicio. Para simplificar este tutorial, también asignaremos un ID "sign-in" al botón para referenciarlo más tarde con getElementById().
Ahora agreguemos algo de código personalizado a nivel de página en la página de inicio. Haz clic en el ícono de engranaje en el menú de la página, y encuentra la sección de código personalizado en la parte inferior. Pega el siguiente código para vincular el controlador de clics al botón de inicio de sesión.
Crea una nueva página de “Callback” en Webflow, y simplemente pon algún texto estático "Redirigiendo..." en ella. Manejaremos la lógica de callback de inicio de sesión en esta página con el siguiente código personalizado.
Ahora puedes probar el flujo de inicio de sesión desplegando tu sitio Webflow. Después del despliegue, el botón de "Iniciar sesión" debería aparecer en tu página de inicio. Haz clic en él para navegar a la página de inicio de sesión alojada por Logto. Después de iniciar sesión, serás redirigido primero a la página de “Callback”, donde podrás ver el texto "Redirigiendo...", y luego de vuelta a tu página de inicio.
En la Consola de Logto, localiza “Post logout redirect URIs” en la configuración de la aplicación, e ingresa la URL de tu sitio Webflow https://tu-maravilloso-sitio.webflow.io.
Regresa al diseñador de Webflow, y agrega un botón de "Cerrar sesión" en tu página de inicio. De manera similar, asigna un ID "sign-out" al botón, y agrega el siguiente código al "Código personalizado" a nivel de página.
En Logto SDK, generalmente podemos usar el método logtoClient.isAuthenticated() para comprobar el estado de autenticación. Si el usuario ha iniciado sesión, el valor será true; de lo contrario, será false.
En tu sitio Webflow, también puedes usarlo para mostrar y ocultar los botones de inicio y cierre de sesión de manera programática. Aplica el siguiente código personalizado para ajustar el CSS de los botones en consecuencia.
Obtener nombre de usuario y mostrar un mensaje de bienvenida#
Agrega un contenedor flex con ID "container" en la página de inicio, e inserta un elemento "Heading 1" dentro del contenedor con ID "username".
Obtén automáticamente la información del usuario después de iniciar sesión con éxito, reemplaza el nombre de usuario en el elemento "Heading 1" y muestra el contenedor. Podemos hacer esto con el siguiente código personalizado.
Este tutorial te ha guiado a través de la integración de Webflow con Logto. Al usar el SDK @logto/browser, puedes integrar fácilmente la autenticación de usuarios en cualquiera de tus sitios Webflow con solo unos pocos pasos.
Por favor, consulta la guía completa de integración de Webflow en nuestro sitio de documentación para más detalles, como obtener el token de acceso JWT y manejar el RBAC (Control de acceso basado en roles), etc.
