Solución de autenticación Full-stack con Logto en Netlify: Protegiendo aplicaciones web y funciones serverless
Muestra cómo asegurar aplicaciones web de Netlify y funciones serverless con autenticación de Logto, completo con ejemplos de código fuente y una vista previa en vivo del demo.
Developer
Netlify es una plataforma poderosa para implementar y alojar proyectos web modernos, ofreciendo integración perfecta con Git, compilaciones automatizadas y funciones serverless para un flujo de trabajo de desarrollo rápido y escalable.
En esta guía completa, aprenderás a:
- Implementar autenticación en una Aplicación de Página Única (SPA) usando Logto en Netlify, demostrado con un ejemplo de Vite + React.
- Asegurar tus funciones serverless de Netlify con autenticación de Logto.
- Implementar una aplicación lista para producción usando nuestra implementación de referencia: example-vite-react-logto.
Revisa la vista previa en línea del demo.
Prerrequisitos
Estas son las cosas que necesitarás configurar antes de comenzar este tutorial:
- Una cuenta de Netlify
- Una cuenta de Logto Cloud o una instancia de Logto autohospedada
Crear una aplicación React con Vite
Sigue la Guía de Inicio Rápido de Vite para crear una aplicación React.
Según la guía de creación, selecciona tu pila de tecnología deseada. En este artículo, elegiremos React + TypeScript.
Luego, ingresa al directorio raíz del proyecto, instala las dependencias de acuerdo con la guía y ejecuta la aplicación.
Implementar la aplicación usando Netlify
Sigue las guías de Empezar con Netlify para implementar tu aplicación.
Una vez que hayas implementado tu aplicación, podrás ver el sitio en vivo en https://<nombre-de-tu-sitio>.netlify.app.
Toma nota de esta URL ya que la necesitaremos más adelante para configurar Logto.
Integrar Logto en tu aplicación
Para comenzar con la autenticación de Logto:
- Navega a la página de "Aplicaciones" en la Consola de Logto.
- Crea una nueva aplicación.
- Selecciona tu marco de trabajo frontend (React en nuestro ejemplo).
- Nota: Puedes crear cualquier aplicación de página única (SPA) o aplicación nativa según tus necesidades.
- Sigue la guía de integración proporcionada en:
- La guía integrada de la Consola de Logto, o
- La guía oficial de integración de autenticación React.
- Desde la página de detalles de la aplicación, toma nota de:
- Tu ID de aplicación.
- El punto final de Logto (se puede encontrar en la sección "Endpoints & Credentials", típicamente en el formato
https://<tu-instancia>.logto.app/). Estas credenciales serán necesarias en pasos subsecuentes.
Ten en cuenta que en nuestro demo, usamos la ruta /callback para manejar la redirección de inicio de sesión de Logto. Las URIs de redirección en Logto deben configurarse como https://<nombre-de-tu-sitio>.netlify.app/callback.
Después de que los usuarios cierren sesión, regresamos a la página de inicio, por lo que configuramos las URIs de redirección después de cerrar sesión como https://<nombre-de-tu-sitio>.netlify.app.
Luego, configura la información de nuestra Aplicación Logto creada en las variables de entorno de Netlify (Tu sitio web -> configuración del sitio -> variables de entorno):
Luego usamos estas configuraciones en nuestro proyecto frontend:
Puedes ver el código final integrado aquí: example-vite-react-logto.
Ten en cuenta que cuando implementamos en Netlify e iniciamos sesión a través de Logto, nuestra URL no se redirige automáticamente a nuestra página de Callback. Esto es porque Netlify no soporta el enrutamiento del lado del cliente para aplicaciones de página única (SPA) por defecto.
Cuando visitas rutas como /callback, Netlify intentará encontrar archivos correspondientes en el servidor en lugar de reenviar la solicitud a tu aplicación React.
En este punto, necesitamos crear un archivo _redirects en el directorio público de tu proyecto Netlify para decirle a Netlify que redirija todas las solicitudes a tu index.html:
Alternativamente, puedes crear un archivo netlify.toml en la raíz de tu proyecto:
Ahora nuestro enrutamiento debería funcionar correctamente.
Crear APIs backend con funciones de Netlify
Las Funciones de Netlify proporcionan una forma simple pero poderosa de construir APIs backend. Con las Funciones de Netlify, podemos escribir lógica del lado del servidor sin preocuparnos por la configuración y el mantenimiento tradicional del servidor.
Estas funciones son controladas por versiones, construidas y desplegadas junto con tu sitio web, haciendo el proceso de desarrollo y despliegue fluido entre frontend y backend.
Comencemos a construir nuestras APIs backend usando Funciones de Netlify.
Primero, necesitamos crear un directorio functions bajo el directorio netlify del proyecto, luego crear un archivo hello.ts:
Cuando visitamos https://<nombre-de-tu-sitio>.netlify.app/.netlify/functions/hello, esta función será llamada y retornará "¡Hola mundo!".
Si piensas que el camino /.netlify/functions/hello parece un poco extraño, puedes configurar una redirección para invocar la función agregando una regla de redirección en el archivo public/_redirects:
De esta manera, cuando visitamos https://<nombre-de-tu-sitio>.netlify.app/api/hello, llamará a nuestra función y retornará "¡Hola mundo!". Esta es en realidad la forma común de construir APIs usando funciones de Netlify.
Y podemos acceder a esta API en nuestro proyecto frontend usando fetch:
Proteger tus funciones de Netlify con Logto
Ahora que tenemos una API backend, necesitamos asegurarnos de que solo los usuarios autenticados puedan acceder a ella. Protegeremos nuestras funciones de Netlify usando el mecanismo de autenticación de Logto.
Para proteger nuestros puntos finales de API:
- Crea un Recurso API en la Consola de Logto para representar nuestra API backend:
- Ve a "Recursos API" en la Consola de Logto y crea un nuevo API.
- Establece un nombre e identificador de API (por ejemplo,
https://api.backend.com). - Anota el identificador de la API en la página de detalles del recurso API ya que lo necesitaremos más adelante.
- Configura tu aplicación para usar este recurso API agregando el identificador a tus variables de entorno de Netlify:
- Actualiza tu configuración Logto para incluir este recurso API:
- Al realizar solicitudes a puntos finales protegidos, tu frontend necesita incluir un token de acceso válido. Aquí está cómo solicitarlo y usarlo:
Ahora, implementemos la validación del token en nuestro backend para asegurarnos de que solo las solicitudes con tokens de acceso válidos sean procesadas.
Primero, necesitamos instalar la dependencia jose para ayudarnos a verificar el token JWT:
Luego, podemos implementar la validación del token en nuestro backend:
Ahora, actualicemos nuestra función de Netlify para usar la función verifyLogtoToken:
¡Eso es todo! Ahora, nuestra función de Netlify está protegida por Logto y solo las solicitudes con tokens de acceso válidos serán procesadas.
Probando nuestro demo
Ahora, implementa tu aplicación en Netlify y pruébala. Puedes referirte a la vista previa del demo en línea aquí.
- Visita el sitio en vivo en
https://<nombre-de-tu-sitio>.netlify.app - Haz clic en el botón "Iniciar sesión" en la barra de navegación.
- Inicia sesión con una cuenta de usuario Logto, y verás que has iniciado sesión.
- Haz clic en la pestaña "Recurso Protegido" en la barra de navegación, y serás redirigido a la página protegida.
- Haz clic en el botón "Ver Recurso Protegido", y verás los datos de respuesta del endpoint
api/hello. - Haz clic en el botón "Cerrar sesión" en la barra de navegación, y serás redirigido a la página de inicio.
Conclusión
Esta guía demuestra cómo integrar la autenticación de Logto en una aplicación web implementada en Netlify.
Al configurar aplicaciones Logto y recursos API, implementamos autenticación frontend y protegimos los endpoints de Funciones de Netlify.
Para un control de acceso más granular, puedes aprovechar las capacidades de RBAC (Control de Acceso Basado en Roles) de Logto definiendo roles y permisos en la Consola de Logto y validando roles de usuario dentro de las Funciones de Netlify.