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

Van toepassing op: 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:

Vereiste voorwaarden

• Voltooi de stappen in zelfstudie: Gebruikers registreren bij de Angular-app met één pagina met behulp van de JavaScript SDK voor systeemeigen verificatie.
• Schakel selfservice voor wachtwoordherstel (SSPR) in voor klantgebruikers in de externe tenant. SSPR is beschikbaar voor klantgebruikers voor apps die e-mail gebruiken met wachtwoordverificatiestroom.

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

• Zelfstudie: Ondersteuning voor webback in systeemeigen verificatie JavaScript SDK.