Partager via

Tutoriel : Préparer une application à page unique JavaScript pour l’authentification

S’applique à : Cercle vert avec un symbole de coche blanche. Locataires d’employés Cercle vert avec un symbole de coche blanche. Locataires externes (En savoir plus)

Dans ce tutoriel, vous allez créer une application monopage JavaScript (SPA) et la préparer à l’authentification à l’aide de la plateforme d’identités Microsoft. Ce tutoriel montre comment créer une application à page unique (SPA) en JavaScript à l'aide de npm, créer les fichiers nécessaires à l'authentification et à l'autorisation, et ajouter les détails de votre utilisateur au code source. L’application peut être utilisée pour les employés d’un locataire de main-d’œuvre ou pour les clients qui utilisent un locataire externe.

Dans ce didacticiel, vous

  • Créer un projet JavaScript
  • Installer des packages requis pour l’authentification
  • Créer votre structure de fichiers et ajouter du code au fichier serveur
  • Ajouter les détails de votre locataire au fichier de configuration d’authentification

Conditions préalables

  • Un locataire d’employés. Vous pouvez utiliser votre répertoire par défaut ou configurer un nouveau locataire.
  • Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
    • ID d’application (client)
    • ID d’annuaire (locataire)
  • Ajoutez les URI de redirection suivants à l'aide de la configuration de la plateforme d'application monopage. Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
    • URI de redirection : http://localhost:3000/.

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

  1. Connectez-vous au Centre d’administration Microsoft Entra en tant qu’administrateur général.

  2. 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.

  3. Ouvrez un nouveau terminal en sélectionnant Terminal>Nouveau Terminal.

  4. Exécutez la commande suivante pour créer un projet JavaScript :

    npm init -y

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

    └── public
    └── authConfig.js
    └── auth.js
    └── claimUtils.js
    └── index.html
    └── signout.html
    └── styles.css
    └── ui.js    
└── server.js
└── package.json

  6. 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

Ajouter du code au fichier serveur

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).

  1. Ajoutez le code suivant au 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}!`);
});

module.exports = app;

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

Ajout des détails de votre locataire à la configuration MSAL

Le fichier authConfig.js contient les paramètres de configuration du flux d’authentification et est utilisé pour configurer MSAL.js avec les paramètres requis pour l’authentification.

  1. Ouvrez public/authConfig.js et ajoutez le code suivant :

    /**
* Configuration object to be passed to MSAL instance on creation. 
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
*/
const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        // WORKFORCE TENANT
        authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', //  Replace the placeholder with your tenant info
        redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
        navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
        storeAuthStateInCookie: false, // set this to true if you have to support IE
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case msal.LogLevel.Error:
                        console.error(message);
                        return;
                    case msal.LogLevel.Info:
                        console.info(message);
                        return;
                    case msal.LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case msal.LogLevel.Warning:
                        console.warn(message);
                        return;
                }
            },
        },
    },
};

/**
* Scopes you add here will be prompted for user consent during sign-in.
* By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
* For more information about OIDC scopes, visit: 
* https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
*/
const loginRequest = {
    scopes: ["User.Read"],
};

/**
* An optional silentRequest object can be used to achieve silent SSO
* between applications by providing a "login_hint" property.
*/

// const silentRequest = {
//   scopes: ["openid", "profile"],
//   loginHint: "example@domain.net"
// };

// exporting config object for jest
if (typeof exports !== 'undefined') {
    module.exports = {
        msalConfig: msalConfig,
        loginRequest: loginRequest,
    };
}

  2. Remplacez les valeurs suivantes par les valeurs du Centre d’administration Microsoft Entra :

    • Recherchez la valeur Enter_the_Application_Id_Here et remplacez-la par l’ID d’application (clientId) de l’application que vous avez inscrite dans le Centre d’administration Microsoft Entra.
    • Recherchez la valeur Enter_the_Tenant_Info_Here et remplacez-la par l’ID de locataire du locataire du personnel que vous avez créé dans le Centre d’administration Microsoft Entra.

  3. Enregistrez le fichier.

Étape suivante

Gérer les flux d’authentification dans un spa JavaScript