Tutoriel : Ajouter des composants fonctionnels de connexion et de déconnexion dans une application à page unique React

S’applique à : Cercle vert des locataires de main-d’œuvre Locataires externes (en savoir plus)

Dans ce tutoriel, vous allez configurer une application React à page unique pour l’authentification. Dans la première partie de cette série, vous avez créé une spa React et vous l’avez préparée pour l’authentification. Dans ce tutoriel, vous allez apprendre à ajouter des flux d’authentification en ajoutant des composants fonctionnels MSAL (Microsoft Authentication Library) à votre application et à créer une interface utilisateur réactive pour votre application.

Dans ce tutoriel, vous allez :

Conditions préalables

• Achèvement des prérequis et des étapes du Tutoriel : préparer une application pour l’authentification.

Ajouter des composants fonctionnels à l’application

Les composants fonctionnels sont les blocs de construction des applications React et sont utilisés pour générer les expériences de connexion et de déconnexion dans votre application.

Ajouter le composant NavigationBar

La barre de navigation fournit l’expérience de connexion et de déconnexion pour l’application. La variable d’instance précédemment définie dans le fichier index.js sera utilisée pour appeler les méthodes de connexion et de déconnexion, qui redirigeront l’utilisateur vers la page de connexion.

1. Ouvrez src/components/NavigationBar.jsx et ajoutez l’extrait de code suivant ;

   import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from '@azure/msal-react';
   import { Navbar, Button } from 'react-bootstrap';
   import { loginRequest } from '../authConfig';
   
   export const NavigationBar = () => {
       const { instance } = useMsal();
   
       const handleLoginRedirect = () => {
           instance.loginRedirect(loginRequest).catch((error) => console.log(error));
       };
   
       const handleLogoutRedirect = () => {
           instance.logoutRedirect().catch((error) => console.log(error));
       };
   
       /**
        * 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.
        */
       return (
           <>
               <Navbar bg="primary" variant="dark" className="navbarStyle">
                   <a className="navbar-brand" href="/">
                       Microsoft identity platform
                   </a>
                   <AuthenticatedTemplate>
                       <div className="collapse navbar-collapse justify-content-end">
                           <Button variant="warning" onClick={handleLogoutRedirect}>
                               Sign out
                           </Button>
                       </div>
                   </AuthenticatedTemplate>
                   <UnauthenticatedTemplate>
                       <div className="collapse navbar-collapse justify-content-end">
                           <Button onClick={handleLoginRedirect}>Sign in</Button>
                       </div>
                   </UnauthenticatedTemplate>
               </Navbar>
           </>
       );
   };
   

2. Enregistrez le fichier.

Ajouter le composant PageLayout

Le composant PageLayout est utilisé pour afficher le contenu principal de l’application et peut être personnalisé pour inclure tout contenu supplémentaire que vous souhaitez afficher sur chaque page de votre application. Les informations du profil de l’utilisateur s’affichent en transmettant les informations via des props.

1. Ouvrez src/components/PageLayout.jsx et ajoutez l’extrait de code suivant ;

   import { AuthenticatedTemplate } from '@azure/msal-react';
   
   import { NavigationBar } from './NavigationBar.jsx';
   
   export const PageLayout = (props) => {
       /**
        * 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.
        */
       return (
           <>
               <NavigationBar />
               <br />
               <h5>
                   <center>Welcome to the Microsoft Authentication Library For React Tutorial</center>
               </h5>
               <br />
               {props.children}
               <br />
               <AuthenticatedTemplate>
                   <footer>
                       <center>
                           How did we do?
                           <a
                               href="https://forms.office.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR_ivMYEeUKlEq8CxnMPgdNZUNDlUTTk2NVNYQkZSSjdaTk5KT1o4V1VVNS4u"
                               rel="noopener noreferrer"
                               target="_blank"
                           >
                               {' '}
                               Share your experience!
                           </a>
                       </center>
                   </footer>
               </AuthenticatedTemplate>
           </>
       );
   }
   

2. Enregistrez le fichier.

Ajouter le composant DataDisplay

Le DataDisplay composant sera utilisé pour afficher les informations de profil de l’utilisateur et une table des revendications, qui sera créée dans la section suivante du didacticiel. Le IdTokenData composant sera utilisé pour afficher les prétentions dans le jeton d’ID.

1. Ouvrez src/components/DataDisplay.jsx et ajoutez l’extrait de code suivant ;

   import { Table } from 'react-bootstrap';
   import { createClaimsTable } from '../utils/claimUtils';
   
   import '../styles/App.css';
   
   export const IdTokenData = (props) => {
       const tokenClaims = createClaimsTable(props.idTokenClaims);
   
       const tableRow = Object.keys(tokenClaims).map((key, index) => {
           return (
               <tr key={key}>
                   {tokenClaims[key].map((claimItem) => (
                       <td key={claimItem}>{claimItem}</td>
                   ))}
               </tr>
           );
       });
       return (
           <>
               <div className="data-area-div">
                   <p>
                       See below the claims in your <strong> ID token </strong>. For more information, visit:{' '}
                       <span>
                           <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/id-tokens#claims-in-an-id-token">
                               docs.microsoft.com
                           </a>
                       </span>
                   </p>
                   <div className="data-area-div">
                       <Table responsive striped bordered hover>
                           <thead>
                               <tr>
                                   <th>Claim</th>
                                   <th>Value</th>
                                   <th>Description</th>
                               </tr>
                           </thead>
                           <tbody>{tableRow}</tbody>
                       </Table>
                   </div>
               </div>
           </>
       );
   };
   

2. Enregistrez le fichier.

Étapes suivantes