Tutoriel : Activer l’authentification multifacteur dans une application à page unique React à l’aide du Kit de développement logiciel (SDK) JavaScript d’authentification native

S’applique à : Locataires externes (en savoir plus)

Dans ce tutoriel, vous allez apprendre à ajouter l’authentification multifacteur (MFA) dans votre application à page unique React à l’aide du Kit de développement logiciel (SDK) JavaScript de l’authentification native.

Tout comme dans l’inscription de méthode d’authentification forte, le flux MFA se produit dans trois scénarios :

• Lors de la connexion : l’utilisateur se connecte et a une méthode d’authentification forte inscrite.
• Après l’inscription : une fois l’inscription terminée, l’utilisateur se connecte. Les nouveaux utilisateurs doivent inscrire une méthode d’authentification forte avant tout défi MFA. Étant donné que la méthode d’authentification forte est également vérifiée lors de l’inscription, il se peut qu'ils ne soient pas invités à réaliser une authentification MFA supplémentaire.
• Après la réinitialisation du mot de passe en libre-service (SSPR) : l’utilisateur réinitialise son mot de passe et se connecte automatiquement. Si l’utilisateur dispose d’une méthode d’authentification forte enregistrée, il est invité à effectuer un défi d’authentification multifacteur.

Lorsque l’authentification multifacteur est requise, l’utilisateur choisit une méthode de défi MFA dans une liste de méthodes inscrites. Les options disponibles sont le code secret à usage unique par e-mail , le code secret à usage unique SMS ou les deux, en fonction de ce que l’utilisateur a précédemment inscrit.

Le diagramme de flux ci-dessous illustre les trois scénarios suivants :

Prerequisites

• Suivez les étapes de l’inscription, de la connexion, de la réinitialisation du mot de passe et de l’inscription de didacticiels de méthode d’authentification forte .
• Visual Studio Code ou un autre éditeur de code.
• Node.js.
• Activez l’authentification multifacteur (MFA) pour votre application.

Activer l’application pour gérer l’authentification multifacteur

Pour activer l’authentification multifacteur dans votre application React, mettez à jour la configuration de l’application en ajoutant la fonctionnalité requise :

1. Recherchez le fichier src/config/auth-config.ts .

2. Dans l’objet customAuth , ajoutez ou mettez à jour capabilities la propriété pour inclure la mfa_required valeur dans le tableau, comme indiqué dans l’extrait de code suivant :

   const customAuthConfig: CustomAuthConfiguration = {
       customAuth: {
           ...
           capabilities: ["mfa_required"],
           ...
       },
       ...
   };
   

La valeur de fonctionnalité mfa_required informe Microsoft Entra que votre application peut gérer un flux MFA. En savoir plus sur les types et fonctionnalités d’authentification natifs.

Créer des composants d’interface utilisateur

Vous avez besoin de composants de formulaire dans votre application pour prendre en charge le flux MFA. Pour ajouter ces composants à votre application, procédez comme suit :

1. Créez un dossier, src/app/shared/components pour les composants réutilisables (s’il n’existe pas déjà).
2. Dans le nouveau dossier, créez un fichier nommé MfaAuthMethodSelectionForm.tsx pour afficher un formulaire qui permet aux utilisateurs de sélectionner une méthode d’authentification forte inscrite. Ajoutez le code dans MfaAuthMethodSelectionForm dans le fichier.
3. Dans le nouveau dossier, créez un autre fichier nommé MfaChallengeForm.tsx pour afficher un formulaire permettant de vérifier la méthode d’authentification forte à l’aide du code secret unique reçu par l’utilisateur. Ajoutez le code dans MfaChallengeForm dans le fichier.

Si nécessaire, vous pouvez importer et utiliser des composants réutilisables dans votre connexion, connexion après l’inscription et connexion après les flux SSPR.

Gérer l’authentification multifacteur pendant la connexion

Mettez à jour le fichier src/app/sign-in/page.tsx pour permettre à votre application de gérer le flux MFA pendant la connexion. Consultez le code complet dans page.tsx :

1. Importez les types et composants requis, comme indiqué dans l’extrait de code suivant :

   import {
       CustomAuthPublicClientApplication,
       ICustomAuthPublicClientApplication,
       SignInCodeRequiredState,
       SignInCompletedState,
       AuthFlowStateBase,
       MfaAwaitingState,
       MfaVerificationRequiredState,
   } from "@azure/msal-browser/custom-auth";
   import { MfaAuthMethodSelectionForm } from "../components/shared/MfaAuthMethodSelectionForm";
   import { MfaChallengeForm } from "../components/shared/MfaChallengeForm";
   

2. Ajoutez de nouvelles variables d’état pour l’authentification multifacteur :

   export default function SignIn() {
       ...
       // MFA states
   const [mfaAuthMethods, setMfaAuthMethods] = useState<AuthenticationMethod[]>([]);
   const [selectedMfaAuthMethod, setSelectedMfaAuthMethod] = useState<AuthenticationMethod | undefined>(undefined);
   const [mfaChallenge, setMfaChallenge] = useState("");
   
       // ... initialization code
   }
   

3. Mettez à jour les fonctions startSignIn, handlePasswordSubmit et handleCodeSubmit pour vérifier si l’authentification multifacteur est requise :

   const startSignIn = async (e: React.FormEvent) => {
       // Start the sign-in flow
       const result = await authClient.signIn({
           username,
       });
   
       ...
   
       if (result.isMfaRequired()) {
           const methods = result.state.getAuthMethods();
           setMfaAuthMethods(methods);
           setSelectedMfaAuthMethod(methods.length > 0 ? methods[0] : undefined);
       }
   
       ...
   };
   
   const handlePasswordSubmit = async (e: React.FormEvent) => {
       if (signInState instanceof SignInPasswordRequiredState) {
           const result = await signInState.submitPassword(password);
   
           ...
   
           // Check for MFA requirement
           if (result.isMfaRequired()) {
               const methods = result.state.getAuthMethods();
               setMfaAuthMethods(methods);
               setSelectedMfaAuthMethod(methods.length > 0 ? methods[0] : undefined);
               setSignInState(result.state);
           }
   
           ...
       }
   };
   
   const handleCodeSubmit = async (e: React.FormEvent) => {
       if (signInState instanceof SignInCodeRequiredState) {
           const result = await signInState.submitCode(code);
   
           ...
   
           // Check for MFA requirement
           if (result.isMfaRequired()) {
               const methods = result.state.getAuthMethods();
               setMfaAuthMethods(methods);
               setSelectedMfaAuthMethod(methods.length > 0 ? methods[0] : undefined);
               setSignInState(result.state);
           }
   
           ...
       }
   };
   

   Dans chacune des fonctions, notez que nous vérifions si l’authentification multifacteur est requise à l’aide de l’extrait de code suivant :

   if (result.isMfaRequired()) {...}
   

4. Ajoutez le gestionnaire pour la sélection de défi MFA :

   const handleMfaAuthMethodSubmit = async (e: React.FormEvent) => {
       e.preventDefault();
       setError("");
       setLoading(true);
   
       if (!selectedMfaAuthMethod) {
           setError("Please select an authentication method.");
           setLoading(false);
           return;
       }
   
       if (signInState instanceof MfaAwaitingState) {
           const result = await signInState.requestChallenge(selectedMfaAuthMethod.id);
   
           if (result.isFailed()) {
               if (result.error?.isInvalidInput()) {
                   setError("Incorrect verification contact.");
               } else {
                   setError(
                       result.error?.errorData?.errorDescription ||
                           "An error occurred while verifying the authentication method"
                   );
               }
           }
   
           if (result.isVerificationRequired()) {
               setSignInState(result.state);
           }
       }
   
       setLoading(false);
   };
   

5. Ajoutez le gestionnaire pour la vérification du défi MFA :

   const handleMfaChallengeSubmit = async (e: React.FormEvent) => {
       e.preventDefault();
       setError("");
       setLoading(true);
   
       if (!mfaChallenge) {
           setError("Please enter a code.");
           setLoading(false);
           return;
       }
   
       if (signInState instanceof MfaVerificationRequiredState) {
           const result = await signInState.submitChallenge(mfaChallenge);
   
           if (result.isFailed()) {
               if (result.error?.isIncorrectChallenge()) {
                   setError("Incorrect code.");
               } else {
                   setError(
                       result.error?.errorData?.errorDescription ||
                           "An error occurred while verifying the challenge response"
                   );
               }
           }
   
           if (result.isCompleted()) {
               setData(result.data);
               setCurrentSignInStatus(true);
               setSignInState(result.state);
           }
       }
   
       setLoading(false);
   };
   

6. Mettez à jour la renderForm() fonction pour afficher les formulaires de défi MFA appropriés (sélection de méthode de défi MFA ou vérification de la méthode de défi MFA) :

   const renderForm = () => {
       if (loadingAccountStatus) {
           return;
       }
   
       ...
   
       // Display MfaAuthMethodSelectionForm if the current state is MFA awaiting state
       if (signInState instanceof MfaAwaitingState) {
           return (
               <MfaAuthMethodSelectionForm
                   onSubmit={handleMfaAuthMethodSubmit}
                   authMethods={mfaAuthMethods}
                   selectedAuthMethod={selectedMfaAuthMethod}
                   setSelectedAuthMethod={setSelectedMfaAuthMethod}
                   loading={loading}
                   styles={styles}
               />
           );
       }
   
       // Display MfaChallengeForm if the current state is MFA verification required state
       if (signInState instanceof MfaVerificationRequiredState) {
           return (
               <MfaChallengeForm
                   onSubmit={handleMfaChallengeSubmit}
                   challenge={mfaChallenge}
                   setChallenge={setMfaChallenge}
                   loading={loading}
                   styles={styles}
               />
           );
       }
   
       ...
   };
   

Gérer l’authentification multifacteur après l’inscription ou la réinitialisation du mot de passe

Le flux MFA après l’inscription et la réinitialisation du mot de passe fonctionne de manière similaire à l'authentification multifacteur dans le flux de connexion. Une fois l’inscription réussie ou la réinitialisation du mot de passe réussie, le Kit de développement logiciel (SDK) peut continuer automatiquement avec le flux de connexion. Si l’utilisateur a une méthode d’authentification forte inscrite, le flux passe à la vérification du défi MFA.

Gérer l’authentification multifacteur après l’inscription

Pour le flux MFA après l’inscription, vous devez mettre à jour le fichier /src/app/sign-up/page.tsx . Consultez le code complet dans page.tsx :

1. Veillez à importer les types et composants requis.

2. Gérez les états requis de l’authentification multifacteur de la même manière que dans le flux de connexion ; une fois l’inscription terminée, utilisez le résultat pour déclencher automatiquement un flux de connexion, comme indiqué dans l’extrait de code suivant :

   // In your sign-up completion handler
   if (signUpState instanceof SignUpCompletedState) {
       // Continue with sign-in using the continuation token
       const result = await signUpState.signIn();
   
       ...
   
       if (result.isMfaRequired()) {
           const methods = result.state.getAuthMethods();
           setMfaAuthMethods(methods);
           setSelectedMfaAuthMethod(methods.length > 0 ? methods[0] : undefined);
           setSignUpState(state);
       }
   
       ...
   }
   
   // Then use the same renderForm logic to display MfaAuthMethodSelectionForm
   // and MfaChallengeForm components
   

Gérer l’authentification multifacteur après la réinitialisation du mot de passe

Pour le flux MFA après SSPR, vous devez mettre à jour le fichier /src/app/reset-password/page.tsx . Consultez le code complet dans page.tsx :

1. Veillez à importer les types et composants requis.

2. Gérez les conditions requises par le MFA de la même manière que dans le processus de connexion. Une fois SSPRS terminé, vous pouvez utiliser le résultat pour déclencher automatiquement une connexion, comme indiqué dans l’extrait de code suivant :

   // In your password reset completion handler
   if (resetPasswordState instanceof ResetPasswordCompletedState) {
       // Continue with sign-in using the continuation token
       const result = await signUpState.signIn();
   
       ...
   
       if (result.isMfaRequired()) {
           const methods = result.state.getAuthMethods();
           setMfaAuthMethods(methods);
           setSelectedMfaAuthMethod(methods.length > 0 ? methods[0] : undefined);
           setResetState(state);
       }
   
       ...
   }
   
   // Then use the same renderForm logic to display MfaAuthMethodSelectionForm
   // and MfaChallengeForm components
   

Exécuter et tester votre application

Avant de tester votre application, vérifiez que vous disposez d’un compte d’utilisateur disposant d’une méthode d’authentification forte inscrite. Utilisez les étapes décrites dans Exécuter et tester votre application pour exécuter votre application, mais cette fois, testez le flux MFA.

Contenu connexe

• Authentification native dans Microsoft Entra External ID
• Fonctionnalités d’authentification native et types de défis
• Repli web d'authentification native