Zelfstudie: Wachtwoord opnieuw instellen in een React-app met één pagina met behulp van de JavaScript SDK voor systeemeigen verificatie

Van toepassing op: Externe tenants (meer informatie)

In deze zelfstudie leert u hoe u wachtwoordherstel inschakelt in een React-app met één pagina met behulp van de JavaScript SDK voor systeemeigen verificatie.

In deze handleiding leert u:

Vereiste voorwaarden

• Voltooi de stappen in zelfstudie: Gebruikers registreren bij een React-app met één pagina met behulp van de JavaScript SDK voor systeemeigen verificatie.
• Schakel selfservice voor wachtwoordherstel (SSPR) in voor klantgebruikers in de externe tenant. SSPR is beschikbaar voor klantgebruikers voor apps die e-mail gebruiken met wachtwoordverificatiestroom.

UI-onderdelen maken

Tijdens de stroom voor het opnieuw instellen van wachtwoorden verzamelt deze app de gebruikersnaam van de gebruiker (e-mail), een eenmalige wachtwoordcode en een nieuw gebruikerswachtwoord op verschillende schermen. In deze sectie maakt u de formulieren die de gegevens verzamelen die de app nodig heeft om het wachtwoord opnieuw in te stellen.

1. Maak een map met de naam src/app/reset-password.

2. Maak het bestand reset-password/components/InitialForm.tsx en plak de code van reset-password/components/InitialForm.tsx. In dit onderdeel wordt een formulier weergegeven waarin de gebruikersnaam van een gebruiker (e-mail) wordt verzameld.

3. Maak reset-password/components/CodeForm.tsx-bestand en plak de code van reset-password/components/CodeForm.tsx. In dit onderdeel wordt een formulier weergegeven waarmee de eenmalige wachtwoordcode wordt verzameld die de gebruiker ontvangt in hun e-mailinbox.

4. Maak het bestand reset-password/components/NewPasswordForm.tsx en plak de code van reset-password/components/NewPasswordForm.tsx. In dit onderdeel wordt een formulier weergegeven waarmee het nieuwe wachtwoord van een gebruiker wordt verzameld.

Formulierinteracties verwerken

Maak het bestand reset-password/page.tsx om logica voor een aanmeldingsproces te verwerken. In dit bestand:

• Importeer de benodigde onderdelen en geef het juiste formulier weer op basis van de status. Zie een volledig voorbeeld in 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>
    );
  }
  

• Gebruik het volgende codefragment om de stroom voor wachtwoordherstel te starten. Zie een volledig voorbeeld op reset-password/page.tsx voor meer informatie over het plaatsen van het codefragment:

  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);
  };
  

  Met de instantiemethode van de SDK wordt resetPassword() het wachtwoordherstelproces gestart.

• Als u de eenmalige wachtwoordcode wilt verzenden, gebruikt u het volgende codefragment. Zie een volledig voorbeeld op reset-password/page.tsx voor meer informatie over het plaatsen van het codefragment:

  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);
  };
  

  De status wachtwoordherstel submitCode() verzendt de eenmalige wachtwoordcode.

• Gebruik het volgende codefragment om het nieuwe wachtwoord van de gebruiker in te dienen. Zie een volledig voorbeeld op reset-password/page.tsx voor meer informatie over het plaatsen van het codefragment:

  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);
  };
  

  De status van wachtwoordherstel submitNewPassword() verzendt het nieuwe wachtwoord van de gebruiker.

• Om het reset-wachtwoordresultaat te gebruiken, gebruikt u de volgende codefragment. Zie een volledig voorbeeld op reset-password/page.tsx voor meer informatie over het plaatsen van het codefragment:

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

Optioneel: gebruikers automatisch aanmelden na het opnieuw instellen van het wachtwoord

Nadat een gebruiker het wachtwoord opnieuw heeft ingesteld, kunt u deze rechtstreeks aanmelden bij de app zonder een nieuwe aanmeldingsstroom te starten. Gebruik hiervoor het volgende codefragment. Zie een volledig voorbeeld op 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);
    }
}

Uw app uitvoeren en testen

Gebruik de stappen in Uitvoeren en testen van uw app om uw app uit te voeren en test vervolgens de aanmeldingsstroom.

Verwante inhoud

• Zelfstudie: Ondersteuning voor webback in systeemeigen verificatie JavaScript SDK.