Delen via

Zelfstudie: Wachtwoord opnieuw instellen in de Angular-app met één pagina met behulp van de JavaScript SDK voor systeemeigen verificatie

Van toepassing op: Groene cirkel met een wit vinkje dat aangeeft dat de volgende inhoud van toepassing is op externe tenants. Externe tenants (meer informatie)

In deze zelfstudie leert u hoe u wachtwoordherstel inschakelt in de Angular-app met één pagina met behulp van de JavaScript SDK voor systeemeigen verificatie. Wachtwoordherstel is beschikbaar voor gebruikersaccounts die e-mail gebruiken met wachtwoordverificatiestroom.

In deze handleiding leert u:

  • Werk de Angular-app bij om het wachtwoord van de gebruiker opnieuw in te stellen.
  • Test het proces voor wachtwoordherstel

Vereiste voorwaarden

Het onderdeel voor wachtwoordherstel maken

  1. Gebruik Angular CLI om een nieuw onderdeel te genereren voor wachtwoordherstel in de map onderdelen door de volgende opdracht uit te voeren:

    cd components
ng generate component reset-password

  2. Open het bestand reset-password/reset-password.component.ts en vervang de inhoud door de inhoud van reset-password.component.ts

  3. Open het bestand reset-password/reset-password.component.html en voeg de inhoud toe vanuit reset-password.component.html.

    • De volgende logica in reset-password.component.ts bepaalt de volgende stap na de eerste bewerking voor het opnieuw instellen van het wachtwoord. Afhankelijk van het resultaat wordt het codeinvoerformulier weergegeven in reset-password.component.html om door te gaan met het proces voor het opnieuw instellen van het wachtwoord:

      const result = await client.resetPassword({ username: this.email });
if (result.isCodeRequired()) {
            this.showCode = true;
            this.isReset = false;
            this.showNewPassword = false;
        }
      • De instantiemethode resetPassword() van de SDK start het wachtwoordresetproces.
      • In het bestand 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>

    • Nadat submitCode() succesvol is aangeroepen, bepaalt het resultaat de volgende stap: als een wachtwoord vereist is, wordt het nieuwe wachtwoordformulier weergegeven zodat de gebruiker het proces voor het opnieuw instellen van het wachtwoord kan voortzetten.

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

      In het bestand 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>

    • Als u wilt dat de gebruiker de aanmeldingsstroom onmiddellijk start nadat het wachtwoord opnieuw is ingesteld, gebruikt u dit fragment:

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

Automatisch aanmelden na het opnieuw instellen van het wachtwoord (optioneel)

U kunt uw gebruikers automatisch aanmelden na een geslaagde wachtwoordherstel zonder een nieuwe aanmeldingsstroom te starten. Gebruik hiervoor het volgende codefragment. Bekijk een volledig voorbeeld op 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;
    }
}

Gebruik het volgende codefragment in uw reset-password.component.htmlwanneer u een gebruiker automatisch ondertekent:

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

De routeringsmodule bijwerken

Open het src/app/app.routes.ts-bestand en voeg vervolgens de route toe voor het onderdeel wachtwoordherstel:

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

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

De functionaliteit voor wachtwoordherstel testen

  1. Voer de volgende opdracht uit in de terminal om de CORS-proxyserver te starten:

    npm run cors

  2. Voer de volgende opdracht uit in uw terminal om uw toepassing te starten:

    npm start

  3. Open een webbrowser en navigeer naar http://localhost:4200/reset-password. Er wordt een registratieformulier weergegeven.

  4. Als u het wachtwoord voor een bestaand gebruikersaccount opnieuw wilt instellen, voert u uw gegevens in, selecteert u de knop Doorgaan en volgt u de aanwijzingen.

poweredByHeader: false instellen in next.config.js

  • In Next.jswordt de x-powered-by-header standaard opgenomen in HTTP-antwoorden om aan te geven dat de toepassing wordt aangedreven door Next.js. Om veiligheids- of aanpassingsredenen wilt u deze header echter verwijderen of wijzigen.

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

Verwante inhoud

  • Last updated on