Tutoriel : Préparer une application Node.js web pour l’authentification

Article
01/30/2024

Ce tutoriel est la deuxième partie d’une série qui décrit la création d’une application web Node.js et sa préparation pour l’authentification à l’aide du centre d’administration Microsoft Entra. Dans la partie 1 de cette série, vous avez inscrit une application et configuré des flux utilisateur dans votre locataire externe. Dans cet tutoriel, vous allez créer un projet Node.js(Express) et organiser tous les dossiers et fichiers dont vous avez besoin. Vous activez la connexion à l’application que vous préparez ici. Les vues de cette application web Node.js(Express) utilisent des handlebars.

Dans ce tutoriel, vous allez :

Créer un projet Node.js
Installer des dépendances
Ajouter des vues d’application et des composants d’interface utilisateur

Prérequis

Tutoriel : préparer votre locataire externe pour connecter des utilisateurs dans une application web Node.js
Même s’il est possible d’utiliser n’importe quel environnement de développement intégré (IDE) prenant en charge les applications React, ce tutoriel utilise Visual Studio Code.
Node.js.
Visual Studio Code ou un autre éditeur de code.

Créer le projet Node.js

À l’emplacement de votre choix sur votre ordinateur, créez un dossier pour héberger votre application de nœud, par exemple ciam-sign-in-node-express-web-app.
Dans votre terminal, remplacez le répertoire dans le dossier de votre application web Node, par cd ciam-sign-in-node-express-web-appexemple , puis exécutez la commande suivante pour créer un projet Node.js :
```
npm init -y
```
La commande init -y crée un fichier package.json par défaut pour votre projet Node.js.

Créez d’autres dossiers et fichiers pour obtenir la structure de projet suivante :

    ciam-sign-in-node-express-web-app/
    ├── server.js
    └── app.js
    └── authConfig.js
    └── package.json
    └── .env
    └── auth/
        └── AuthProvider.js
    └── controller/
        └── authController.js
    └── routes/
        └── auth.js
        └── index.js
        └── users.js
    └── views/
        └── layouts.hbs
        └── error.hbs
        └── id.hbs
        └── index.hbs   
    └── public/stylesheets/
        └── style.css

Installer les dépendances de l’application

Pour installer l’identité requise et Node.js packages npm associés, exécutez la commande suivante dans votre terminal

npm install express dotenv hbs express-session axios cookie-parser http-errors morgan @azure/msal-node

Générer les composants de l’interface utilisateur de l’application

Dans votre éditeur de code, ouvrez le fichier views/index.hbs, puis ajoutez le code suivant :
```
    <h1>{{title}}</h1>
    {{#if isAuthenticated }}
    <p>Hi {{username}}!</p>
    <a href="/users/id">View ID token claims</a>
    <br>
    <a href="/auth/signout">Sign out</a>
    {{else}}
    <p>Welcome to {{title}}</p>
    <a href="/auth/signin">Sign in</a>
    {{/if}}
```
Dans cette vue, si l’utilisateur est authentifié, nous affichons son nom d’utilisateur et des liens pour accéder aux points de terminaison /auth/signout et /users/id. Sinon, l’utilisateur doit accéder au point de terminaison /auth/signin pour se connecter. Nous définissons les routes express pour ces points de terminaison plus loin dans cet article.

Dans votre éditeur de code, ouvrez le fichier views/id.hbs, puis ajoutez le code suivant :

    <h1>Azure AD for customers</h1>
    <h3>ID Token</h3>
    <table>
        <tbody>
            {{#each idTokenClaims}}
            <tr>
                <td>{{@key}}</td>
                <td>{{this}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    <a href="/">Go back</a>

Nous utilisons cette vue pour afficher les revendications de jeton d’ID retournées par ID externe Microsoft Entra à cette application une fois qu’un utilisateur s’est connecté avec succès.

Depuis votre éditeur de code, ouvrez le fichier views/error.hbs, puis ajoutez le code suivant :
```
    <h1>{{message}}</h1>
    <h2>{{error.status}}</h2>
    <pre>{{error.stack}}</pre>
```
Nous utilisons cette vue pour afficher les erreurs qui se produisent lors de l’exécution de l’application.

Depuis votre éditeur de code, ouvrez le fichier views/layout.hbs, puis ajoutez le code suivant :

    <!DOCTYPE html>
    <html>        
        <head>
            <title>{{title}}</title>
            <link rel='stylesheet' href='/stylesheets/style.css' />
        </head>            
        <body>
            {{{content}}}
        </body>        
    </html>

Le fichier layout.hbs se trouve dans le fichier de disposition. Il contient le code HTML dont nous avons besoin dans la vue de l’application.

Dans votre éditeur de code, ouvrez le fichier public/stylesheets/style.css, puis ajoutez le code suivant :

    body {
      padding: 50px;
      font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    }

    a {
      color: #00B7FF;
    }

Étape suivante

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

Partager via