Partager via

Tutoriel : Créer une application à page unique React et la préparer pour l’authentification

S’applique à : Cercle vert avec un symbole de coche blanche. Locataires des 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 React (SPA) et la préparer à l’authentification à l’aide de la plateforme d’identités Microsoft. Ce tutoriel montre comment créer une SPA React à l’aide de npm, créer les fichiers nécessaires à l’authentification et à l’autorisation, et ajouter les détails de votre locataire 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 tutoriel, vous allez :

  • Créer un projet React
  • 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 de l’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 React

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

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

  3. 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 effectue une actualisation à chaque modification sauvegardée.

    npx create-react-app reactspalocal
cd reactspalocal
npm start

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

    ├─── public
│   └─── index.html
└───src
    └─── styles
    │   └─── App.css
    │   └─── index.css
    ├─── utils
    │   └─── claimUtils.js
    ├─── components
    │   └─── DataDisplay.jsx
    │   └─── NavigationBar.jsx
    │   └─── PageLayout.jsx
    └── App.jsx
    └── authConfig.js
    └── 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 le style de projet, Bootstrap sera utilisé.

  1. Dans la barre du Terminal, sélectionnez l’icône + pour créer un nouveau terminal. Une fenêtre de terminal distincte s’ouvre avec le terminal de nœud précédent qui continue à s’exécuter en arrière-plan.

  2. Vérifiez que le répertoire approprié (reactspalocal) est sélectionné, puis entrez ce qui suit dans le terminal pour installer les packages msal et bootstrap appropriés.

    npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap

Ajouter les 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. Dans le dossier src, ouvrez authConfig.js pour ajouter l’extrait de code suivant :

    
 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://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // Replace the placeholder with your tenant info
         redirectUri: 'http://localhost:3000', // Points to window.location.origin. You must register this URI on Microsoft Entra admin center/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/en-us/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"
 // };

  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.

Ajouter le fournisseur d’authentification

Les msal packages sont utilisés pour fournir l’authentification dans l’application. Le msal-browser package est utilisé pour gérer le flux d’authentification et le msal-react package est utilisé pour s’intégrer msal-browser à React. addEventCallback est utilisé pour écouter les événements qui se produisent pendant le processus d’authentification, par exemple lorsqu’un utilisateur se connecte correctement. La setActiveAccount méthode est utilisée pour définir le compte actif de l’application, qui est utilisé pour déterminer les informations de l’utilisateur à afficher.

  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 { createRoot } 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.getAllAccounts()[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 = createRoot(document.getElementById('root'));
root.render(
    <App instance={msalInstance}/>
);

  2. Enregistrez le fichier.

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

Ajouter le composant d’application principal

Toutes les parties de l’application nécessitant une authentification doivent être encapsulées dans le composant MsalProvider. Vous définissez une instance variable qui appelle le useMsal hook pour obtenir l’instance PublicClientApplication , puis passez-la à MsalProvider. Le MsalProvider composant rend l’instance PublicClientApplication disponible dans votre application via l’API de contexte de React. Tous les composants sous-jacents MsalProvider auront accès à l’instance PublicClientApplication via le contexte, ainsi que tous les hooks et composants fournis par msal-react.

  1. Dans le dossier src , ouvrez App.jsx et remplacez le contenu du fichier par l’extrait de code suivant :

    import { MsalProvider, AuthenticatedTemplate, useMsal, UnauthenticatedTemplate } from '@azure/msal-react';
import { Container, Button } from 'react-bootstrap';
import { PageLayout } from './components/PageLayout';
import { IdTokenData } from './components/DataDisplay';
import { loginRequest } from './authConfig';

import './styles/App.css';

/**
* Most applications will need to conditionally render certain components based on whether a user is signed in or not. 
* msal-react provides 2 easy ways to do this. AuthenticatedTemplate and UnauthenticatedTemplate components will 
* only render their children if a user is authenticated or unauthenticated, respectively. For more, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
*/
const MainContent = () => {
    /**
    * useMsal is hook that returns the PublicClientApplication instance,
    * that tells you what msal is currently doing. For more, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/hooks.md
    */
    const { instance } = useMsal();
    const activeAccount = instance.getActiveAccount();

    const handleRedirect = () => {
        instance
            .loginRedirect({
                ...loginRequest,
                prompt: 'create',
            })
            .catch((error) => console.log(error));
    };
    return (
        <div className="App">
            <AuthenticatedTemplate>
                {activeAccount ? (
                    <Container>
                        <IdTokenData idTokenClaims={activeAccount.idTokenClaims} />
                    </Container>
                ) : null}
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate>
                <Button className="signInButton" onClick={handleRedirect} variant="primary">
                    Sign up
                </Button>
            </UnauthenticatedTemplate>
        </div>
    );
};


/**
* msal-react is built on the React context API and all parts of your app that require authentication must be 
* wrapped in the MsalProvider component. You will first need to initialize an instance of PublicClientApplication 
* then pass this to MsalProvider as a prop. All components underneath MsalProvider will have access to the 
* PublicClientApplication instance via context as well as all hooks and components provided by msal-react. For more, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
*/
const App = ({ instance }) => {
    return (
        <MsalProvider instance={instance}>
            <PageLayout>
                <MainContent />
            </PageLayout>
        </MsalProvider>
    );
};

export default App;

  2. Enregistrez le fichier.

Étapes suivantes

Tutoriel : Créer des composants pour la connexion et se déconnecter dans une application à page unique React