Compartir a través de

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

Se aplica a: Círculo verde con un símbolo de marca de verificación blanca que indica que el siguiente contenido se aplica a los inquilinos externos. Inquilinos externos (más información)

En este tutorial, aprenderá a habilitar el restablecimiento de contraseña en la aplicación de página única de Angular mediante el SDK de JavaScript de autenticación nativa. El restablecimiento de contraseña está disponible para las cuentas de usuario que usan el correo electrónico con el flujo de autenticación de contraseñas.

En este tutorial, usted hará lo siguiente:

  • Actualice la aplicación angular para restablecer la contraseña del usuario.
  • Probar el flujo de restablecimiento de contraseña

Prerrequisitos

Creación del componente de restablecimiento de contraseña

  1. Use la CLI de Angular para generar un nuevo componente para el restablecimiento de contraseña dentro de la carpeta components mediante la ejecución del comando siguiente:

    cd components
ng generate component reset-password

  2. Abra el archivo reset-password/reset-password.component.ts y reemplace su contenido por el contenido de reset-password.component.ts

  3. Abra el archivo reset-password/reset-password.component.html y agregue el contenido de reset-password.component.html.

    • La siguiente lógica de reset-password.component.ts determina el paso siguiente después de la operación inicial de restablecimiento de contraseña. Según el resultado, muestra el formulario de entrada de código en reset-password.component.html para continuar con el proceso de restablecimiento de contraseña:

      const result = await client.resetPassword({ username: this.email });
if (result.isCodeRequired()) {
            this.showCode = true;
            this.isReset = false;
            this.showNewPassword = false;
        }
      • El método de instancia del SDK, resetPassword() inicia el flujo de restablecimiento de contraseña.
      • En el archivo reset-password.component.html :
      <form *ngIf="showCode" (ngSubmit)="submitCode()">
    <input type="text" [(ngModel)]="code" name="code" placeholder="OTP Code" required />
    <button type="button" (click)="submitCode()" [disabled]="loading">{{ loading ? 'Verifying...' : 'Verify Code' }}</button>
    </form>

    • Después submitCode() de invocarse correctamente, el resultado determina el siguiente paso: si se requiere la contraseña, se muestra el nuevo formulario de contraseña para que el usuario continúe con el proceso de restablecimiento de contraseña.

      if (result.isPasswordRequired()) {
    this.showCode = false;
    this.showNewPassword = true;
    this.isReset = false;
    this.resetState = result.state;
}

      En el archivo reset-password.component.html :

      <form *ngIf="showNewPassword" (ngSubmit)="submitNewPassword()">
    <input type="password" [(ngModel)]="newPassword" name="newPassword" placeholder="New Password" required />
    <button type="button" (click)="submitNewPassword()" [disabled]="loading">{{ loading ? 'Submitting...' : 'Submit New Password' }}</button>
  </form>

    • Si desea que el usuario inicie el flujo de inicio de sesión inmediatamente después de completar el restablecimiento de contraseña, use este fragmento de código:

      <div *ngIf="isReset">
    <p>The password has been reset, please click <a href="/sign-in">here</a> to sign in.</p>
</div>

Iniciar sesión automáticamente después de restablecer la contraseña (opcional)

Puede iniciar sesión automáticamente a los usuarios después de un restablecimiento de contraseña correcto sin iniciar un flujo de inicio de sesión nuevo. Para ello, usa el siguiente fragmento de código. Vea un ejemplo completo en reset-password.component.ts:

if (this.resetState instanceof ResetPasswordCompletedState) {
    const result = await this.resetState.signIn();
    
    if (result.isFailed()) {
        this.error = result.error?.errorData?.errorDescription || "An error occurred during auto sign-in";
    }
    
    if (result.isCompleted()) {
        this.userData = result.data;
        this.resetState = result.state;
        this.isReset = true;
        this.showCode = false;
        this.showNewPassword = false;
    }
}

Al realizar la firma automática en un usuario, use el siguiente fragmento de código en el reset-password.component.html:

<div *ngIf="userData && !isSignedIn">
    <p>Password reset completed, and signed in as {{ userData?.getAccount()?.username }}</p>
</div>
<div *ngIf="isReset && !userData">
    <p>Password reset completed! Signing you in automatically...</p>
</div>

Actualización del módulo de enrutamiento

Abra el archivo src/app/app.routes.ts y agregue la ruta para el componente de restablecimiento de contraseña:

import { ResetPasswordComponent } from './reset-password/reset-password.component';

const routes: Routes = [
    { path: 'reset-password', component: ResetPasswordComponent },
    ...
];

Prueba de la funcionalidad de restablecimiento de contraseña

  1. Para iniciar el servidor proxy CORS, ejecute el siguiente comando en el terminal:

    npm run cors

  2. Para iniciar la aplicación, ejecute el siguiente comando en el terminal:

    npm start

  3. Abra un explorador web y vaya a http://localhost:4200/reset-password. Aparece un formulario de registro.

  4. Para restablecer la contraseña de una cuenta de usuario existente, escriba los detalles, seleccione el botón Continuar y siga las indicaciones.

Configuración poweredByHeader: false en next.config.js

  • En Next.js, el encabezado x-powered-by se incluye de forma predeterminada en las respuestas HTTP para indicar que la aplicación funciona con Next.js. Sin embargo, por motivos de seguridad o personalización, es posible que desee quitar o modificar este encabezado.

    const nextConfig: NextConfig = {
  poweredByHeader: false,
  /* other config options here */
};

Contenido relacionado

  • Last updated on