Samouczek: logowanie się użytkowników w aplikacji Angular SPA przy użyciu natywnego zestawu SDK do uwierzytelniania w JavaScript

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

Z tego samouczka dowiesz się, jak zalogować się jako użytkownik do aplikacji jednostronicowej Angular (SPA) przy użyciu natywnego SDK do uwierzytelniania w JavaScript.

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

Wymagania wstępne

• Wykonaj kroki opisane w artykule Rejestrowanie użytkowników w aplikacji jednostronicowej Angular przy użyciu natywnego zestawu SDK dla języka JavaScript do uwierzytelniania.

Tworzenie składnika logowania

1. Użyj interfejsu wiersza polecenia platformy Angular, aby wygenerować nowy składnik na stronie logowania wewnątrz folderu components , uruchamiając następujące polecenie:

   cd components
   ng generate component sign-in
   

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

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

   • Poniższa logika w sign-in.component.ts określa następny krok po początkowej próbie logowania. W zależności od wyniku wyświetla on hasło lub jednorazowy formularz kodu w sign-in.component.html w celu poprowadzenia użytkownika przez odpowiednią część procesu logowania:

         const result: SignInResult = await client.signIn({ username: this.username });
     
         if (result.isPasswordRequired()) {
             this.showPassword = true;
             this.showCode = false;
         } else if (result.isCodeRequired()) {
             this.showPassword = false;
             this.showCode = true;
         } else if (result.isCompleted()) {
             this.isSignedIn = true;
             this.userData = result.data;
         }
     

     • Metoda instancji zestawu SDK signIn() uruchamia przepływ logowania.

     Uwaga / Notatka

     Parametr username akceptuje adres e-mail lub nazwę użytkownika (alias), gdy wbudowany atrybut użytkownika Nazwa użytkownika jest włączony w przepływie użytkownika w dzierżawie. Użytkownik może wprowadzić jedną wartość, aby się zalogować. Aby włączyć atrybut, zobacz Włączanie nazwy użytkownika w zasadach identyfikatora logowania.

     • W pliku sign-in.component.html :

     <form *ngIf="showPassword" (ngSubmit)="submitPassword()">
         <input type="password" [(ngModel)]="password" name="password" placeholder="Password" required />
         <button type="submit" [disabled]="loading">{{ loading ? 'Verifying...' : 'Submit Password' }}</button>
     </form>
     <form *ngIf="showCode" (ngSubmit)="submitCode()">
         <input type="text" [(ngModel)]="code" name="code" placeholder="OTP Code" required />
         <button type="submit" [disabled]="loading">{{ loading ? 'Verifying...' : 'Submit Code' }}</button>
     </form>
     

Aktualizowanie modułu routingu

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

import { SignInComponent } from './components/sign-in/sign-in.component';

export const routes: Routes = [
    ...
    { path: 'sign-in', component: SignInComponent },
];

Testowanie funkcji logowania

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

   npm run cors
   

2. Aby uruchomić aplikację Angular, otwórz kolejne okno terminalu, a następnie uruchom następujące polecenie:

   npm start
   

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

4. Aby zalogować się do istniejącego konta, wprowadź szczegóły, wybierz przycisk Zaloguj się, a następnie postępuj zgodnie z monitami.

Następny krok