Tutorial: Restablecimiento de la contraseña en una aplicación de página única de React mediante el SDK de JavaScript de autenticación nativa

Se aplica a: Inquilinos externos (más información)

En este tutorial, aprenderá a habilitar el restablecimiento de contraseña en una aplicación de página única de React mediante el SDK de JavaScript de autenticación nativa.

En este tutorial, usted hará lo siguiente:

Prerrequisitos

• Complete los pasos descritos en Tutorial: Registro de usuarios en una aplicación de página única de React mediante el SDK de JavaScript de autenticación nativa.
• Habilite el autoservicio de restablecimiento de contraseña (SSPR) para los usuarios clientes en el entorno externo. SSPR está disponible para los usuarios del cliente para aplicaciones que usan el correo electrónico con el flujo de autenticación de contraseñas.

Creación de componentes de interfaz de usuario

Durante el flujo de restablecimiento de contraseña, esta aplicación recopila el nombre de usuario (correo electrónico), un código de acceso único y una nueva contraseña de usuario en distintas pantallas. En esta sección, creará los formularios que recopilan la información que requiere la aplicación para restablecer la contraseña.

1. Cree una carpeta denominada src/app/reset-password.

2. Cree el archivo reset-password/components/InitialForm.tsx y pegue el código de reset-password/components/InitialForm.tsx. Este componente muestra un formulario que recopila el nombre de usuario (correo electrónico) de un usuario.

3. Cree el archivo reset-password/components/CodeForm.tsx y pegue el código de reset-password/components/CodeForm.tsx. Este componente muestra un formulario que recopila el código de acceso de un solo uso que el usuario recibe en su bandeja de entrada de correo electrónico.

4. Cree el archivo reset-password/components/NewPasswordForm.tsx y pegue el código de reset-password/components/NewPasswordForm.tsx. Este componente muestra un formulario que recopila la nueva contraseña de un usuario.

Controlar las interacciones del formulario

Cree un archivo reset-password/page.tsx para controlar la lógica de un flujo de inicio de sesión. En este archivo:

• Importe los componentes necesarios y muestre el formulario adecuado en función del estado. Consulte un ejemplo completo en 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>
    );
  }
  

• Para iniciar el flujo de restablecimiento de contraseña, use el siguiente fragmento de código. Consulte un ejemplo completo en reset-password/page.tsx para obtener información sobre dónde colocar el fragmento de código:

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

  El método de instancia del SDK, resetPassword(), inicia el flujo de restablecimiento de contraseña.

• Para enviar el código de acceso de un solo uso, use el siguiente fragmento de código. Consulte un ejemplo completo en reset-password/page.tsx para obtener información sobre dónde colocar el fragmento de código:

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

  El estado de restablecimiento de contraseña de submitCode() envía el código de un solo uso.

• Para enviar la nueva contraseña del usuario, use el siguiente fragmento de código. Consulte un ejemplo completo en reset-password/page.tsx para obtener información sobre dónde colocar el fragmento de código:

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

  El estado para restablecer la contraseña submitNewPassword() envía la nueva contraseña del usuario.

• Para usar el resultado de restablecimiento de contraseña, use el siguiente fragmento de código. Consulte un ejemplo completo en reset-password/page.tsx para obtener información sobre dónde colocar el fragmento de código:

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

Opcional: Iniciar sesión automáticamente a los usuarios después del restablecimiento de contraseña

Después de que un usuario restablezca correctamente su contraseña, puede iniciar sesión directamente en la aplicación sin iniciar un nuevo flujo de inicio de sesión. Para ello, usa el siguiente fragmento de código. Consulte un ejemplo completo en 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);
    }
}

Ejecución y prueba de la aplicación

Siga los pasos descritos en Ejecución y prueba de la aplicación para ejecutar la aplicación y, a continuación, pruebe el flujo de inicio de sesión.

Contenido relacionado

• Tutorial: Admitir el retroceso web en el SDK de JavaScript de autenticación nativa.