Activer l’authentification dans votre propre application React à l’aide d’Azure Active Directory B2C

2025-05-08

Important

À compter du 1er mai 2025, Azure AD B2C ne sera plus disponible pour les nouveaux clients. Pour plus d’informations, consultez notre FAQ.

Cet article explique comment ajouter l’authentification Azure Active Directory B2C (Azure AD B2C) à votre propre application monopage React (SPA). Découvrez comment intégrer une application React à la bibliothèque d’authentification MSAL pour React .

Utilisez cet article avec l’article associé intitulé Configurer l’authentification dans un exemple d’application à page unique React. Remplacez l’exemple d’application React par votre propre application React. Une fois les étapes décrites dans cet article terminées, votre application accepte les connexions via Azure AD B2C.

Conditions préalables

Passez en revue les conditions préalables et les étapes d’intégration dans l’article Configurer l’authentification dans un exemple d’application à page unique React .

Étape 1 : Créer un projet d’application React

Vous pouvez utiliser une application React existante ou créer une application React. Pour créer un projet, exécutez les commandes suivantes dans votre interpréteur de commandes :

npx create-react-app my-app
cd my-app

Étape 2 : Installer les dépendances

Pour installer les bibliothèques MSAL Browser et MSAL React dans votre application, exécutez la commande suivante dans votre interpréteur de commandes :

npm i @azure/msal-browser  @azure/msal-react

Installez react-router-dom version 5.*. Le package react-router-dom contient des liaisons pour l’utilisation de React Router dans les applications web. Exécutez la commande suivante dans votre interpréteur de commandes :

npm i react-router-dom@5.3.3

Installez bootstrap pour React (facultatif, pour l’interface utilisateur) :

npm i bootstrap react-bootstrap

Étape 3 : Ajouter les composants d’authentification

L’exemple de code est constitué des composants suivants. Ajoutez ces composants à partir de l’exemple d’application React à votre propre application :

public/index.html- Le processus de regroupement utilise ce fichier comme modèle et injecte les composants React dans l’élément <div id="root"> . Si vous l’ouvrez directement dans le navigateur, vous voyez une page vide.
src/authConfig.js : fichier de configuration qui contient des informations sur votre fournisseur d’identité Azure AD B2C et le service d’API web. L’application React utilise ces informations pour établir une relation d’approbation avec Azure AD B2C, se connecter et déconnecter l’utilisateur, acquérir des jetons et valider les jetons.
src/index.js : point d’entrée JavaScript vers votre application. Ce fichier JavaScript :
- Monte le App composant racine dans l’élément public/index.html de <div id="root"> la page.
- Lance la bibliothèque MSAL PublicClientApplication avec la configuration définie dans le fichier authConfig.js . MsAL React doit être instancié en dehors de l’arborescence des composants pour empêcher sa réinition sur les réinitituations.
- Après l’instanciation de la bibliothèque MSAL, le code JavaScript transmet les msalInstance propriétés à vos composants d’application. Par exemple : <App instance={msalInstance} />.
src/App.jsx : définit les composants App et Pages :
- Le composant Application est le composant de niveau supérieur de votre application. Il encapsule tout entre MsalProvider les composants. Tous les composants sous MsalProvider ont accès à l’instance PublicClientApplication via le contexte et tous les hooks et composants fournis par MSAL React. Le composant App monte l’élément PageLayout et son élément Enfant Pages .
- Le composant Pages inscrit et annule l’inscription des rappels d’événements MSAL. Les événements sont utilisés pour gérer les erreurs MSAL. Il définit également la logique de routage de l’application.
Important

Si le nom du fichier du composant d’application est App.js, remplacez-le par App.jsx.
src/pages/Hello.jsx : montre comment appeler une ressource protégée avec un jeton du porteur OAuth2.
- Il utilise le hook useMsal qui retourne l’instance PublicClientApplication.
- Avec l’instance PublicClientApplication, elle acquiert un jeton d’accès pour appeler l’API REST.
- Appelle la fonction callApiWithToken pour extraire les données de l’API REST et affiche le résultat à l’aide du composant DataDisplay .
src/components/NavigationBar.jsx : barre de navigation supérieure de l’application qui a les boutons de connexion, de déconnexion, de modification du profil et d’appel des boutons de réinitialisation de l’API REST.
- Il utilise le protocole AuthenticatedTemplate et UnauthenticatedTemplate, qui affiche uniquement leurs enfants si un utilisateur est authentifié ou non authentifié, respectivement.
- Gérez la connexion et la déconnexion avec les événements de redirection et de fenêtre contextuelle.
src/components/PageLayout.jsx
- Mise en page commune qui fournit à l’utilisateur une expérience cohérente au fur et à mesure qu’il navigue d’une page à l’autre. La disposition inclut des éléments d’interface utilisateur courants tels que l’en-tête de l’application, le composant NavigationBar , le pied de page et ses composants enfants.
- Il utilise le authenticatedTemplate, qui restitue ses enfants uniquement si un utilisateur est authentifié.
src/components/DataDisplay.jsx : affiche le retour des données à partir de l’appel d’API REST.
src/styles/App.css et src/styles/index.css - Fichiers de style CSS pour l’application.
src/fetch.js : récupère les requêtes HTTP à l’API REST.

Étape 4 : Configurer votre application React

Après avoir ajouté les composants d’authentification, configurez votre application React avec vos paramètres Azure AD B2C. Les paramètres du fournisseur d’identité Azure AD B2C sont configurés dans le fichier authConfig.js .

Pour obtenir des conseils, consultez Configurer votre application React.

Étape 5 : Exécuter l’application React

À partir de Visual Studio Code, ouvrez un nouveau terminal et exécutez les commandes suivantes :
```
npm install && npm update
npm start
```
La fenêtre de console affiche le numéro de port de l’emplacement d’hébergement de l’application :
```
Listening on port 3000...
```
Pour appeler une API REST, suivez les instructions pour exécuter l’API web
Dans votre navigateur, accédez à l’affichage de http://localhost:3000 l’application

Partager via