Tutoriel : créer une application monopage JavaScript Vanilla pour l’authentification dans un tenant externe

Article
04/18/2024

Ce tutoriel est la deuxième partie d’une série qui présente la construction d’une application monopage (SPA) Vanilla JavaScript (JS) et sa préparation à l’authentification à l’aide du centre d’administration Microsoft Entra. Dans la première partie de cette série, vous avez enregistré une application et configuré des flux d’utilisateurs dans votre locataire externe. Ce tutoriel montre comment créer une SPA JavaScript Vanille à l’aide de npm et créer des fichiers nécessaires à l’authentification et à l’autorisation.

Dans ce tutoriel,

Créer un projet Vanilla JavaScript dans Visual Studio Code
Installer les packages nécessaires
Ajouter du code à server.js pour créer un serveur

Prérequis

Tutoriel : Préparer votre locataire externe à authentifier des utilisateurs dans une application monopage JavaScript Vanilla.
Bien que tout environnement de développement intégré (IDE) qui prend en charge les applications JavaScript Vanille puisse être utilisé, Visual Studio Code est recommandé pour ce guide. Vous pouvez le télécharger à partir de la page Téléchargements.
Node.js.

Créer un projet JavaScript Vanille et installer des dépendances

Ouvrez Visual Studio Code, sélectionnez Fichier>Ouvrir le dossier.... Accédez à et sélectionnez l’emplacement dans lequel vous souhaitez créer votre projet.
Ouvrez un nouveau terminal en sélectionnant Terminal>Nouveau Terminal.
Exécutez la commande suivante pour créer un projet JavaScript Vanille :
```
npm init -y
```

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

    └── public
        └── authConfig.js
        └── authPopup.js
        └── authRedirect.js
        └── claimUtils.js
        └── index.html
        └── signout.html
        └── styles.css
        └── ui.js    
    └── server.js

Installer les dépendances de l’application

Dans le Terminal, exécutez la commande suivante pour installer les dépendances dont le projet a besoin :
```
npm install express morgan @azure/msal-browser
```

Modifier le fichier server.js

Express est un framework d’application web pour Node.js. Il est utilisé pour créer un serveur qui héberge l’application. Morgan est l’intergiciel qui journalise les requêtes HTTP dans la console. Le fichier de serveur est utilisé pour héberger ces dépendances et contient les routes de l’application. L’authentification et l’autorisation sont gérés par la bibliothèque d’authentification Microsoft pour JavaScript (MSAL.js).

Ajoutez l’extrait de code suivant à votre fichier server.js :

const express = require('express');
const morgan = require('morgan');
const path = require('path');

const DEFAULT_PORT = process.env.PORT || 3000;

// initialize express.
const app = express();

// Configure morgan module to log all requests.
app.use(morgan('dev'));

// serve public assets.
app.use(express.static('public'));

// serve msal-browser module
app.use(express.static(path.join(__dirname, "node_modules/@azure/msal-browser/lib")));

// set up a route for signout.html
app.get('/signout', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/signout.html'));
});

// set up a route for redirect.html
app.get('/redirect', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/redirect.html'));
});

// set up a route for index.html
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(DEFAULT_PORT, () => {
    console.log(`Sample app listening on port ${DEFAULT_PORT}!`);
});

Dans ce code, la variable d’application est initialisée avec le module express, puis express permet de servir les ressources publiques. MSAL-browser est servi comme ressource statique et permet de lancer le flux d’authentification.

Étape suivante

Partie 3 : Gérer les flux d’authentification dans une SPA JavaScript Vanille

Partager via