Una guía práctica y ejemplo para integrar Passport.js con Logto.
Passport.js es un middleware de autenticación para Node.js que puede integrarse discretamente en cualquier aplicación web basada en Express. Esta guía completa se centrará en utilizar el plugin passport-openidconnect, ofreciendo una forma sencilla pero efectiva de incorporar Logto con Passport.js. A lo largo de este tutorial, usaremos Express.js para construir nuestra aplicación. Todo el código que discutiremos está disponible en un repositorio público de GitHub.
Antes de adentrarnos en el proceso de integración, necesitaremos configurar el proyecto básico instalando Express.js y su middleware de sesión.
Suponiendo que tienes un entorno de proyecto TypeScript preparado (si no, consulta la documentación oficial de TypeScript), comienza instalando los paquetes necesarios:
Crea src/app.ts con el siguiente código:
Este script inicializa la aplicación Express y configura los middleware cookieParser y session para la gestión de sesiones basadas en cookies, crucial para almacenar resultados de autenticación en Passport.js. Luego utiliza el módulo http para lanzar el servicio.
Para continuar, es necesario tener una aplicación Logto. Crea una visitando la Consola Logto, navegando a “Applications”, y haciendo clic en “Create application”. Selecciona “Express”, nombra tu aplicación, y haz clic en “Create application”.
Después de completar o terminar de leer la guía de creación, encontrarás una página detallada con información de configuración para los siguientes pasos.
En la página de detalles de la aplicación, configura dos valores:
http://localhost:3000/callback para alinearlo con la ruta de callback del proyecto.http://localhost:3000 por simplicidad, dirigiendo a los usuarios a la página de inicio después de cerrar sesión.Puedes cambiar estos valores más tarde.
Instala passport y el plugin de estrategia OIDC, passport-openidconnect:
Crea app/config.ts para la gestión de configuración:
Configura las variables de entorno de acuerdo:
| Variable de Entorno | Descripción | Ejemplo |
|---|---|---|
APP_ID | ID de la aplicación de Logto | 4ukboxxxxxxxxx |
APP_SECRET | Secreto de la aplicación de Logto | 5aqccxxxxxxx |
ENDPOINT | Endpoint de Logto | https://g5xxx.logto.app/ |
Crea src/passport.ts
Este código inicializa Passport con la OpenIDConnectStrategy. Los métodos serialize y deserialize están configurados con fines de demostración.
Asegúrate de inicializar y adjuntar el middleware de Passport en tu aplicación:
Ahora crearemos rutas específicas para los procesos de autenticación:
/sign-inEsta ruta construye y redirige a una ruta de autenticación OIDC.
/callbackEsto maneja la devolución de llamada de inicio de sesión OIDC, almacena tokens y redirige a la página de inicio.
/sign-outEsto redirige a la URL de finalización de sesión de Logto y luego de regreso a la página de inicio.
Desarrolla la página de inicio con el estado de autenticación:
Aquí, la información del usuario se muestra usando JSON.stringify, y la existencia de request.user se utiliza para proteger rutas.
Felicidades por integrar Passport.js con Logto. Espero que esta guía te ayude a migrar de sistemas existentes a usar Logto. Para una experiencia de autenticación mejorada, considera probar Logto Cloud hoy. ¡Feliz codificación!