Lernprogramm: Zurücksetzen des Kennworts in einer React-Einzelseiten-App mithilfe der systemeigenen Authentifizierung (Vorschau)

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 das Kennwort in einer Einzelseiten-App (Single Page App, SPA) von React mithilfe der systemeigenen Authentifizierung zurücksetzen.

In diesem Tutorial führen Sie Folgendes durch:

Aktualisieren Sie die React-App, um das Kennwort des Benutzers zurückzusetzen.
Test des Passwortzurücksetzungsprozesses

Voraussetzungen

Führen Sie die Schritte im Lernprogramm aus: Einrichten des CORS-Proxyservers zum Verwalten von CORS-Headern für die systemeigene Authentifizierung.

Definieren von Aufrufen, die die App an die systemeigene Authentifizierungs-API sendet

Während des Kennwortzurücksetzungsflusses führt die App mehrere Aufrufe an die systemeigene Authentifizierungs-API durch, z. B. das Initiieren einer Kennwortzurücksetzungsanforderung und das Senden eines Kennwortzurücksetzungsformulars.

Um diese Aufrufe zu definieren, öffnen Sie die Datei scr/client/RequestTypes.ts , und fügen Sie dann den folgenden Codeausschnitt an:

    export interface ResetPasswordStartRequest {
        username: string;
        challenge_type: string;
        client_id: string;
    }

    export interface ResetPasswordSubmitRequest {
        client_id: string;
        continuation_token: string;
        new_password: string;
    }

    export interface ResetPasswordSubmitForm {
        continuation_token: string;
        new_password: string;
    }

Definieren Sie die Typen von Antworten, die von der systemeigenen Authentifizierungs-API empfangen werden.

Um den Typ der Antworten zu definieren, die die App von der systemeigenen Authentifizierungs-API für den Kennwortzurücksetzungsvorgang erhalten kann, öffnen Sie die Datei "src/client/ResponseTypes.ts ", und fügen Sie dann den folgenden Codeausschnitt an:

    export interface ChallengeResetResponse {
        continuation_token: string;
        expires_in: number;
    }

    export interface ResetPasswordSubmitResponse {
        continuation_token: string;
        poll_interval: number;
    }

Verarbeiten von Kennwortzurücksetzungsanforderungen

In diesem Abschnitt fügen Sie Code hinzu, der Ablaufanforderungen für die Kennwortzurücksetzung verarbeitet. Beispiele für diese Anforderungen sind das Initiieren einer Kennwortzurücksetzungsanforderung und das Senden eines Kennwortzurücksetzungsformulars.

Erstellen Sie dazu eine Datei namens "src/client/ResetPasswordService.ts", und fügen Sie dann den folgenden Codeausschnitt hinzu:

    import { CLIENT_ID, ENV } from "../config";
    import { postRequest } from "./RequestClient";
    import { ChallengeForm, ChallengeRequest, ResetPasswordStartRequest, ResetPasswordSubmitForm, ResetPasswordSubmitRequest } from "./RequestTypes";
    import { ChallengeResetResponse, ChallengeResponse, ResetPasswordSubmitResponse } from "./ResponseTypes";

    export const resetStart = async ({ username }: { username: string }) => {
        const payloadExt: ResetPasswordStartRequest = {
            username,
            client_id: CLIENT_ID,
            challenge_type: "password oob redirect",
        };

        return await postRequest(ENV.urlResetPwdStart, payloadExt);
    };

    export const resetChallenge = async ({ continuation_token }: { continuation_token: string }): Promise<ChallengeResponse> => {
        const payloadExt: ChallengeRequest = {
            continuation_token,
            client_id: CLIENT_ID,
            challenge_type: "oob redirect",
        };

        return await postRequest(ENV.urlResetPwdChallenge, payloadExt);
    };

    export const resetSubmitOTP = async (payload: ChallengeForm): Promise<ChallengeResetResponse> => {
        const payloadExt = {
            client_id: CLIENT_ID,
            continuation_token: payload.continuation_token,
            oob: payload.oob,
            grant_type: "oob",
        };

        return await postRequest(ENV.urlResetPwdContinue, payloadExt);
    };

    export const resetSubmitNewPassword = async (payload: ResetPasswordSubmitForm): Promise<ResetPasswordSubmitResponse> => {
        const payloadExt: ResetPasswordSubmitRequest = {
            client_id: CLIENT_ID,
            continuation_token: payload.continuation_token,
            new_password: payload.new_password,
        };

        return await postRequest(ENV.urlResetPwdSubmit, payloadExt);
    };

    export const resetPoll = async (continuation_token: string): Promise<ChallengeResetResponse> => {
        const payloadExt = {
            client_id: CLIENT_ID,
            continuation_token,
        };
        return await postRequest(ENV.urlResetPwdPollComp, payloadExt);
    };

Die challenge_type Eigenschaft zeigt die Authentifizierungsmethoden an, die von der Client-App unterstützt werden. Weitere Informationen zu Herausforderungstypen.

Erstellen von UI-Komponenten

Während des Ablaufs der Kennwortzurücksetzung sammelt diese App auf verschiedenen Bildschirmen den Benutzernamen (E-Mail), eine Einmalkennung und ein neues Benutzerkennwort.

Erstellen Sie einen Ordner namens "/pages/resetpassword " im Ordner "src ".

Zum Erstellen, Anzeigen und Übermitteln der Kennwortzurücksetzungsformulare erstellen Sie eine Datei src/pages/resetpassword/ResetPassword.tsx, und fügen Sie dann den folgenden Code hinzu:

// ResetPassword.tsx
import React, { useState } from "react";
import { resetChallenge, resetStart, resetSubmitNewPassword, resetSubmitOTP } from "../../client/ResetPasswordService";
import { ChallengeResetResponse, ChallengeResponse, ErrorResponseType } from "../../client/ResponseTypes";

export const ResetPassword: React.FC = () => {
  const [username, setUsername] = useState<string>("");
  const [otp, setOTP] = useState<string>("");
  const [newPassword, setNewPassword] = useState<string>("");
  const [error, setError] = useState<string>("");
  const [step, setStep] = useState<number>(1);
  const [isLoading, setIsloading] = useState<boolean>(false);
  const [tokenRes, setTokenRes] = useState<ChallengeResponse>({
    binding_method: "",
    challenge_channel: "",
    challenge_target_label: "",
    challenge_type: "",
    code_length: 0,
    continuation_token: "",
    interval: 0,
  });
  const [otpRes, setOTPRes] = useState<ChallengeResetResponse>({
    expires_in: 0,
    continuation_token: "",
  });

  const handleResetPassword = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!username) {
      setError("Username is required");
      return;
    }
    setError("");
    try {
      setIsloading(true);
      const res1 = await resetStart({ username });
      const tokenRes = await resetChallenge({ continuation_token: res1.continuation_token });
      setTokenRes(tokenRes);
      setStep(2);
    } catch (err) {
      setError("An error occurred during password reset " + (err as ErrorResponseType).error_description);
    } finally {
      setIsloading(false);
    }
  };

  const handleSubmitCode = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!otp) {
      setError("All fields are required");
      return;
    }
    setError("");
    try {
      setIsloading(true);
      const res = await resetSubmitOTP({
        continuation_token: tokenRes.continuation_token,
        oob: otp,
      });
      setOTPRes(res);
      setStep(3);
    } catch (err) {
      setError("An error occurred while submitting the otp code " + (err as ErrorResponseType).error_description);
    } finally {
      setIsloading(false);
    }
  };

  const handleSubmitNewPassword = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!newPassword) {
      setError('All fields are required');
      return;
    }
    setError('');
    try {
      setIsloading(true);
      await resetSubmitNewPassword({
        continuation_token: otpRes.continuation_token,
        new_password: newPassword,
      });
      setStep(4);
    } catch (err) {
      setError("An error occurred while submitting the new password " + (err as ErrorResponseType).error_description);
    } finally {
      setIsloading(false);
    }
  };

  return (
    <div className="reset-password-form">
    //collect username to initiate password reset flow
      {step === 1 && (
        <form onSubmit={handleResetPassword}>
          <h2>Reset Password</h2>
          <div className="form-group">
            <label>Username:</label>
            <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} required />
          </div>
          {error && <div className="error">{error}</div>}
          {isLoading && <div className="warning">Sending request...</div>}
          <button type="submit">Reset Password</button>
        </form>
      )}
        //collect OTP
      {step === 2 && (
        <form onSubmit={handleSubmitCode}>
          <h2>Submit one time code received via email at {tokenRes.challenge_target_label}</h2>
          <div className="form-group">
            <label>One time code:</label>
            <input type="text" maxLength={tokenRes.code_length} value={otp} onChange={(e) => setOTP(e.target.value)} required />
          </div>
          {error && <div className="error">{error}</div>}
          {isLoading && <div className="warning">Sending request...</div>}
          <button type="submit">Submit code</button>
        </form>
      )}
        //Collect new password
      {step === 3 && (
        <form onSubmit={handleSubmitNewPassword}>
          <h2>Submit New Password</h2>
          <div className="form-group">
            <label>New Password:</label>
            <input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} required />
          </div>
          {error && <div className="error">{error}</div>}
          {isLoading && <div className="warning">Sending request...</div>}
          <button type="submit">Submit New Password</button>
        </form>
      )}
        //report success after password reset is successful
      {step === 4 && (
        <div className="reset-password-success">
          <h2>Password Reset Successful</h2>
          <p>Your password has been reset successfully. You can now log in with your new password.</p>
        </div>
      )}
    </div>
  );
};

Hinzufügen von App-Routen

Öffnen Sie die Datei "src/AppRoutes.tsx ", und heben Sie dann die Kommentare aus den folgenden Codezeilen auf:

    //uncomment
    import { ResetPassword } from "./pages/ResetAccount/ResetPassword";
    //...
    
    export const AppRoutes = () => {
      return (
        <Routes>
            //uncomment
            <Route path="/reset" element={<ResetPassword />} />
        </Routes>
      );
    };

Ausführen und Testen der App

Führen Sie die Schritte in „App ausführen und testen“ aus, um Ihre App zu starten. Testen Sie den Ablauf der Kennwortzurücksetzung jedoch nur mit dem Benutzerkonto, das Sie zuvor registriert haben.

Feedback

War diese Seite hilfreich?

Last updated on 2025-08-25