Freigeben über

Lernprogramm: Zurücksetzen des Kennworts in der Angular-Einzelseiten-App mit systemeigener Authentifizierungs-JavaScript-SDK

Gilt für: Grüner Kreis mit einem weißen Häkchensymbol, das angibt, dass der folgende Inhalt für externe Mandanten gilt. Externe Mandanten (weitere Informationen)

In diesem Lernprogramm erfahren Sie, wie Sie die Kennwortzurücksetzung in der Angular-Einzelseiten-App mit systemeigenem JavaScript SDK aktivieren. Die Kennwortzurücksetzung ist für Benutzerkonten verfügbar, die E-Mails mit kennwortauthentifizierungsablauf verwenden.

In diesem Tutorial erfahren Sie:

  • Aktualisieren Sie die Angular-App, um das Kennwort des Benutzers zurückzusetzen.
  • Testflow für die Kennwortzurücksetzung

Voraussetzungen

Erstellen der Kennwortzurücksetzungskomponente

  1. Verwenden Sie Angular CLI, um eine neue Komponente für die Kennwortzurücksetzung innerhalb des Komponentenordners zu generieren, indem Sie den folgenden Befehl ausführen:

    cd components
ng generate component reset-password

  2. Öffnen Sie die Datei "Reset-password/reset-password.component.ts ", und ersetzen Sie den Inhalt durch den Inhalt aus reset-password.component.ts

  3. Öffnen Sie das Rücksetzkennwort/reset-password.component.html Datei, und fügen Sie den Inhalt aus reset-password.component.htmlhinzu.

    • Die folgende Logik in reset-password.component.ts bestimmt den nächsten Schritt nach dem anfänglichen Zurücksetzen des Kennwortvorgangs. Je nach Ergebnis wird das Codeeingabeformular in reset-password.component.html angezeigt, um den Kennwortzurücksetzungsprozess fortzusetzen:

      const result = await client.resetPassword({ username: this.email });
if (result.isCodeRequired()) {
            this.showCode = true;
            this.isReset = false;
            this.showNewPassword = false;
        }
      • Die Instanzmethode des SDK, resetPassword() startet den Kennwortzurücksetzungsfluss.
      • In der dateireset-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>

    • Nachdem submitCode() das Ergebnis erfolgreich aufgerufen wurde, bestimmt das Ergebnis den nächsten Schritt: Wenn das Kennwort erforderlich ist, wird das neue Kennwortformular angezeigt, damit der Benutzer den Kennwortzurücksetzungsprozess fortsetzen kann.

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

      In der dateireset-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>

    • Wenn der Benutzer den Anmeldefluss unmittelbar nach Abschluss des Zurücksetzens des Kennworts starten soll, verwenden Sie diesen Codeausschnitt:

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

Automatische Anmeldung nach dem Zurücksetzen des Kennworts (optional)

Sie können ihre Benutzer nach einer erfolgreichen Kennwortzurücksetzung automatisch anmelden, ohne einen neuen Anmeldeablauf zu starten. Verwenden Sie dazu den folgenden Codeschnipsel. Ein vollständiges Beispiel finden Sie unter 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;
    }
}

Wenn Sie die automatische Anmeldung in einem Benutzer ausführen, verwenden Sie den folgenden Codeausschnitt in Ihrem 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>

Aktualisieren des Routingmoduls

Öffnen Sie die Datei "src/app/app.routes.ts ", und fügen Sie dann die Route für die Kennwortzurücksetzungskomponente hinzu:

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

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

Testen der Kennwortzurücksetzungsfunktionalität

  1. Führen Sie zum Starten des CORS-Proxyservers den folgenden Befehl in Ihrem Terminal aus:

    npm run cors

  2. Führen Sie zum Starten der Anwendung den folgenden Befehl in Ihrem Terminal aus:

    npm start

  3. Öffnen Sie einen Webbrowser, und navigieren Sie zu http://localhost:4200/reset-password. Ein Registrierungsformular wird angezeigt.

  4. Um das Kennwort für ein vorhandenes Benutzerkonto zurückzusetzen, geben Sie Ihre Details ein, wählen Sie die Schaltfläche " Weiter " aus, und folgen Sie dann den Eingabeaufforderungen.

Einrichten poweredByHeader: false in next.config.js

  • In Next.jsist der x-powered-by-Header standardmäßig in HTTP-Antworten enthalten, um anzugeben, dass die Anwendung von Next.jsunterstützt wird. Aus Sicherheits- oder Anpassungsgründen möchten Sie diesen Header jedoch möglicherweise entfernen oder ändern.

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

Verwandte Inhalte

  • Last updated on