Självstudie: Återställa lösenord i ensidig Angular-app med inbyggd autentisering Med JavaScript SDK

Gäller för: Externa klienter (läs mer)

I den här självstudien får du lära dig hur du aktiverar lösenordsåterställning i ensidesappen Angular med hjälp av inbyggd autentisering med JavaScript SDK. Lösenordsåterställning är tillgängligt för användarkonton som använder e-post med lösenordsautentiseringsflöde.

I den här handledningen kommer du att:

Förutsättningar

• Slutför stegen i Självstudie: Registrera användare i ensidesappen Angular med hjälp av inbyggd autentisering med JavaScript SDK.
• Aktivera självbetjäning av lösenordsåterställning (SSPR) för kundanvändare i den externa klientorganisationen. SSPR är tillgängligt för kundanvändare för appar som använder e-post med flöde för lösenordsautentisering.

Skapa komponenten för lösenordsåterställning

1. Använd Angular CLI för att generera en ny komponent för lösenordsåterställning i komponentmappen genom att köra följande kommando:

   cd components
   ng generate component reset-password
   

2. Öppna filen reset-password/reset-password.component.ts och ersätt innehållet med innehållet från reset-password.component.ts

3. Öppna filen reset-password/reset-password.component.html och lägg till innehållet från reset-password.component.html.

   • Följande logik i reset-password.component.ts avgör nästa steg efter den första återställningen av lösenordsåtgärden. Beroende på resultatet visas kodformuläret i reset-password.component.html för att fortsätta processen för lösenordsåterställning:

     const result = await client.resetPassword({ username: this.email });
     if (result.isCodeRequired()) {
                 this.showCode = true;
                 this.isReset = false;
                 this.showNewPassword = false;
             }
     

     • SDK:s instansmetod resetPassword() startar flödet för lösenordsåterställning.
     • I filenreset-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>
     

   • När submitCode() har anropats avgör resultatet nästa steg: om lösenord krävs visas det nya lösenordsformuläret för användaren för att fortsätta processen för lösenordsåterställning.

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

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

   • Om du vill att användaren ska starta inloggningsflödet direkt efter att återställningslösenordet har slutförts använder du det här kodfragmentet:

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

4. Öppna filen reset-password/reset-password.component.scss och lägg sedan till innehållet från reset-password.component.scss.

Logga in automatiskt efter återställning av lösenord (valfritt)

Du kan automatiskt logga in dina användare efter en lyckad lösenordsåterställning utan att starta ett nytt inloggningsflöde. Om du vill göra det använder du följande kodfragment. Se ett fullständigt exempel på 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;
    }
}

När du signerar automatiskt i en användare använder du följande kodfragment i 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>

Uppdatera routningsmodulen

Öppna filen src/app/app.routes.ts och lägg sedan till vägen för komponenten för lösenordsåterställning:

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

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

Testa funktionen för lösenordsåterställning

1. Starta CORS-proxyservern genom att köra följande kommando i terminalen:

   npm run cors
   

2. Starta programmet genom att köra följande kommando i terminalen:

   npm start
   

3. Öppna en webbläsare och navigera till http://localhost:4200/reset-password. Ett registreringsformulär visas.

4. Om du vill återställa lösenordet för ett befintligt användarkonto anger du din information, väljer knappen Fortsätt och följer sedan anvisningarna.

Konfigurera poweredByHeader: false i next.config.js

• I Next.jsingår x-powered-by-huvudet som standard i HTTP-svar för att indikera att programmet drivs av Next.js. Men av säkerhets- eller anpassningsskäl kanske du vill ta bort eller ändra det här huvudet.

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

Relaterat innehåll

• Självstudie: Stöd för webbåterställning i inbyggd autentisering Med JavaScript SDK.