Freigeben über

Lernprogramm: Zurücksetzen des Kennworts in einer React-Einzelseiten-App mithilfe des nativen JavaScript-SDKs für die Authentifizierung

Gilt für: Grüner Kreis mit einem weißen Häkchensymbol, das angibt, dass der folgende Inhalt für externe Mandanten gilt. Externe Mandanten (weitere Informationen)

In diesem Lernprogramm erfahren Sie, wie Sie die Kennwortzurücksetzung in einer React-Einzelseiten-App mit systemeigenem JavaScript SDK aktivieren.

In diesem Tutorial erfahren Sie:

  • Aktualisieren Sie die React-App, um das Kennwort des Benutzers zurückzusetzen.
  • Testflow für die Kennwortzurücksetzung

Voraussetzungen

Erstellen von UI-Komponenten

Während des Ablaufs der Kennwortzurücksetzung sammelt diese App den Benutzernamen (E-Mail), eine Einmalkennung und ein neues Benutzerkennwort auf verschiedenen Bildschirmen. In diesem Abschnitt erstellen Sie die Formulare, die die Informationen sammeln, die die App zum Zurücksetzen des Kennworts benötigt.

  1. Erstellen Sie einen Ordner namens "src/app/reset-password".

  2. Erstellen Sie die Datei reset-password/components/InitialForm.tsx , und fügen Sie dann den Code aus reset-password/components/InitialForm.tsx ein. Diese Komponente zeigt ein Formular an, das den Benutzernamen (E-Mail) eines Benutzers sammelt.

  3. Erstellen Sie die Datei "reset-password/components/CodeForm.tsx ", und fügen Sie dann den Code aus "reset-password/components/CodeForm.tsx" ein. Diese Komponente zeigt ein Formular an, das die einmalige Kennung erfasst, die der Benutzer in ihrem E-Mail-Posteingang erhält.

  4. Erstellen Sie reset-password/components/NewPasswordForm.tsx file, und fügen Sie dann den Code aus reset-password/components/NewPasswordForm.tsx ein. Diese Komponente zeigt ein Formular an, das das neue Kennwort eines Benutzers sammelt.

Behandeln von Formularinteraktionen

Erstellen Sie die Datei "reset-password/page.tsx ", um die Logik für einen Anmeldeablauf zu verarbeiten. In dieser Datei:

  • Importieren Sie die erforderlichen Komponenten, und zeigen Sie das richtige Formular basierend auf dem Zustand an. Ein vollständiges Beispiel finden Sie 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>
  );
}

  • Verwenden Sie den folgenden Codeausschnitt, um den Ablauf der Kennwortzurücksetzung zu starten. Ein vollständiges Beispiel finden Sie unter reset-password/page.tsx , um zu erfahren, wo der Codeausschnitt platziert werden soll:

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

    Die Instanzmethode resetPassword()des SDK startet den Ablauf der Kennwortzurücksetzung.

  • Verwenden Sie den folgenden Codeausschnitt, um die einmalkennung zu übermitteln. Ein vollständiges Beispiel finden Sie unter reset-password/page.tsx , um zu erfahren, wo der Codeausschnitt platziert werden soll:

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

    Der Kennwortzurücksetzungsstatus submitCode() sendet die einmalkennung.

  • Verwenden Sie den folgenden Codeausschnitt, um das neue Kennwort des Benutzers zu übermitteln. Ein vollständiges Beispiel finden Sie unter reset-password/page.tsx , um zu erfahren, wo der Codeausschnitt platziert werden soll:

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

    Der Status der Kennwortzurücksetzung submitNewPassword() übermittelt das neue Kennwort des Benutzers.

  • Verwenden Sie den folgenden Codeausschnitt, um das Kennwortzurücksetzungsergebnis zu verwenden. Ein vollständiges Beispiel finden Sie unter reset-password/page.tsx , um zu erfahren, wo der Codeausschnitt platziert werden soll:

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

Optional: Automatisches Anmelden von Benutzern nach der Kennwortzurücksetzung

Nachdem ein Benutzer sein Kennwort erfolgreich zurückgesetzt hat, können Sie sie direkt bei der App anmelden, ohne einen neuen Anmeldefluss zu initiieren. Verwenden Sie dazu den folgenden Codeschnipsel. Ein vollständiges Beispiel finden Sie unter 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);
    }
}

Ausführen und Testen der App

Führen Sie die Schritte in "Ausführen" aus, und testen Sie Ihre App , um Ihre App auszuführen, und testen Sie dann den Anmeldeablauf.

Verwandte Inhalte

  • Last updated on