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.
YijunDeveloper
Deja de perder semanas en la autenticación de usuarios
Lanza aplicaciones seguras más rápido con Logto. Integra la autenticación de usuarios en minutos y concéntrate en tu producto principal.
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.
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:
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:
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.
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.
