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.

     • In het bestandsign-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>
     

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.

Aanmelden met een alias of gebruikersnaam inschakelen

U kunt gebruikers toestaan die zich aanmelden met een e-mailadres en wachtwoord, zich ook aan te melden met een gebruikersnaam en wachtwoord. De gebruikersnaam wordt ook wel een alternatieve aanmeldings-id genoemd, kan een klant-id, accountnummer of een andere id zijn die u als gebruikersnaam wilt gebruiken.

U kunt gebruikersnamen handmatig toewijzen aan het gebruikersaccount via het Microsoft Entra-beheercentrum of deze automatiseren in uw app via de Microsoft Graph API.

Gebruik de stappen in Aanmelden met een alias of gebruikersnaam-artikel om uw gebruikers toe te staan zich aan te melden met behulp van een gebruikersnaam in uw toepassing:

1. Schakel gebruikersnaam in bij het inloggen.
2. Maak gebruikers aan met een gebruikersnaam in het beheercentrum of werk bestaande gebruikers bij door een gebruikersnaam toe te voegen. Je kunt ook het aanmaken en updaten van gebruikers in je app automatiseren door gebruik te maken van de Microsoft Graph API.

Volgende stap