Integración de Passport.js con Logto
Una guía práctica y ejemplo para integrar Passport.js con Logto.
Developer
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.
Configurando Express con sesión
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:
Preparar el archivo principal
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.
Creando una aplicación Logto
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.
Configurando URIs
En la página de detalles de la aplicación, configura dos valores:
- Redirect URIs: Configura esto a
http://localhost:3000/callbackpara alinearlo con la ruta de callback del proyecto. - Post Sign-out Redirect URIs: Usa
http://localhost:3000por simplicidad, dirigiendo a los usuarios a la página de inicio después de cerrar sesión.
Puedes cambiar estos valores más tarde.
Configurar Passport.js con la configuración de la aplicación
Instalar dependencias
Instala passport y el plugin de estrategia OIDC, passport-openidconnect:
Preparar el archivo de configuración
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/ |
Inicializar Passport.js con la estrategia OIDC
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:
Creación de rutas de autenticación
Ahora crearemos rutas específicas para los procesos de autenticación:
Iniciar sesión: /sign-in
Esta ruta construye y redirige a una ruta de autenticación OIDC.
Manejar la devolución de llamada de inicio de sesión: /callback
Esto maneja la devolución de llamada de inicio de sesión OIDC, almacena tokens y redirige a la página de inicio.
Cerrar sesión: /sign-out
Esto redirige a la URL de finalización de sesión de Logto y luego de regreso a la página de inicio.
Obtener estado de autenticación y proteger rutas
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.
Conclusión
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!