Zelfstudie: Gebruikers aanmelden in Angular SPA met behulp van systeemeigen verificatie JavaScript SDK

Van toepassing op: Externe tenants (meer informatie)

In deze zelfstudie leert u hoe u gebruikers kunt aanmelden bij een Angular-app met één pagina (SPA) met behulp van de JavaScript SDK voor systeemeigen verificatie.

In deze handleiding leert u:

Vereiste voorwaarden

• Voer de stappen in Registratie van gebruikers uit in de Angular-app met één pagina met behulp van de JavaScript SDK voor systeemeigen verificatie.

Een aanmeldingsonderdeel maken

1. Gebruik Angular CLI om een nieuw onderdeel te genereren voor aanmeldingspagina in de map onderdelen door de volgende opdracht uit te voeren:

   cd components
   ng generate component sign-in
   

2. Open het aanmeldings-/sign-in.component.ts-bestand en vervang de inhoud door inhoud uit sign-in.component.ts

3. Open het aanmeldings-/sign-in.component.html-bestand en voeg de inhoud toe vanuit sign-in.component.html.

   • De volgende logica in sign-in.component.ts bepaalt de volgende stap na de eerste aanmeldingspoging. Afhankelijk van het resultaat wordt het wachtwoord of het eenmalige codeformulier weergegeven in sign-in.component.html om de gebruiker door het juiste deel van het aanmeldingsproces te leiden:

         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;
         }
     

     • De instantiemethode signIn() van de SDK start de aanmeldingsstroom.

     Note

     De username parameter accepteert het e-mailadres van de gebruiker of de gebruikersnaam (alias) wanneer het ingebouwde gebruikerskenmerk gebruikersnaam is ingeschakeld in de gebruikersstroom van uw tenant. De gebruiker kan een van beide waarden invoeren om u aan te melden. Zie Gebruikersnaam inschakelen in het beleid voor aanmeldings-id's om het kenmerk in te schakelen.

     • In het sign-in.component.html-bestand:

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

De routeringsmodule bijwerken

Open het bestand src/app/app.routes.ts en voeg vervolgens de route toe voor het aanmeldingsonderdeel:

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

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

De aanmeldingsfunctionaliteit testen

1. Voer de volgende opdracht uit in de terminal om de CORS-proxyserver te starten:

   npm run cors
   

2. Als u de Angular-app wilt starten, opent u een ander terminalvenster en voert u vervolgens de volgende opdracht uit:

   npm start
   

3. Open een webbrowser en navigeer naar http://localhost:4200/sign-in. Er wordt een aanmeldingsformulier weergegeven.

4. Als u zich wilt aanmelden bij een bestaand account, voert u uw gegevens in, selecteert u de knop Aanmelden en volgt u de aanwijzingen.

Volgende stap