Français
  • passportjs
  • oidc
  • express

Intégrer Passport.js avec Logto

Un guide pratique et un exemple pour intégrer Passport.js avec Logto.

Sijie
Sijie
Developer

Passport.js est un middleware d'authentification pour Node.js qui peut être intégré discrètement dans toute application web basée sur Express. Ce guide complet se concentrera sur l'utilisation du plugin passport-openidconnect, offrant un moyen simple mais efficace d'incorporer Logto avec Passport.js. Tout au long de ce tutoriel, nous utiliserons Express.js pour construire notre application. Tout le code dont nous discuterons est disponible dans un dépôt GitHub public.

Configurer express avec session

Avant de plonger dans le processus d'intégration, nous devons configurer le projet de base en installant Express.js et son middleware de session.

En supposant que vous avez un environnement de projet TypeScript prêt (sinon, reportez-vous à la documentation officielle de TypeScript), commencez par installer les packages nécessaires :

Préparer le fichier principal

Créez src/app.ts avec le code suivant :

Ce script initialise l'application Express et configure cookieParser et le middleware de session pour la gestion de session basée sur des cookies, crucial pour stocker les résultats d'authentification dans Passport.js. Il utilise ensuite le module http pour lancer le service.

Créer une application Logto

Pour continuer, une application Logto est nécessaire. Créez-en une en visitant la Console Logto, en naviguant vers "Applications", et en cliquant sur "Créer une application". Sélectionnez "Express", nommez votre application, puis cliquez sur "Créer une application".

Créer une application

Après avoir terminé ou lu le guide de création, vous trouverez une page détaillée avec les informations de configuration pour les prochaines étapes.

Détail de l'application

Configurer les URIs

Sur la page des détails de l'application, configurez deux valeurs :

  1. URIs de redirection : Réglez cela sur http://localhost:3000/callback pour s'aligner avec la route de rappel du projet.
  2. URIs de redirection après déconnexion : Utilisez http://localhost:3000 pour la simplicité, dirigeant les utilisateurs vers la page d'accueil après déconnexion.

Vous pouvez changer ces valeurs plus tard.

Configurer Passport.js avec les paramètres de l'application

Installer les dépendances

Installez passport et le plugin de stratégie OIDC, passport-openidconnect :

Préparer le fichier de configuration

Créez app/config.ts pour la gestion de la configuration :

Configurez les variables d'environnement en conséquence :

Variable d'environnementDescriptionExemple
APP_IDID de l'appli depuis Logto4ukboxxxxxxxxx
APP_SECRETSecret de l'application depuis Logto5aqccxxxxxxx
ENDPOINTEndpoint Logtohttps://g5xxx.logto.app/

Initialiser Passport.js avec la stratégie OIDC

Créez src/passport.ts

Ce code initialise Passport avec la OpenIDConnectStrategy. Les méthodes serialize et deserialize sont définies à des fins de démonstration.

Assurez-vous d'initialiser et d'attacher le middleware Passport dans votre application :

Construire des routes d'authentification

Nous allons maintenant créer des routes spécifiques pour les processus d'authentification :

Se connecter : /sign-in

Cette route construit et redirige vers une route d'authentification OIDC.

Gérer le rappel de connexion : /callback

Ceci gère le rappel de connexion OIDC, stocke les tokens, et redirige vers la page d'accueil.

Se déconnecter : /sign-out

Cela redirige vers l'URL de fin de session de Logto, puis de retour à la page d'accueil.

Récupérer l'état d'authentification et protéger les routes

Développons la page d'accueil avec l'état d'authentification :

Ici, les informations de l'utilisateur sont affichées en utilisant JSON.stringify, et l'existence de request.user est utilisée pour protéger les routes.

Conclusion

Félicitations pour l'intégration de Passport.js avec Logto. J'espère que ce guide vous aidera à migrer des systèmes existants vers l'utilisation de Logto. Pour une expérience d'authentification améliorée, pensez à essayer Logto Cloud dès aujourd'hui. Bon codage !