Samouczek: resetowanie hasła w jednostronicowej aplikacji Angular przy użyciu natywnego zestawu SDK języka JavaScript uwierzytelniania

Dotyczy: Dzierżawy zewnętrzne (dowiedz się więcej)

Z tego samouczka dowiesz się, jak włączyć resetowanie haseł w aplikacji jednostronicowej Angular przy użyciu natywnego zestawu SDK języka JavaScript uwierzytelniania. Resetowanie hasła jest dostępne dla kont użytkowników korzystających z poczty e-mail z przepływem uwierzytelniania haseł.

W tym samouczku nauczysz się następujących rzeczy:

• Zaktualizuj aplikację Angular, aby zresetować hasło użytkownika.
• Testowanie przepływu resetowania hasła

Wymagania wstępne

• Wykonaj kroki opisane w artykule Samouczek: rejestrowanie użytkowników w aplikacji jednostronicowej platformy Angular przy użyciu natywnego zestawu JAVAScript SDK.
• Włącz samoobsługowe resetowanie haseł (SSPR) dla użytkowników klientów w zewnętrznej dzierżawie. Samoobsługowe resetowanie hasła jest dostępne dla użytkowników aplikacji korzystających z uwierzytelniania hasłem przez e-mail.

Tworzenie składnika resetowania hasła

1. Użyj interfejsu wiersza polecenia platformy Angular, aby wygenerować nowy składnik resetowania haseł w folderze components, uruchamiając następujące polecenie:

   cd components
   ng generate component reset-password
   

2. Otwórz plik reset-password/reset-password.component.ts i zastąp jego zawartość zawartością z reset-password.component.ts

3. Otwórz plik reset-password/reset-password.component.html i dodaj zawartość z reset-password.component.html.

   • Poniższa logika w reset-password.component.ts określa następny krok po początkowej operacji resetowania hasła. W zależności od wyniku wyświetla on formularz wprowadzania kodu w reset-password.component.html , aby kontynuować proces resetowania hasła:

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

     • Metoda instancji SDK resetPassword() rozpoczyna proces resetowania hasła.
     • W pliku 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>
     

   • Po submitCode() pomyślnym wywołaniu wynik określa następny krok: jeśli hasło jest wymagane, zostanie wyświetlony nowy formularz hasła, aby użytkownik kontynuował proces resetowania hasła.

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

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

   • Jeśli chcesz, aby użytkownik uruchamiał przepływ logowania natychmiast po zakończeniu resetowania hasła, użyj tego fragmentu kodu:

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

Automatyczne logowanie po zresetowaniu hasła (opcjonalnie)

Możesz automatycznie logować użytkowników po pomyślnym zresetowaniu hasła bez konieczności uruchamiania nowego przepływu logowania. W tym celu użyj następującego fragmentu kodu. Zobacz kompletny przykład w 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;
    }
}

Podczas automatycznego przypisywania użytkownika użyj następującego fragmentu kodu w 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>

Aktualizowanie modułu routingu

Otwórz plik src/app/app.routes.ts , a następnie dodaj trasę dla składnika resetowania hasła:

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

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

Testowanie funkcji resetowania hasła

1. Aby uruchomić serwer proxy CORS, uruchom następujące polecenie w terminalu:

   npm run cors
   

2. Aby uruchomić aplikację, uruchom następujące polecenie w terminalu:

   npm start
   

3. Otwórz przeglądarkę internetową i przejdź pod adres http://localhost:4200/reset-password. Zostanie wyświetlony formularz rejestracji.

4. Aby zresetować hasło dla istniejącego konta użytkownika, wprowadź szczegóły, wybierz przycisk Kontynuuj , a następnie postępuj zgodnie z monitami.

Skonfiguruj poweredByHeader: false w pliku next.config.js

• W Next.jsnagłówek x-powered-by jest domyślnie dołączany do odpowiedzi HTTP, aby wskazać, że aplikacja jest obsługiwana przez Next.js. Jednak ze względów zabezpieczeń lub dostosowywania możesz usunąć lub zmodyfikować ten nagłówek.

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

Treści powiązane

• Samouczek: obsługa awaryjnego rozwiązania w sieci w natywnym zestawie SDK JavaScript do uwierzytelniania.