Tutorial: Redefinir senha em um aplicativo de página única do React usando o SDK javaScript de autenticação nativa

Aplica-se a: Locatários externos (saiba mais)

Neste tutorial, você aprenderá a habilitar a redefinição de senha em um aplicativo de página única do React usando o SDK javaScript de autenticação nativa.

Neste tutorial, você:

Pré-requisitos

• Conclua as etapas no Tutorial: inscrever usuários em um aplicativo de página única do React usando o SDK javaScript de autenticação nativa.
• Habilite a SSPR (redefinição de senha de autoatendimento) para usuários clientes no locatário externo. A SSPR está disponível para usuários clientes para aplicativos que usam email com fluxo de autenticação de senha.

Criar componentes de interface do usuário

Durante o fluxo de redefinição de senha, este aplicativo coleta o nome de usuário (email) do usuário, uma senha única e uma nova senha de usuário em telas diferentes. Nesta seção, você criará os formulários que coletam as informações necessárias pelo aplicativo para redefinir a senha.

1. Crie uma pasta chamada src/app/reset-password.

2. Crie o arquivo reset-password/components/InitialForm.tsx e cole o código de reset-password/components/InitialForm.tsx. Esse componente exibe um formulário que coleta o nome de usuário (email) de um usuário.

3. Crie o arquivo reset-password/components/CodeForm.tsx e cole o código de reset-password/components/CodeForm.tsx. Esse componente exibe um formulário que coleta a senha única que o usuário recebe em sua caixa de entrada de email.

4. Crie o arquivo reset-password/components/NewPasswordForm.tsx e cole o código de reset-password/components/NewPasswordForm.tsx. Esse componente exibe um formulário que coleta a nova senha de um usuário.

Manipular interações de formulário

Crie um arquivo reset-password/page.tsx para manipular a lógica de um fluxo de entrada. Neste arquivo:

• Importe os componentes necessários e exiba o formulário adequado com base no estado. Veja um exemplo completo em 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 o fluxo de redefinição de senha, use o snippet de código a seguir. Veja um exemplo completo em reset-password/page.tsx para saber onde colocar o snippet 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);
  };
  

  O método resetPassword()de instância do SDK inicia o fluxo de redefinição de senha.

• Para enviar a senha única, use o snippet de código a seguir. Veja um exemplo completo em reset-password/page.tsx para saber onde colocar o snippet 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);
  };
  

  O estado de redefinição de submitCode() senha envia a senha única.

• Para enviar a nova senha do usuário, use o snippet de código a seguir. Veja um exemplo completo em reset-password/page.tsx para saber onde colocar o snippet 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);
  };
  

  O estado de redefinição de submitNewPassword() senha envia a nova senha do usuário.

• Para usar o resultado da redefinição de senha, use o snippet de código a seguir. Veja um exemplo completo em reset-password/page.tsx para saber onde colocar o snippet de código:

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

Opcional: conectar usuários automaticamente após a redefinição de senha

Depois que um usuário redefinir a senha com êxito, você poderá conectá-la diretamente ao aplicativo sem iniciar um novo fluxo de entrada. Para fazer isso, use o trecho de código a seguir. Veja um exemplo completo em 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);
    }
}

Executar e testar seu aplicativo

Use as etapas em Executar e teste seu aplicativo para executar seu aplicativo e teste o fluxo de entrada.

Conteúdo relacionado

• Tutorial: Suporte a fallback da Web no SDK javaScript de autenticação nativa.