Samouczek: resetowanie hasła w aplikacji jednostronicowej platformy React przy użyciu natywnego zestawu JAVAScript SDK uwierzytelniania

Dotyczy: Dzierżawy zewnętrzne (dowiedz się więcej)

Z tego samouczka dowiesz się, jak włączyć resetowanie hasła w aplikacji jednostronicowej react przy użyciu natywnego zestawu SDK języka JavaScript uwierzytelniania.

W tym samouczku nauczysz się następujących rzeczy:

• Zaktualizuj aplikację React, aby zresetować hasło użytkownika.
• Testowanie przepływu resetowania hasła

Wymagania wstępne

• Wykonaj kroki opisane w artykule Samouczek: rejestrowanie użytkowników w aplikacji jednostronicowej platformy React przy użyciu natywnego zestawu SDK języka JavaScript uwierzytelniania.
• Włącz samoobsługowe resetowanie haseł (SSPR) dla użytkowników klientów w dzierżawie zewnętrznej. Samoobsługowe resetowanie hasła jest dostępne dla użytkowników klientów dla aplikacji korzystających z poczty e-mail z przepływem uwierzytelniania haseł.

Tworzenie składników interfejsu użytkownika

Podczas przepływu resetowania hasła ta aplikacja zbiera nazwę użytkownika (adres e-mail), jednorazowy kod dostępu i nowe hasło użytkownika na różnych ekranach. W tej sekcji utworzysz formularze, które zbierają informacje wymagane przez aplikację do zresetowania hasła.

1. Utwórz folder o nazwie src/app/reset-password.

2. Utwórz plik reset-password/components/InitialForm.tsx , a następnie wklej kod z polecenia reset-password/components/InitialForm.tsx. Ten składnik wyświetla formularz, który zbiera nazwę użytkownika (adres e-mail).

3. Utwórz plik reset-password/components/CodeForm.tsx , a następnie wklej kod z polecenia reset-password/components/CodeForm.tsx. Ten składnik wyświetla formularz, który zbiera jednorazowy kod dostępu, który użytkownik otrzymuje w skrzynce odbiorczej poczty e-mail.

4. Utwórz plik reset-password/components/NewPasswordForm.tsx , a następnie wklej kod z polecenia reset-password/components/NewPasswordForm.tsx. Ten składnik wyświetla formularz, który zbiera nowe hasło użytkownika.

Obsługa interakcji formularzy

Utwórz plik reset-password/page.tsx , aby obsłużyć logikę przepływu logowania. Zawartość tego pliku:

• Zaimportuj niezbędne składniki i wyświetl odpowiedni formularz na podstawie stanu. Zobacz pełny przykład w pliku 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>
    );
  }
  

• Aby uruchomić przepływ resetowania hasła, użyj następującego fragmentu kodu. Zobacz pełny przykład na stronie reset-password/page.tsx , aby dowiedzieć się, gdzie umieścić fragment kodu:

  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 wystąpienia zestawu SDK uruchamia resetPassword()przepływ resetowania hasła.

• Aby przesłać jednorazowy kod dostępu, użyj następującego fragmentu kodu. Zobacz pełny przykład na stronie reset-password/page.tsx , aby dowiedzieć się, gdzie umieścić fragment kodu:

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

  Stan resetowania submitCode() hasła przesyła jednorazowy kod dostępu.

• Aby przesłać nowe hasło użytkownika, użyj następującego fragmentu kodu. Zobacz pełny przykład na stronie reset-password/page.tsx , aby dowiedzieć się, gdzie umieścić fragment kodu:

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

  Stan submitNewPassword() resetowania hasła przesyła nowe hasło użytkownika.

• Aby użyć wyniku resetowania hasła, użyj następującego fragmentu kodu. Zobacz pełny przykład na stronie reset-password/page.tsx , aby dowiedzieć się, gdzie umieścić fragment kodu:

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

Opcjonalnie: automatyczne logowanie użytkowników po zresetowaniu hasła

Po pomyślnym zresetowaniu hasła przez użytkownika możesz bezpośrednio zalogować się do aplikacji bez inicjowania nowego przepływu logowania. W tym celu użyj następującego fragmentu kodu. Zobacz pełny przykład na stronie 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);
    }
}

Uruchamianie i testowanie aplikacji

Wykonaj kroki opisane w temacie Uruchamianie i testowanie aplikacji , aby uruchomić aplikację, a następnie przetestuj przepływ logowania.

Treści powiązane

• Samouczek: obsługa rezerwowego w internecie w natywnym zestawie SDK języka JavaScript uwierzytelniania.