Tutoriel : Créer une application monopage (SPA) React pour l’authentification dans un locataire externe

Article
02/03/2024

Ce tutoriel est la partie 2 d’une série qui montre la création d’une application monopage (SPA, Securing Privileged Access) React et sa préparation pour l’authentification en utilisant le centre d’administration Microsoft Entra. Dans la Partie 1 de cette série, vous avez inscrit une application, puis configuré des flux utilisateur dans votre instance externe. Ce tutoriel montre comment créer une application monopage React en utilisant npm, ainsi que les fichiers nécessaires pour l’authentification et l’autorisation.

Dans ce tutoriel,

Créer un projet React dans Visual Studio Code
Installer des packages d’identité et de démarrage
Configurer les paramètres de l’application

Prérequis

Tutoriel : Préparer votre locataire externe à authentifier les utilisateurs dans une application monopage (SPA) React.
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.

Créer un projet React

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 les commandes suivantes pour créer un projet React nommé reactspalocal, modifier à nouveau le répertoire et démarrez le projet React. Un navigateur Web s’ouvre par défaut à l’adresse http://localhost:3000/. Le navigateur reste ouvert et actualise l’affichage pour chaque modification enregistrée.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

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

reactspalocal
├─── public
│   └─── index.html
└───src
    ├─── components
    │   └─── DataDisplay.jsx
    │   └─── NavigationBar.jsx
    │   └─── PageLayout.jsx
    └───styles
    │   └─── App.css
    │   └─── index.css
    └─── utils
    │    └─── claimUtils.js
    └── App.jsx
    └── authConfig.js
    └── index.js

Installer les dépendances de l’application

Les packages npm liés à l’identité doivent être installés dans le projet pour activer l’authentification d’utilisateur. Pour la conception du projet, Bootstrap est utilisé.

Dans la barre du Terminal, sélectionnez l’icône + pour créer un nouveau terminal. Une nouvelle fenêtre de terminal s’ouvre pour permettre à l’autre terminal de continuer à s’exécuter en arrière-plan.
Si nécessaire, accédez à reactspalocal, puis entrez les commandes suivantes dans le terminal pour installer les packages msal et bootstrap.
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Créer le fichier de configuration d’authentification ,authConfig.js

Dans le dossier src, ouvrez authConfig.js pour ajouter l’extrait de code suivant :

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from '@azure/msal-browser';

/**
 * 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 
 */

export const msalConfig = {
    auth: {
        clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
        authority: 'https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/', // Replace the placeholder with your tenant subdomain 
        redirectUri: '/', // Points to window.location.origin. You must register this URI on Azure Portal/App Registration.
        postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
        navigateToLoginRequestUrl: false, // 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 between tabs.
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                    default:
                        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://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: [],
};

/**
 * An optional silentRequest object can be used to achieve silent SSO
 * between applications by providing a "login_hint" property.
 */
// export const silentRequest = {
//     scopes: ["openid", "profile"],
//     loginHint: "example@domain.net"
// };

Remplacez les valeurs suivantes par les valeurs du Portail Azure :
- Recherchez la valeur Enter_the_Application_Id_Here, puis remplacez-la par l’ID d’application (clientId) de l’application que vous avez inscrite dans le Centre d’administration Microsoft Entra.
- Dans Autorité, recherchez Enter_the_Tenant_Subdomain_Here et remplacez-le par le sous-domaine de votre locataire. Par exemple, si votre domaine principal du locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous ne disposez pas du nom de votre locataire, découvrez comment consulter les détails de votre locataire.
Enregistrez le fichier .

Modifier index.js afin d’inclure le fournisseur d’authentification

Toutes les parties de l’application nécessitant une authentification doivent être encapsulées dans le composant MsalProvider. Vous instanciez une PublicClientApplication, puis vous la transmettez à MsalProvider.

Dans le dossier src, ouvrez index.js et remplacez le contenu du fichier par l’extrait de code suivant pour utiliser les packages msal et le style de démarrage :

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { PublicClientApplication, EventType } from '@azure/msal-browser';
import { msalConfig } from './authConfig';

import 'bootstrap/dist/css/bootstrap.min.css';
import './styles/index.css';

/**
 * MSAL should be instantiated outside of the component tree to prevent it from being re-instantiated on re-renders.
 * For more, visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
 */
const msalInstance = new PublicClientApplication(msalConfig);

// Default to using the first account if no account is active on page load
if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
    // Account selection logic is app dependent. Adjust as needed for different use cases.
    msalInstance.setActiveAccount(msalInstance.getActiveAccount()[0]);
}

// Listen for sign-in event and set active account
msalInstance.addEventCallback((event) => {
    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {
        const account = event.payload.account;
        msalInstance.setActiveAccount(account);
    }
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App instance={msalInstance}/>
);

Étape suivante

Partie 3 : Gérer les flux d’authentification dans une application monopage React

Partage via