Integración con Webflow

Introducción#

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.

Requisitos previos#

1. Una cuenta de Webflow con la función de código personalizado habilitada (requiere al menos el plan "Básico").
2. Una instancia de Logto en funcionamiento, ya sea autohospedada o utilizando Logto Cloud.

Pasos de integración#

Preparación#

1. 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.
2. En el panel de Webflow, crea un nuevo sitio.

Integrar JS SDK#

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.

1. 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.
2. 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.

Implementar inicio de sesión#

1. 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".
2. 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().

3. 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.

4. 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.

5. 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.

Implementar cierre de sesión#

1. 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.
2. 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.

Manejar estado de autenticación#

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#

1. 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".
2. 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.

Prueba tu aplicación#

Ahora, prueba tu sitio Webflow:

1. Despliega y visita la URL de tu sitio, el botón de inicio de sesión debería ser visible.
2. Haz clic en el botón de inicio de sesión, el SDK iniciará el proceso de inicio de sesión, redirigiéndote a la página de inicio de sesión de Logto.
3. Después de iniciar sesión, serás redirigido de vuelta a tu sitio, viendo el nombre de usuario y el botón de cierre de sesión.
4. Haz clic en el botón de cierre de sesión para cerrar sesión.

Resumen#

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.

El demo de Webflow se puede encontrar aquí en modo de solo lectura, y el sitio desplegado está disponible en https://charless-trendy-site-f191c0.webflow.io/.