Självstudie: Logga in användare i Angular SPA med hjälp av inbyggd autentisering i JavaScript SDK

Gäller för: Externa klienter (läs mer)

I den här självstudien får du lära dig hur du loggar in användare i en Enkelsidig Angular-app (SPA) med hjälp av inbyggd autentisering med JavaScript SDK.

I den här handledningen kommer du att:

• Uppdatera Angular-appen för att logga in användare.
• Testa inloggningsflödet.

Förutsättningar

• Slutför stegen i Registrera användare i ensidesappen Angular med hjälp av inbyggd autentisering med JavaScript SDK.

Skapa en inloggningskomponent

1. Använd Angular CLI för att generera en ny komponent för inloggningssidan i komponentmappen genom att köra följande kommando:

   cd components
   ng generate component sign-in
   

2. Öppna inloggnings-/sign-in.component.ts-filen och ersätt innehållet med innehåll från sign-in.component.ts

3. Öppna filen för inloggning/sign-in.component.html och lägg till innehållet från sign-in.component.html.

   • Följande logik i sign-in.component.ts avgör nästa steg efter det första inloggningsförsöket. Beroende på resultatet visas antingen lösenordet eller engångskodformuläret i sign-in.component.html för att vägleda användaren genom lämplig del av inloggningsprocessen:

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

     • SDK:ts instansmetod signIn() startar inloggningsflödet.

     • I filensign-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>
     

Uppdatera routningsmodulen

Öppna filen src/app/app.routes.ts och lägg sedan till vägen för inloggningskomponenten:

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

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

Testa inloggningsfunktionen

1. Starta CORS-proxyservern genom att köra följande kommando i terminalen:

   npm run cors
   

2. Starta Angular-appen genom att öppna ett annat terminalfönster och sedan köra följande kommando:

   npm start
   

3. Öppna en webbläsare och navigera till http://localhost:4200/sign-in. Ett inloggningsformulär visas.

4. Om du vill logga in på ett befintligt konto anger du din information, väljer knappen Logga in och följer sedan anvisningarna.

Aktivera inloggning med ett alias eller användarnamn

Du kan tillåta att användare som loggar in med en e-postadress och ett lösenord även loggar in med ett användarnamn och lösenord. Användarnamnet kallas även för en alternativ inloggningsidentifierare, kan vara ett kund-ID, kontonummer eller en annan identifierare som du väljer att använda som användarnamn.

Du kan tilldela användarnamn till användarkontot manuellt via administrationscentret för Microsoft Entra eller automatisera det i din app via Microsoft Graph API.

Använd stegen i artikeln Logga in med ett alias eller användarnamn så att användarna kan logga in med ett användarnamn i programmet:

1. Aktivera användarnamn vid inloggning.
2. Skapa användare med användarnamn i administrationscentret eller uppdatera befintliga användare till genom att lägga till ett användarnamn. Du kan också automatisera skapandet och uppdateringen av användare i din app med hjälp av Microsoft Graph API.

Nästa steg

Självstudie: Återställa lösenord i ensidig Angular-app med inbyggd autentisering Med JavaScript SDK