Kurz: Resetování hesla v jednostráňové aplikaci React pomocí nativní sady JavaScript SDK pro ověřování

Platí pro: Externí nájemci (další informace)

V tomto kurzu se dozvíte, jak povolit resetování hesla v jednostráňové aplikaci React pomocí nativní sady JavaScript SDK pro ověřování.

V tomto kurzu se naučíte:

• Aktualizujte aplikaci React tak, aby resetovala heslo uživatele.
• Testování toku resetování hesla

Požadavky

• Dokončete kroky v kurzu: Zaregistrujte uživatele do jednostránka aplikace React pomocí nativní sady JavaScript SDK pro ověřování.
• Povolte samoobslužné resetování hesla (SSPR) pro uživatele zákazníka v externím tenantovi. Samoobslužné resetování hesla je k dispozici pro uživatele zákazníků pro aplikace, které používají e-mail s tokem ověřování hesla.

Vytvoření komponent uživatelského rozhraní

Během toku resetování hesla tato aplikace shromažďuje uživatelské jméno uživatele (e-mail), jednorázové heslo a nové uživatelské heslo na různých obrazovkách. V této části vytvoříte formuláře, které shromažďují informace, které aplikace potřebuje k resetování hesla.

1. Vytvořte složku s názvem src/app/reset-password.

2. Vytvořte soubor reset-password/components/InitialForm.tsx a vložte kód z reset-password/components/InitialForm.tsx. Tato komponenta zobrazí formulář, který shromažďuje uživatelské jméno uživatele (e-mail).

3. Vytvořte soubor reset-password/components/CodeForm.tsx a vložte kód z reset-password/components/CodeForm.tsx. Tato komponenta zobrazí formulář, který shromažďuje jednorázové heslo, které uživatel obdrží ve složce Doručená pošta.

4. Vytvořte soubor reset-password/components/NewPasswordForm.tsx a vložte kód z reset-password/components/NewPasswordForm.tsx. Tato komponenta zobrazí formulář, který shromažďuje nové heslo uživatele.

Zpracování interakcí formuláře

Vytvořte soubor reset-password/page.tsx pro zpracování logiky pro tok přihlašování. V tomto souboru:

• Naimportujte potřebné součásti a zobrazte správný formulář na základě stavu. Podívejte se na úplný příklad v souboru 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>
    );
  }
  

• Pokud chcete spustit tok resetování hesla, použijte následující fragment kódu. Úplný příklad najdete v tématu reset-password/page.tsx a zjistěte, kam umístit fragment kódu:

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

  Metoda instance sady SDK spustí resetPassword()tok resetování hesla.

• K odeslání jednorázového hesla použijte následující fragment kódu. Úplný příklad najdete v tématu reset-password/page.tsx a zjistěte, kam umístit fragment kódu:

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

  Stav submitCode() resetování hesla odešle jednorázové heslo.

• Pokud chcete odeslat nové heslo uživatele, použijte následující fragment kódu. Úplný příklad najdete v tématu reset-password/page.tsx a zjistěte, kam umístit fragment kódu:

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

  Stav submitNewPassword() resetování hesla odešle nové heslo uživatele.

• Pokud chcete použít výsledek resetování hesla, použijte následující fragment kódu. Úplný příklad najdete v tématu reset-password/page.tsx a zjistěte, kam umístit fragment kódu:

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

Volitelné: Automatické přihlášení uživatelů po resetování hesla

Jakmile uživatel úspěšně resetuje heslo, můžete ho přímo přihlásit do aplikace, aniž byste zahájili nový tok přihlášení. K tomu použijte následující fragment kódu. Podívejte se na úplný příklad na adrese 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);
    }
}

Spuštění a otestování aplikace

Pomocí kroků v části Spustit a otestovat aplikaci spusťte aplikaci a pak otestujte tok přihlášení.

Související obsah

• Kurz: Podpora webového záložního nasazení v nativní sadě JavaScript SDK pro ověřování