Partager via

Tutoriel : créer une application monopage React et la préparer à l’authentification

  • Article

Une fois l’inscription effectuée, vous pouvez créer un projet React en utilisant un environnement de développement intégré (IDE). Ce tutoriel montre comment créer une application monopage React au moyen de npm, ainsi que les fichiers nécessaires pour l’authentification et l’autorisation.

Dans ce tutoriel, vous allez :

  • Créer un nouveau projet React
  • Configurer les paramètres de l’application
  • Installer des packages d’identité et de démarrage
  • Ajouter du code d’authentification à l’application

Prérequis

  • Respect des prérequis et exécution des étapes du Tutoriel : Inscrire une application.
  • Bien qu’il soit possible d’utiliser n’importe quel environnement de développement intégré prenant en charge les applications React, les IDE Visual Studio suivants sont utilisés pour ce didacticiel. Ils peuvent être téléchargés depuis la page Téléchargements. Pour les utilisateurs macOS, il est recommandé d’utiliser Visual Studio Code.
    • Visual Studio 2022
    • Visual Studio Code
  • Node.js.

Créer un nouveau projet React

Utilisez les onglets suivants pour créer un projet React dans l’environnement de développement intégré.

  1. Ouvrez Visual Studio, puis sélectionnez Créer un projet.

  2. Recherchez et choisissez le modèle Projet autonome JavaScript React, puis sélectionnez Suivant.

  3. Nommez le projet, par exemple reactspalocal.

  4. Choisissez un emplacement pour le projet ou validez l’option par défaut, puis sélectionnez Suivant.

  5. Dans Informations supplémentaires, sélectionnez l’option Créer.

  6. Dans la barre d’outils, sélectionnez Démarrer sans débogage pour le lancement de l’application. Un navigateur Web s’ouvre par défaut à l’adresse http://localhost:3000/. Le navigateur reste ouvert et effectue une actualisation à chaque modification sauvegardée.

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

    ├─── public
│   └─── index.html
└───src
    ├─── components
    │   └─── PageLayout.jsx
    │   └─── ProfileData.jsx
    │   └─── SignInButton.jsx
    │   └─── SignOutButton.jsx
    └── App.css
    └── App.jsx
    └── authConfig.js
    └── graph.js
    └── index.css
    └── index.js

Installer des packages d’identité et de démarrage

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

  1. Dans l’Explorateur de solutions, effectuez un clic droit sur l’option npm et sélectionnez Installer les nouveaux packages npm.
  2. Recherchez @azure/MSAL-browser, puis sélectionnez Installer le package. Répétez pour @azure/MSAL-react.
  3. Recherchez et installez react-bootstrap.
  4. Sélectionnez Fermer.

Pour en savoir plus sur ces packages, consultez la documentation dans msal-browser et msal-react.

Création du fichier de configuration de l’authentification

  1. 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",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
        redirectUri: "http://localhost:3000",
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        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/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
};

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

    • clientId – Identificateur de l’application, également appelé client. Remplacez Enter_the_Application_Id_Here par la valeur du paramètre ID d’application (client) enregistrée précédemment depuis la page Vue d’ensemble de l’application inscrite.
    • authority – Il se compose de deux parties :
      • L’instance est le point de terminaison du fournisseur de cloud. Vérifiez les différents points de terminaison disponibles dans les clouds nationaux.
      • L’ID du locataire est l’identificateur du locataire dans lequel l’application est inscrite. Remplacez Enter_the_Tenant_Info_Here par la valeur de l’ID du répertoire (tenant) enregistrée précédemment dans la page de présentation de l’application inscrite.

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

  1. 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';
import './index.css';
import App from './App';

import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { msalConfig } from './authConfig';

// Bootstrap components
import 'bootstrap/dist/css/bootstrap.min.css';

const msalInstance = new PublicClientApplication(msalConfig);

const root = ReactDOM.createRoot(document.getElementById('root'));

/**
 * We recommend wrapping most or all of your components in the MsalProvider component. It's best to render the MsalProvider as close to the root as possible.
 */
 root.render(
  <React.StrictMode>
      <MsalProvider instance={msalInstance}>
          <App />
      </MsalProvider>
  </React.StrictMode>
);

  2. Enregistrez le fichier.

Étapes suivantes

Didacticiel : Créer des composants pour la connexion et la déconnexion dans une application monopage React