Tutoriel : ajouter une connexion et une déconnexion dans votre application web Node.js

Article
08/27/2024

Ce tutoriel est la dernière partie d’une série qui décrit comment créer une application web Node.js et la préparer pour l’authentification en utilisant le centre d’administration Microsoft Entra. Dans la partie 2 de cette série, vous avez créé une application web Node.js et organisé tous les fichiers nécessaires. Dans ce tutoriel, vous ajoutez la connexion, l’inscription et la déconnexion à l’application web Node.js. Si vous souhaitez simplifier l’ajout de l’authentification à l’application web Node.js, utilisez la Bibliothèque d’authentification Microsoft (MSAL) pour Node. Le flux de connexion utilise le protocole d’authentification OpenID Connect (OIDC) qui connecte des utilisateurs en toute sécurité.

Dans ce didacticiel, vous allez :

Ajouter une logique de connexion et de déconnexion
Afficher les revendications de jeton d’ID
Exécutez une application et testez l’expérience de connexion et de déconnexion.

Prérequis

Vous avez effectué les étapes du Tutoriel : préparer une application web Node.js pour l’authentification.

Créer un objet de configuration MSAL

Dans votre éditeur de code, ouvrez le fichier authConfig.js et ajoutez le code suivant :

require('dotenv').config();

const TENANT_SUBDOMAIN = process.env.TENANT_SUBDOMAIN || 'Enter_the_Tenant_Subdomain_Here';
const REDIRECT_URI = process.env.REDIRECT_URI || 'http://localhost:3000/auth/redirect';
const POST_LOGOUT_REDIRECT_URI = process.env.POST_LOGOUT_REDIRECT_URI || 'http://localhost:3000';

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL Node configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/configuration.md
 */
const msalConfig = {
    auth: {
        clientId: process.env.CLIENT_ID || 'Enter_the_Application_Id_Here', // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
        authority: process.env.AUTHORITY || `https://${TENANT_SUBDOMAIN}.ciamlogin.com/`, // replace "Enter_the_Tenant_Subdomain_Here" with your tenant name
        clientSecret: process.env.CLIENT_SECRET || 'Enter_the_Client_Secret_Here', // Client secret generated from the app registration in Azure portal
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: 'Info',
        },
    },
};

module.exports = {
    msalConfig,
    REDIRECT_URI,
    POST_LOGOUT_REDIRECT_URI,
    TENANT_SUBDOMAIN
};

L’objet msalConfig contient un ensemble d’options de configuration que vous utilisez pour personnaliser le comportement de vos flux d’authentification.

Dans votre fichier authConfig.js, remplacez :

Enter_the_Application_Id_Here par l’ID d’application (client) de l’application que vous avez inscrite précédemment.
Enter_the_Tenant_Subdomain_Here par le sous-domaine de l’annuaire (locataire). Par exemple, si votre domaine principal du locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous n’avez pas le nom de votre locataire, découvrez comment consulter les détails de votre locataire.
Enter_the_Client_Secret_Here par la valeur du secret d’application que vous avez copiée précédemment.

Si vous utilisez le fichier .env pour stocker vos informations de configuration :

Dans votre éditeur de code, ouvrez le fichier .env et ajoutez le code suivant.

    CLIENT_ID=Enter_the_Application_Id_Here
    TENANT_SUBDOMAIN=Enter_the_Tenant_Subdomain_Here
    CLIENT_SECRET=Enter_the_Client_Secret_Here
    REDIRECT_URI=http://localhost:3000/auth/redirect
    POST_LOGOUT_REDIRECT_URI=http://localhost:3000

Remplacez les espaces réservés Enter_the_Application_Id_Here, Enter_the_Tenant_Subdomain_Here et Enter_the_Client_Secret_Here, comme décrit précédemment.

Vous exportez les variables msalConfig, REDIRECT_URI, TENANT_SUBDOMAIN et POST_LOGOUT_REDIRECT_URI dans le fichier authConfig.js, ce qui les rend accessibles partout où vous en avez besoin.

Utiliser un domaine d’URL personnalisé (facultatif)

Utilisez un domaine personnalisé pour personnaliser entièrement l’URL d’authentification. Du point de vue des utilisateurs, ces derniers restent sur votre domaine pendant le processus d’authentification, au lieu d’être redirigés vers le nom de domaine ciamlogin.com.

Procédez de la manière suivante pour utiliser un domaine personnalisé :

Utilisez les étapes décrites dans Activer les domaines d’URL personnalisés pour les applications dans des locataires externes afin d’activer un domaine d’URL personnalisé pour votre locataire externe.
Dans votre fichier authConfig.js, recherchez l’objet auth, puis :
1. Mettez à jour la valeur de la propriété authority sur https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Remplacez Enter_the_Custom_Domain_Here par votre domaine d’URL personnalisé et Enter_the_Tenant_ID_Here par votre ID de locataire. Si vous ne disposez pas de votre ID de locataire, découvrez comment consulter les détails de votre locataire.
2. Ajoutez une propriété knownAuthorities avec une valeur [Entrer_le_domaine_personnalisé_ici].

Après avoir apporté les modifications à votre fichier authConfig.js, si votre domaine d’URL personnalisé est login.contoso.com et que votre ID de locataire est aaaabbbb-0000-cccc-1111-dddd2222eeee, votre fichier devrait ressembler à l’extrait de code suivant :

//...
const msalConfig = {
    auth: {
        authority: process.env.AUTHORITY || 'https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee', 
        knownAuthorities: ["login.contoso.com"],
        //Other properties
    },
    //...
};

Ajouter des routes Express

Les routes Express fournissent les points de terminaison qui nous permettent d’exécuter des opérations comme la connexion, la déconnexion et la consultation des revendications de jeton d’ID.

Point d’entrée de l’application

Dans votre éditeur de code, ouvrez le fichier routes/index.js et ajoutez le code suivant :

const express = require('express');
const router = express.Router();

router.get('/', function (req, res, next) {
    res.render('index', {
        title: 'MSAL Node & Express Web App',
        isAuthenticated: req.session.isAuthenticated,
        username: req.session.account?.username !== '' ? req.session.account?.username : req.session.account?.name,
    });
});    
module.exports = router;

La route / est le point d’entrée de l’application. Elle restitue la vue views/index.hbs que vous avez créée précédemment dans Créer les composants de l’interface utilisateur de l’application. isAuthenticated est une variable booléenne qui détermine ce que vous voyez dans la vue.

Dans votre éditeur de code, ouvrez le fichier routes/auth.js et ajoutez-y le code du fichier auth.js.
Dans votre éditeur de code, ouvrez le fichier controller/authController.js et ajoutez-y le code du fichier authController.js.
Dans votre éditeur de code, ouvrez le fichier auth/AuthProvider.js et ajoutez-y le code du fichier AuthProvider.js.

Les routes /signin, /signout et /redirect sont définies dans le fichier routes/auth.js, mais vous implémentez leur logique dans la classe auth/AuthProvider.js.

La méthode login gère la route /signin :
- Elle lance le flux de connexion en déclenchant la première étape du flux de code d’authentification.
- Elle initialise une instance d’application cliente confidentielle en tirant parti de l’objet de configuration MSAL, msalConfig créé plus tôt.
```
    const msalInstance = this.getMsalInstance(this.config.msalConfig);
```
  La méthode getMsalInstance est définie comme :
```
    getMsalInstance(msalConfig) {
        return new msal.ConfidentialClientApplication(msalConfig);
    }
```
- La première étape du flux de code d’authentification génère une URL de demande de code d’autorisation, puis redirige vers cette URL pour obtenir le code d’autorisation. Cette première étape est implémentée dans la méthode redirectToAuthCodeUrl. Notez comment nous utilisons la méthode getAuthCodeUrl de MSAL pour générer l’URL du code d’autorisation :
```
//...
const authCodeUrlResponse = await msalInstance.getAuthCodeUrl(req.session.authCodeUrlRequest);
//...
```
  Nous redirigeons ensuite vers l’URL du code d’autorisation elle-même.
```
//...
res.redirect(authCodeUrlResponse);
//...
```
La méthode handleRedirect gère la route /redirect :
- Vous avez précédemment défini cette URL en tant qu’URI de redirection pour l’application web dans le Centre d’administration Microsoft Entra dans Inscrire l’application web.
- Ce point de terminaison implémente la deuxième étape du flux de code d’authentification. Il utilise le code d’autorisation pour demander un jeton d’ID à l’aide de la méthode acquireTokenByCode de MSAL.
```
//...
const tokenResponse = await msalInstance.acquireTokenByCode(authCodeRequest, req.body);
//...
```
- Après avoir reçu une réponse, vous pouvez créer une session Express et y stocker les informations que vous voulez. Vous devez inclure isAuthenticated et le définir avec la valeur true :
```
//...        
req.session.idToken = tokenResponse.idToken;
req.session.account = tokenResponse.account;
req.session.isAuthenticated = true;
//...
```
La méthode logout gère la route /signout :
```
async logout(req, res, next) {
    /**
     * Construct a logout URI and redirect the user to end the
        * session with Azure AD. For more information, visit:
        * https://docs.microsoft.com/azure/active-directory/develop/v2-protocols-oidc#send-a-sign-out-request
        */
    const logoutUri = `${this.config.msalConfig.auth.authority}${TENANT_SUBDOMAIN}.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=${this.config.postLogoutRedirectUri}`;

    req.session.destroy(() => {
        res.redirect(logoutUri);
    });
}
```
- Elle lance la demande de déconnexion.
- Quand vous souhaitez déconnecter l’utilisateur de l’application, il ne suffit pas d’arrêter la session de l’utilisateur. Vous devez rediriger l’utilisateur vers l’URI de déconnexion. Autrement, l’utilisateur peut se réauthentifier auprès de votre application sans avoir à réentrer ses informations d’identification. Si le nom de votre locataire est contoso, l’URI de déconnexion ressemble à https://contoso.ciamlogin.com/contoso.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000.

Afficher les revendications du jeton d’ID

Dans votre éditeur de code, ouvrez le fichier routes/users.js et ajoutez le code suivant :

const express = require('express');
const router = express.Router();

// custom middleware to check auth state
function isAuthenticated(req, res, next) {
    if (!req.session.isAuthenticated) {
        return res.redirect('/auth/signin'); // redirect to sign-in route
    }

    next();
};

router.get('/id',
    isAuthenticated, // check if user is authenticated
    async function (req, res, next) {
        res.render('id', { idTokenClaims: req.session.account.idTokenClaims });
    }
);        
module.exports = router;

Si l’utilisateur est authentifié, la route /id affiche les revendications du jeton d’ID à l’aide de la vue views/id.hbs. Vous avez ajouté cette vue précédemment dans Créer les composants de l’interface utilisateur de l’application.

Pour extraire une revendication spécifique du jeton d’ID, comme nom donné :

const givenName = req.session.account.idTokenClaims.given_name

Finaliser votre application web

Dans votre éditeur de code, ouvrez le fichier app.js et ajoutez-y le code du fichier app.js .
Dans votre éditeur de code, ouvrez le fichier server.js et ajoutez-y le code du fichier server.js .
Dans votre éditeur de code, ouvrez le fichier package.json, puis mettez à jour la propriété scripts pour :
```
"scripts": {
"start": "node server.js"
}
```

Exécuter et tester l’application web

Dans votre terminal, vérifiez que vous êtes dans le dossier de projet qui contient votre application web, comme ciam-sign-in-node-express-web-app.
Dans votre terminal, exécutez la commande suivante :
```
npm start
```
Ouvrez votre navigateur, puis accédez à http://localhost:3000. Vous devez voir une page similaire à la capture d’écran suivante :
Une fois le chargement de la page terminé, sélectionnez le lien Se connecter. Vous êtes invité à vous connecter.
Dans la page de connexion, tapez votre Adresse e-mail, sélectionnez Suivant, tapez votre Mot de passe, puis sélectionnez Se connecter. Si vous n’avez pas de compte, sélectionnez le lien Pas de compte ? En créer un, qui démarre le flux d’inscription.
Si vous choisissez l’option d’inscription, effectuez l’ensemble du processus d’inscription en renseignant votre e-mail, code secret à usage unique, nouveau mot de passe et autres détails de compte. Vous observez une page similaire à la capture d’écran suivante. Vous voyez une page similaire si vous choisissez l’option de connexion.
Sélectionnez Se déconnecter pour déconnecter l’utilisateur de l’application web, ou sélectionnez Afficher les revendications de jeton d’ID pour voir les revendications de jeton d’ID renvoyées par Microsoft Entra.

Partager via

Prérequis

Créer un objet de configuration MSAL

Utiliser un domaine d’URL personnalisé (facultatif)

Ajouter des routes Express

Point d’entrée de l’application

Afficher les revendications du jeton d’ID

Finaliser votre application web

Exécuter et tester l’application web

Voir aussi

Commentaires

Ressources supplémentaires

Partager via

Prérequis

Créer un objet de configuration MSAL

Utiliser un domaine d’URL personnalisé (facultatif)

Ajouter des routes Express

Point d’entrée de l’application

Se connecter et se déconnecter

Afficher les revendications du jeton d’ID

Finaliser votre application web

Exécuter et tester l’application web

Voir aussi

Commentaires

Ressources supplémentaires