Partager via

Tutoriel : Ajouter la connexion et la déconnexion à une application monopage React pour un locataire externe

  • Article

Ce tutoriel est la dernière partie d’une série qui illustre la création d’une application monopage (SPA) React et sa préparation pour l’authentification à l’aide du centre d’administration Microsoft Entra. Dans la partie 3 de cette série, vous avez créé une application monopage React dans Visual Studio Code et l’avez configurée pour l’authentification. Cette dernière étape vous montre comment ajouter une fonctionnalité de connexion et de déconnexion à l’application.

Dans ce tutoriel,

  • Créer une disposition, puis ajouter l’expérience de connexion et de déconnexion
  • Remplacer la fonction par défaut pour afficher des informations authentifiées
  • Se connecter à l’application, puis s’en déconnecter à l’aide du flux utilisateur

Prérequis

Modifier le nom de fichier, puis ajouter une fonction pour afficher des informations authentifiées

Par défaut, l’application s’exécute via un fichier JavaScript appelé App.js. Cet élément doit être remplacé par .jsx, qui est une extension permettant à un développeur d’écrire du code HTML dans React.

  1. Vérifiez que App.js a été renommé en App.jsx.

  2. Remplacez le code existant 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;

Exécuter votre projet et vous connecter

Tous les extraits de code nécessaires ont été ajoutés, vous pouvez maintenant appeler l’application et la tester dans un navigateur web.

  1. L’application doit déjà s’exécuter dans votre terminal. Si ce n’est pas le cas, exécutez la commande suivante pour démarrer votre application.

    npm start

  2. Ouvrez un navigateur web, puis accédez à http://localhost:3000/ si vous n’êtes pas redirigé automatiquement.

  3. Pour les besoins de ce tutoriel, choisissez l’option Se connecter à l’aide d’une fenêtre contextuelle.

  4. Une fois que la fenêtre contextuelle s’affiche avec les options de connexion, sélectionnez le compte avec lequel vous souhaitez vous connecter.

  5. Il est possible qu’une deuxième fenêtre s’affiche pour indiquer qu’un code sera envoyé à votre adresse e-mail. Si cela se produit, sélectionnez Envoyer le code. Ouvrez l’e-mail de l’équipe du compte Microsoft de l’expéditeur et entrez le code à usage unique à sept chiffres. Une fois celui-ci entré, sélectionnez Se connecter.

  6. Pour Rester connecté, vous pouvez sélectionner Non ou Oui.

  7. L’application demande l’autorisation de se connecter et d’accéder aux données. Sélectionnez Accepter pour continuer.

Vous déconnecter de l’application

  1. Pour vous déconnecter de l’application, sélectionnez Se déconnecter dans la barre de navigation.
  2. Une fenêtre s’affiche pour vous demander de quel compte vous déconnecter.
  3. Une fois la déconnexion réussie, une dernière fenêtre s’affiche pour vous conseiller de fermer toutes les fenêtres de navigateur.

Voir aussi