Cet article a été publié à l'origine sur le blog des développeurs d'Okta . Merci de soutenir les partenaires qui rendent SitePoint possible.

La création d’un login local ou social dans Node peut être simple avec Passport.js. Plus de 500 stratégies ont déjà été élaborées pour simplifier le câblage des fournisseurs d’identité. Mais que faites-vous si votre fournisseur d’identité n’a pas déjà une stratégie prédéfinie? Devez-vous construire tout cela vous-même? Absolument pas! Vous pouvez utiliser des stratégies génériques pour Passport.js qui facilitent l’utilisation du fournisseur de votre choix sans avoir à écrire vous-même la plomberie. Dans ce didacticiel, nous expliquerons comment utiliser le fournisseur d'identité de mon choix (Okta) avec le paquetage générique passport-openidconnect pour créer une authentification de nœud sécurisée et la gestion des utilisateurs!

Avant de commencer, Je vais vous expliquer ce qu'est Okta et pourquoi je pense qu'Okta est un choix judicieux pour votre prochain projet de nœud. comptes d’utilisateur et les données de compte d’utilisateur, et connectez-les à une ou plusieurs applications. Notre API vous permet de:

En bref: nous rendons la gestion de compte utilisateur beaucoup plus facile, plus sûre et plus évolutive que ce à quoi vous êtes probablement habitué.

Un son étonnant? Enregistrez-vous pour un compte développeur gratuit et lorsque vous aurez terminé, revenez nous en savoir plus sur la création d'une authentification sécurisée dans Node.

Intéressons-nous maintenant!

Utilisez Express pour Échafaudage du projet d'authentification du nœud de base

Commencez par installer le générateur d'applications Express si vous ne l'avez pas déjà installé.

 npm install express-generator -g

Utilisez ensuite la commande express pour échafauder une application de base Node and Express.

 express -e --git passport-oidc-example

Le générateur créera rapidement une nouvelle application dans le dossier passport-oidc-example . Il utilise la syntaxe JavaScript intégrée pour les modèles de vue et générera un fichier de base .gitignore . Il y aura des instructions au bas de la sortie vous indiquant comment procéder.

 change directory:
  $ cd passport-oidc-example

installer des dépendances:
  $ npm install

lancez l'application:
  $ DEBUG = passport-oidc-example: * npm start

Allez-y, accédez au nouveau répertoire et installez les dépendances. J'utilise Visual Studio Code pour le développement de mon nœud, qui prend en charge grandement l'écriture et le débogage des applications de nœud. Cela fonctionne sur toutes les plateformes et est totalement gratuit. Exécuter l'application avec un débogueur attaché est aussi simple que d'appuyer sur la touche F5 !

Une fois VS Code installé, vous pouvez ouvrir le projet à partir de la ligne de commande à l'aide du code . commande.

 code.

Maintenant, lancez l'application en appuyant sur la touche F5 . Le débogueur de nœud sera lancé dans la fenêtre de sortie. Ouvrez un navigateur sur http: // localhost: 3000 et assurez-vous que votre application de base est en cours d'exécution.

Ajoutez Passport.js à l'application Node

La première chose que vous ' Il faut trois paquets npm:

• passport
• passport-openidconnect
• express-session

 npm installer passport@0.4.0 passport-openidconnect@0.0.2 express-session@1.15.6 --save

Une fois ceux-ci installés, ouvrez le fichier app.js situé dans le dossier racine de l'application et ajoutez Passport.js aux exigences afin que la section supérieure du fichier ressemble à ceci:

 var createError = require ('http-errors');
var express = require ('express');
var path = require ('path');
var cookieParser = require ('cookie-parser');
var logger = require ('morgan');
var session = require ('express-session');
var passeport = requis («passeport»);
var OidcStrategy = require ('passport-openidconnect'). Stratégie;

Configurez Express pour utiliser Passport.js

Passport s'appuie sur express-session pour stocker les informations de l'utilisateur une fois que l'utilisateur s'est connecté. Pour le configurer, juste en dessous de la ligne suivante: [19659028] app.use (express.static (path.join (__ dirname, 'public')));

ajouter la configuration.

 app.use (session ({
  secret: 'MyVoiceIsMyPassportVerifyMe',
  resave: false,
  saveUninitialized: true
}));

Juste en dessous, ajoutez la configuration qui indique à Express d'utiliser Passport pour les sessions.

 app.use (passport.initialize ());
app.use (passport.session ());

Création d'une application Okta pour la prise en charge de l'authentification de nœud

Si vous ne possédez pas déjà de compte (et n'en avez pas créé le début de ce didacticiel), il est temps d'en créer un ! Une fois connecté à votre tableau de bord Okta, cliquez sur l’élément de menu Applications puis sur Ajouter une application . Dans l'assistant, choisissez Web et cliquez sur Suivant .

Sur l'écran Paramètres d'application nom l'application (j'ai nommé mine «PassportOidc») et modifiez les ports pour les paramètres de URI de base et de URI de redirection de connexion . Cliquez ensuite sur Terminé .

Configurez Passport.js pour OpenID Connect

Vous allez maintenant configurer Passport.js pour utiliser Okta comme fournisseur d'identité (IdP). . Pour ce faire, juste en dessous de la configuration de Passport.js de la dernière section, indiquez à passport d'utiliser le OidcStrategy créé dans les conditions requises.

 // configurer le passeport
passport.use ('oidc', nouvelle OidcStrategy ({
  émetteur: 'https: // {yourOktaDomain} / oauth2 / default',
  autorisationURL: 'https: // {yourOktaDomain} / oauth2 / default / v1 / authorize',
  tokenURL: 'https: // {yourOktaDomain} / oauth2 / default / v1 / token',
  userInfoURL: 'https: // {yourOktaDomain} / oauth2 / default / v1 / userinfo',
  clientID: '{ClientID}',
  clientSecret: '{ClientSecret}',
  callbackURL: 'http: // localhost: 3000 / code d'autorisation / callback',
  portée: 'profil ouvert'
}, (émetteur, sous, profil, accessToken, refreshToken, done) => {
  return done (null, profile);
}));

Le code ci-dessus définit le nom de la stratégie sur "oidc" et définit toutes les URL que la stratégie doit connaître pour extraire le flux de codes d’autorisation pour OpenID Connect. L'émetteur est l'URL de votre serveur d'autorisation créé pour vous lors de votre inscription à un compte de développeur Okta. Vous pouvez le voir en cliquant sur API dans votre tableau de bord Okta et en choisissant l'onglet Authorization Servers . Pour trouver les paramètres autorisationURL tokenURL et userInfoURL vous pouvez cliquer sur le serveur d'autorisation par défaut et afficher ses paramètres. Il existe un paramètre Metadata URI qui, en cliquant sur le lien, vous montrera le document .well-connu . Ce document informe toute personne utilisant ce serveur d'autorisation des informations et des points d'extrémité qu'il peut fournir.

Le dernier argument est une fonction qui insère l'objet de profil renvoyé par l'appel d'authentification. into req.user pour pouvoir l’utiliser dans les gestionnaires d’itinéraires. Vous pouvez manipuler l'objet que vous transmettez pour qu'il contienne d'autres informations ou enregistrer / mettre à jour l'utilisateur dans votre base de données.

Vous devez également indiquer à Passport.js comment sérialiser les informations d'utilisateur dans une session. Pour ce faire, vous allez ajouter des méthodes juste en dessous de la configuration que vous venez de configurer.

 passport.serializeUser ((user, next) => {
  next (null, utilisateur);
});

passport.deserializeUser ((obj, next) => {
  next (null, obj);
});

Appelez Passport.js

Passport.js a besoin en dernier lieu de deux points d'extrémité dans votre application: un qui déclenche le flux de connexion et un qui gère le rappel du fournisseur OpenID Connect. Vous pouvez placer ces deux routes juste en dessous de la méthode app.use () pour les routeurs d'index et d'utilisateur.

 app.use ('/ login', passport.authenticate ('oidc'));

app.use ('/ autorisation-code / callback',
  passport.authenticate ('oidc', {failureRedirect: '/ error'}),
  (req, res) => {
    res.redirect ('/');
  }
)

Vous pouvez maintenant exécuter cette application et accéder à l'itinéraire de connexion. Elle vous guidera dans le flux de connexion et vous ramènera à votre page d'accueil. Cependant, rien ne permet de prouver visuellement que la connexion a réussi et qu’un objet utilisateur est disponible dans le paramètre request

. Pour ce faire, créez une page de profil indiquant le nom de l’utilisateur connecté. Commencez par le profil route.

 app.use ('/ profile', (req, res) => {
  res.render ('profil', {titre: 'Express', utilisateur: req.user});
});

Puis, dans le dossier vues ajoutez un fichier profile.ejs .

  
    
    
  
  
    
<%= title %>
    
 Bienvenue <%= user.displayName %>! 
  

Ensuite, pour faciliter les choses, ajoutez un lien de connexion à la page d'accueil.

  
    
    
  
  
    
<%= title %>
    
 Bienvenue à <%= title %>
     Connexion 
  

Lorsque vous exécutez l'application, vous pouvez cliquer sur le lien Log In démarrer le flux de connexion et voir la page de profil avec le nom de l'utilisateur affiché.

Il y a toujours un problème avec le application. Tout le monde peut accéder à la route du profil et provoquer une erreur. S'il n'y a aucun utilisateur dans la session de requête, il n'y a rien à passer et rien à afficher dans la vue.

Pour vous assurer que seuls les utilisateurs connectés peuvent accéder à la page de profil, ajoutez une fonction de middleware.

 function assureLoggedIn (req, res, next) {
  if (req.isAuthenticated ()) {
    return next ();
  }

  res.redirect ('/ login')
}

Cette fonction vérifie la méthode de la demande isAuthenticated () et transmet la demande au prochain gestionnaire si l'utilisateur est connecté. Dans le cas contraire, elle redirige l'utilisateur vers la page de connexion processus de connexion.

Ajoutez maintenant ce middleware aux routes dont vous avez besoin de protéger. Dans ce cas, il ne reste que l'itinéraire du profil pour l'instant.

 app.use ('/ profile', assureLoggedIn, (req, res) => {
  res.render ('profil', {titre: 'Express', utilisateur: req.user});
});

Maintenant, si vous essayez manuellement d'accéder à la page de profil, vous serez redirigé vers le flux de connexion, puis de nouveau à la page de profil une fois que vous êtes connecté. Mais il manque encore quelque chose.

Déconnexion de la Session Passport.js

La dernière chose à faire est de pouvoir supprimer la session de connexion et de rediriger l'utilisateur vers la page d'accueil. Tout d'abord, créez un itinéraire pour gérer l'itinéraire de déconnexion. Juste en dessous de la route de rappel d'autorisation, ajoutez une nouvelle route.

 app.get ('/ logout', (req, res) => {
  req.logout ();
  req.session.destroy ();
  res.redirect ('/');
});

C’est aussi simple que cela. Ce gestionnaire d'itinéraire appelle la méthode logout () de la demande entrante, détruit la session et redirige l'utilisateur vers la page d'accueil.

Voilà l'essentiel pour que Passport.js gère une authentification OpenID Connect. fournisseur qui n'a pas encore de stratégie spécifique dans la bibliothèque Passport.js!

En savoir plus sur les nœuds, l'authentification et Okta

Vous ne pouvez pas obtenir assez de nœuds? Découvrez nos quickstarts pour Node et d'autres publications intéressantes du blog de développeurs Okta, comme notre publication sur l'authentification de nœud simple et ma publication sur l'enregistrement d'utilisateur avec Node and React [Commetoujoursn'hésitezpasànouscontactersurlacommandeTwitter @oktadev ou à laisser des commentaires ci-dessous, et n'oubliez pas de consulter notre chaîne YouTube !

Après presque deux décennies d'écriture professionnelle (et quelques années auparavant, de logiciels non professionnels), Lee Brandt continue d'apprendre. tous les jours. Il parle au niveau international du développement de logiciels, tant du point de vue technique que du point de vue commercial, et aime enseigner aux autres ce qu'il apprend.