Dela via

Självstudie: Återställa lösenord i en React-ensidesapp med inbyggd autentisering med JavaScript SDK

Gäller för: Grön cirkel med en vit bockmarkeringssymbol som anger att följande innehåll gäller för externa klienter. Externa klienter (läs mer)

I den här självstudien får du lära dig hur du aktiverar lösenordsåterställning i en React-ensidesapp med hjälp av inbyggd autentisering med JavaScript SDK.

I den här handledningen kommer du att:

  • Uppdatera React-appen för att återställa användarens lösenord.
  • Testa flöde för lösenordsåterställning

Förutsättningar

Skapa gränssnittskomponenter

Under flödet för lösenordsåterställning samlar den här appen in användarens användarnamn (e-post), ett engångslösenord och ett nytt användarlösenord på olika skärmar. I det här avsnittet skapar du formulären som samlar in den information som appen behöver för att återställa lösenordet.

  1. Skapa en mapp med namnet src/app/reset-password.

  2. Skapa filen reset-password/components/InitialForm.tsx och klistra sedan in koden från reset-password/components/InitialForm.tsx. Den här komponenten visar ett formulär som samlar in en användares användarnamn (e-post).

  3. Skapa filen reset-password/components/CodeForm.tsx och klistra sedan in koden från reset-password/components/CodeForm.tsx. Den här komponenten visar ett formulär som samlar in engångslösenordet som användaren får i inkorgen för e-post.

  4. Skapa filen reset-password/components/NewPasswordForm.tsx och klistra sedan in koden från reset-password/components/NewPasswordForm.tsx. Den här komponenten visar ett formulär som samlar in en användares nya lösenord.

Hantera formulärinteraktioner

Skapa filen reset-password/page.tsx för att hantera logik för ett inloggningsflöde. I den här filen:

  • Importera nödvändiga komponenter och visa rätt formulär baserat på tillståndet. Se ett fullständigt exempel i 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>
  );
}

  • Starta flödet för lösenordsåterställning genom att använda följande kodfragment. Se ett fullständigt exempel på reset-password/page.tsx för att lära dig var kodfragmentet ska placeras:

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

    SDK:s instansmetod startar resetPassword()flödet för lösenordsåterställning.

  • Om du vill skicka engångslösenordet använder du följande kodfragment. Se ett fullständigt exempel på reset-password/page.tsx för att lära dig var kodfragmentet ska placeras:

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

    Tillståndet för lösenordsåterställning submitCode() skickar engångslösenordet.

  • Om du vill skicka användarens nya lösenord använder du följande kodfragment. Se ett fullständigt exempel på reset-password/page.tsx för att lära dig var kodfragmentet ska placeras:

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

    Tillståndet för lösenordsåterställning submitNewPassword() skickar användarens nya lösenord.

  • Använd följande kodfragment om du vill använda återställningsresultatet för lösenord. Se ett fullständigt exempel på reset-password/page.tsx för att lära dig var kodfragmentet ska placeras:

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

Valfritt: Logga in användare automatiskt efter lösenordsåterställning

När en användare har återställt sitt lösenord kan du logga in dem direkt i appen utan att initiera ett nytt inloggningsflöde. Om du vill göra det använder du följande kodfragment. Se ett fullständigt exempel på 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);
    }
}

Köra och testa din app

Använd stegen i Kör och testa din app för att köra din app och testa sedan inloggningsflödet.

Relaterat innehåll