Tutoriel : Réinitialiser le mot de passe 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 à activer la réinitialisation de mot de passe dans une application React monopage à l’aide du Kit de développement logiciel (SDK) JavaScript d’authentification native.

Dans ce tutoriel, vous allez :

Conditions préalables

• Suivez les étapes du tutoriel : Inscrivez les utilisateurs dans une application monopage React à l'aide du SDK d'authentification JavaScript native.
• Activez la réinitialisation de mot de passe en libre-service (SSPR) pour les utilisateurs clients du locataire externe. SSPR est disponible pour les utilisateurs clients pour les applications qui utilisent le courrier électronique avec le flux d’authentification par mot de passe.

Créer des composants d’interface utilisateur

Pendant le flux de réinitialisation de mot de passe, cette application collecte le nom d’utilisateur (e-mail), un code secret à usage unique et un nouveau mot de passe utilisateur sur différents écrans. Dans cette section, vous allez créer les formulaires qui collectent les informations dont l’application a besoin pour réinitialiser le mot de passe.

1. Créez un dossier appelé src/app/reset-password.

2. Créez le fichier reset-password/components/InitialForm.tsx , puis collez le code de reset-password/components/InitialForm.tsx. Ce composant affiche un formulaire qui collecte le nom d’utilisateur (e-mail).

3. Créez un fichier reset-password/components/CodeForm.tsx , puis collez le code de reset-password/components/CodeForm.tsx. Ce composant affiche un formulaire qui collecte le code secret à usage unique reçu par l’utilisateur dans sa boîte de réception.

4. Créez le fichier reset-password/components/NewPasswordForm.tsx , puis collez le code de reset-password/components/NewPasswordForm.tsx. Ce composant affiche un formulaire qui collecte le nouveau mot de passe d’un utilisateur.

Gérer les interactions de formulaire

Créez un fichier reset-password/page.tsx pour gérer la logique d’un flux de connexion. Dans ce fichier :

• Importez les composants nécessaires et affichez le formulaire approprié en fonction de l’état. Consultez un exemple complet dans reset-password/page.tsx :

  import {
    CustomAuthPublicClientApplication,
    ICustomAuthPublicClientApplication,
    ResetPasswordCodeRequiredState,
    ResetPasswordPasswordRequiredState,
    ResetPasswordCompletedState,
    AuthFlowStateBase,
  } from "@azure/msal-browser/custom-auth";
  
  export default function ResetPassword() {
    const [app, setApp] = useState<ICustomAuthPublicClientApplication | null>(
      null
    );
    const [loadingAccountStatus, setLoadingAccountStatus] = useState(true);
    const [isSignedIn, setSignInState] = useState(false);
    const [email, setEmail] = useState("");
    const [code, setCode] = useState("");
    const [newPassword, setNewPassword] = useState("");
    const [error, setError] = useState("");
    const [loading, setLoading] = useState(false);
    const [resetState, setResetState] = useState<AuthFlowStateBase | null>(
      null
    );
  
    useEffect(() => {
      const initializeApp = async () => {
        const appInstance = await CustomAuthPublicClientApplication.create(
          customAuthConfig
        );
        setApp(appInstance);
      };
  
      initializeApp();
    }, []);
  
    useEffect(() => {
      const checkAccount = async () => {
        if (!app) return;
  
        const accountResult = app.getCurrentAccount();
  
        if (accountResult.isCompleted()) {
          setSignInState(true);
        }
  
        setLoadingAccountStatus(false);
      };
  
      checkAccount();
    }, [app]);
  
    const renderForm = () => {
      if (loadingAccountStatus) {
        return;
      }
  
      if (isSignedIn) {
        return (
          <div style={styles.signed_in_msg}>
            Please sign out before processing the password reset.
          </div>
        );
      }
  
      if (resetState instanceof ResetPasswordPasswordRequiredState) {
        return (
          <NewPasswordForm
            onSubmit={handleNewPasswordSubmit}
            newPassword={newPassword}
            setNewPassword={setNewPassword}
            loading={loading}
          />
        );
      }
  
      if (resetState instanceof ResetPasswordCodeRequiredState) {
        return (
          <CodeForm
            onSubmit={handleCodeSubmit}
            code={code}
            setCode={setCode}
            loading={loading}
          />
        );
      }
  
      if (resetState instanceof ResetPasswordCompletedState) {
        return <ResetPasswordResultPage />;
      }
  
      return (
        <InitialForm
          onSubmit={handleInitialSubmit}
          email={email}
          setEmail={setEmail}
          loading={loading}
        />
      );
    };
  
    return (
      <div style={styles.container}>
        <h2 style={styles.h2}>Reset Password</h2>
        {renderForm()}
        {error && <div style={styles.error}>{error}</div>}
      </div>
    );
  }
  

• Pour démarrer le flux de réinitialisation de mot de passe, utilisez l’extrait de code suivant. Consultez un exemple complet à l’adresse reset-password/page.tsx pour savoir où placer l’extrait de code :

  const handleInitialSubmit = async (e: React.FormEvent) => {
      if (!app) return;
      e.preventDefault();
      setError("");
      setLoading(true);
      const result = await app.resetPassword({
          username: email,
      });
      const state = result.state;
      if (result.isFailed()) {
          if (result.error?.isInvalidUsername()) {
              setError("Invalid email address");
          } else if (result.error?.isUserNotFound()) {
              setError("User not found");
          } else {
              setError(
                  result.error?.errorData.errorDescription || "An error occurred while initiating password reset"
              );
          }
      } else {
          setResetState(state);
      }
      setLoading(false);
  };
  

  La méthode d’instance du Kit de développement logiciel (SDK) resetPassword()démarre le flux de réinitialisation du mot de passe.

• Pour soumettre le code secret à usage unique, utilisez l’extrait de code suivant. Consultez un exemple complet à l’adresse reset-password/page.tsx pour savoir où placer l’extrait de code :

  const handleCodeSubmit = async (e: React.FormEvent) => {
      e.preventDefault();
      setError("");
      setLoading(true);
      if (resetState instanceof ResetPasswordCodeRequiredState) {
          const result = await resetState.submitCode(code);
          const state = result.state;
          if (result.isFailed()) {
              if (result.error?.isInvalidCode()) {
                  setError("Invalid verification code");
              } else {
                  setError(result.error?.errorData.errorDescription || "An error occurred while verifying the code");
              }
          } else {
              setResetState(state);
          }
      }
      setLoading(false);
  };
  

  L'état de réinitialisation du mot de passe submitCode() soumet le code à usage unique.

• Pour soumettre le nouveau mot de passe de l’utilisateur, utilisez l’extrait de code suivant. Consultez un exemple complet à l’adresse reset-password/page.tsx pour savoir où placer l’extrait de code :

  const handleNewPasswordSubmit = async (e: React.FormEvent) => {
      e.preventDefault();
      setError("");
      setLoading(true);
      if (resetState instanceof ResetPasswordPasswordRequiredState) {
          const result = await resetState.submitNewPassword(newPassword);
          const state = result.state;
          if (result.isFailed()) {
              if (result.error?.isInvalidPassword()) {
                  setError("Invalid password");
              } else {
                  setError(result.error?.errorData.errorDescription || "An error occurred while setting new password");
              }
          } else {
              setResetState(state);
          }
      }
      setLoading(false);
  };
  

  L'état de réinitialisation du mot de passe submitNewPassword() soumet le nouveau mot de passe de l'utilisateur.

• Pour utiliser le résultat de la réinitialisation du mot de passe, utilisez l’extrait de code suivant. Consultez un exemple complet à l’adresse reset-password/page.tsx pour savoir où placer l’extrait de code :

  if (resetState instanceof ResetPasswordCompletedState) {
      return <ResetPasswordResultPage/>;
  }
  
  

Facultatif : Connecter automatiquement les utilisateurs après la réinitialisation du mot de passe

Une fois qu’un utilisateur a correctement réinitialisé son mot de passe, vous pouvez directement les connecter à l’application sans lancer de nouveau flux de connexion. Pour ce faire, utilisez l’extrait de code suivant. Pour un exemple complet, voir reset-password/page.tsx :

if (resetState instanceof ResetPasswordCompletedState) {
    const result = await resetState.signIn();
    const state = result.state;
    if (result.isFailed()) {
        setError(result.error?.errorData?.errorDescription || "An error occurred during auto sign-in");
    }
    if (result.isCompleted()) {
        setData(result.data);
        setResetState(state);
    }
}

Exécuter et tester votre application

Utilisez les étapes dans Exécuter et tester votre application pour exécuter votre application, puis testez le flux de connexion.

Contenu connexe

• Tutoriel : Prise en charge du retour web dans le SDK JavaScript d’authentification native.