Sdílet prostřednictvím

Kurz: Resetování hesla v jednostráňové aplikaci Angular pomocí nativní sady JavaScript SDK pro ověřování

Platí pro: Zelený kruh se symbolem bílé značky zaškrtnutí, který označuje následující obsah platí pro externí tenanty. Externí tenanti (další informace)

V tomto kurzu se dozvíte, jak povolit resetování hesla v jednostráňkové aplikaci Angular pomocí nativní sady JavaScript SDK pro ověřování. Resetování hesla je k dispozici pro uživatelské účty, které používají e-mail s tokem ověřování hesla.

V tomto kurzu se naučíte:

  • Aktualizujte aplikaci Angular, aby se resetuje heslo uživatele.
  • Testování toku resetování hesla

Požadavky

Vytvoření komponenty pro resetování hesla

  1. Pomocí Angular CLI vygenerujte novou komponentu pro resetování hesla ve složce komponent spuštěním následujícího příkazu:

    cd components
ng generate component reset-password

  2. Otevřete soubor resetování hesla/reset-password.component.ts a nahraďte jeho obsah obsahem z reset-password.component.ts

  3. Otevřete soubor resetování hesla/reset-password.component.html a přidejte obsah z reset-password.component.html.

    • Následující logika v reset-password.component.ts určuje další krok po počáteční operaci resetování hesla. V závislosti na výsledku se v reset-password.component.html zobrazí formulář pro zadání kódu, aby pokračoval v procesu resetování hesla:

      const result = await client.resetPassword({ username: this.email });
if (result.isCodeRequired()) {
            this.showCode = true;
            this.isReset = false;
            this.showNewPassword = false;
        }
      • Metoda instance sady SDK resetPassword() spustí tok resetování hesla.
      • V souboru 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>

    • Po submitCode() úspěšném vyvolání výsledek určí další krok: pokud je požadováno heslo, zobrazí se nový formulář pro heslo, aby uživatel mohl pokračovat v procesu resetování hesla.

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

      V souboru 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>

    • Pokud chcete, aby uživatel spustil tok přihlašování hned po dokončení resetování hesla, použijte tento fragment kódu:

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

Automatické přihlášení po resetování hesla (volitelné)

Po úspěšném resetování hesla můžete uživatele automaticky přihlásit bez spuštění nového toku přihlášení. K tomu použijte následující fragment kódu. Podívejte se na úplný příklad na 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;
    }
}

Při automatickém podepsání uživatele použijte ve svémreset-password.component.htmlnásledující fragment kódu:

<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>

Aktualizace modulu směrování

Otevřete soubor src/app/app.routes.ts a přidejte trasu pro komponentu pro resetování hesla:

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

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

Otestování funkce resetování hesla

  1. Pokud chcete spustit proxy server CORS, spusťte v terminálu následující příkaz:

    npm run cors

  2. Aplikaci spustíte spuštěním následujícího příkazu v terminálu:

    npm start

  3. Otevřete webový prohlížeč a přejděte na http://localhost:4200/reset-password. Zobrazí se registrační formulář.

  4. Pokud chcete resetovat heslo pro existující uživatelský účet, zadejte podrobnosti, vyberte tlačítko Pokračovat a postupujte podle pokynů.

Nastavení poweredByHeader: false v next.config.js

  • V Next.jsje hlavička x-powered-by zahrnuta ve výchozím nastavení v odpovědích HTTP, která indikuje, že aplikace je poháněna Next.js. Z důvodů zabezpečení nebo přizpůsobení však můžete chtít odebrat nebo upravit tuto hlavičku.

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

Související obsah

  • Last updated on