Condividi tramite

Esercitazione: Reimpostare la password nell'app a pagina singola Angular usando JavaScript SDK per l'autenticazione nativa

Si applica a: Cerchio verde con un segno di spunta bianco che indica che il contenuto seguente si applica ai tenant esterni. Tenant esterni (ulteriori informazioni)

Questa esercitazione illustra come abilitare la reimpostazione della password nell'app a pagina singola Angular usando JavaScript SDK per l'autenticazione nativa. La reimpostazione della password è disponibile per gli account utente che usano la posta elettronica con il flusso di autenticazione della password.

In questa esercitazione, farai:

  • Aggiornare l'app Angular per reimpostare la password dell'utente.
  • Testare il flusso di reimpostazione della password

Prerequisiti

Creare il componente di reimpostazione della password

  1. Usare l'interfaccia della riga di comando di Angular per generare un nuovo componente per la reimpostazione della password all'interno della cartella dei componenti eseguendo il comando seguente:

    cd components
ng generate component reset-password

  2. Aprire il file reset-password/reset-password.component.ts e sostituirlo con il contenuto di reset-password.component.ts

  3. Aprire il file reset-password/reset-password.component.html e aggiungere il contenuto da reset-password.component.html.

    • La logica seguente in reset-password.component.ts determina il passaggio successivo dopo l'operazione di reimpostazione iniziale della password. A seconda del risultato, viene visualizzato il modulo di immissione del codice in reset-password.component.html per continuare il processo di reimpostazione della password:

      const result = await client.resetPassword({ username: this.email });
if (result.isCodeRequired()) {
            this.showCode = true;
            this.isReset = false;
            this.showNewPassword = false;
        }
      • Il metodo di istanza dell'SDK, resetPassword() avvia il flusso di reimpostazione della password.
      • Nel file 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>

    • Dopo submitCode() che è stato richiamato correttamente, il risultato determina il passaggio successivo: se è necessaria la password, viene visualizzato il nuovo modulo password per consentire all'utente di continuare il processo di reimpostazione della password.

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

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

    • Se si vuole che l'utente avvii il flusso di accesso immediatamente dopo il completamento della reimpostazione della password, usare questo frammento di codice:

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

Accesso automatico dopo la reimpostazione della password (facoltativo)

È possibile accedere automaticamente agli utenti dopo la reimpostazione della password senza avviare un nuovo flusso di accesso. A tale scopo, usare il frammento di codice seguente. Vedere un esempio completo in 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;
    }
}

Quando si accede automaticamente a un utente, usare il seguente frammento di codice nel 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>

Aggiornare il modulo di routing

Aprire il file src/app/app.routes.ts , quindi aggiungere la route per il componente di reimpostazione della password:

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

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

Testare la funzionalità di reimpostazione della password

  1. Per avviare il server proxy CORS, eseguire il comando seguente nel terminale:

    npm run cors

  2. Per avviare l'applicazione, eseguire il comando seguente nel terminale:

    npm start

  3. Aprire un Web browser e passare a http://localhost:4200/reset-password. Viene visualizzato un modulo di iscrizione.

  4. Per reimpostare la password per un account utente esistente, immettere i dettagli, selezionare il pulsante Continua e quindi seguire le istruzioni.

Configura poweredByHeader: false in next.config.js

  • In Next.jsl'intestazione x-powered-by è inclusa per impostazione predefinita nelle risposte HTTP per indicare che l'applicazione è basata su Next.js. Tuttavia, per ragioni di sicurezza o personalizzazione, potresti desiderare di rimuovere o modificare questa intestazione.

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

Contenuti correlati

  • Last updated on