Dela via

Självstudie: Skapa ett Angular-program och förbered det för autentisering

  • Artikel

Gäller för: grön cirkel med en vit bockmarkeringssymbol. Workforce-klienter grön cirkel med en vit bockmarkeringssymbol. externa klienter (läs mer)

Den här självstudien är den första delen i en serie som visar hur du skapar ett Angular-ensidesprogram (SPA), lägger till autentisering och extraherar användardata med hjälp av Microsoft identity platform.

I den här handledningen:

  • Skapa ett nytt Angular-projekt
  • Konfigurera inställningarna för programmet
  • Lägga till autentiseringskod i programmet

Förutsättningar

Skapa ett nytt Angular-projekt

I det här avsnittet skapar du ett nytt Angular-projekt med hjälp av Angular CLI i Visual Studio Code. Välj lämplig flik baserat på din klienttyp.

Följ dessa steg för att skapa Angular-projektet från grunden:

  1. Öppna ett terminalfönster och kör följande kommando för att skapa ett nytt Angular-projekt:

    ng new msal-angular-tutorial --routing=true --style=css --strict=false

    Kommandot skapar ett nytt Angular-projekt med namnet msal-angular-tutorial med routning aktiverat, CSS för formatering och strikt läge inaktiverat.

  2. Ändra till projektkatalogen:

    cd msal-angular-tutorial

  3. Installera beroenden för appen:

    npm install @azure/msal-browser @azure/msal-angular bootstrap

    Kommandot npm install @azure/msal-browser @azure/msal-angular bootstrap installerar Azure MSAL-webbläsar-, Azure MSAL Angular- och Bootstrap-paketen.

  4. Öppna angular.json och lägg till Bootstraps CSS-sökväg till matrisen styles :

    "styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

    Koden lägger till Bootstrap CSS i stilmängden i angular.json-filen.

  5. Generera komponenter för start och profil:

    ng generate component home
ng generate component profile

    Kommandona genererar komponenterna Start och Profil i Angular-projektet.

  6. Ta bort onödiga filer och kod från projektet:

    rm src/app/app.component.css
rm src/app/app.component.spec.ts
rm src/app/home/home.component.css
rm src/app/home/home.component.spec.ts
rm src/app/profile/profile.component.css
rm src/app/profile/profile.component.spec.ts

    Kommandona tar bort onödiga filer och kod från projektet.

  7. Byt namn på app.routes.ts till app-routing.module.ts med Visual Studio Code och uppdatera alla referenser till app.routes.ts i hela programmet.

  8. Byt namn på app.config.ts till app.module.ts med Visual Studio Code och uppdatera alla referenser till app.config.ts i hela programmet.

När du har slutfört de här stegen bör projektstrukturen se ut så här:

.
├── README.md
├── angular.json
├── package-lock.json
├── package.json
├── src
│   ├── app
│   │   ├── app-routing.module.ts
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── home
│   │   │   ├── home.component.html
│   │   │   └── home.component.ts
│   │   └── profile
│   │       ├── profile.component.html
│   │       └── profile.component.ts
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   └── styles.css
├── tsconfig.app.json
└── tsconfig.json

Konfigurera programinställningar

I det här avsnittet konfigurerar du programinställningarna för autentisering. Vi använder värdena som registrerats under appregistreringen för att konfigurera programmet för autentisering. Välj lämplig flik baserat på din klienttyp.

Vi använder värdena som registrerats under appregistreringen för att konfigurera programmet för autentisering. Följ de här stegen:

  1. src/app/app.module.ts Öppna filen och ersätt innehållet med följande kod:

    // Required for Angular multi-browser support
import { BrowserModule } from '@angular/platform-browser';

// Required for Angular
import { NgModule } from '@angular/core';

// Required modules and components for this application
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProfileComponent } from './profile/profile.component';
import { HomeComponent } from './home/home.component';

// HTTP modules required by MSAL
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';

// Required for MSAL
import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';

const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      // 'Application (client) ID' of app registration in the Microsoft Entra admin center - this value is a GUID
      clientId: "Enter_the_Application_Id_Here",
      // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
      authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
      // Must be the same redirectUri as what was provided in your app registration.
      redirectUri: "http://localhost:4200",
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE
    }
  });
}

// MSAL Interceptor is required to request access tokens in order to access the protected resource (Graph)
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

// MSAL Guard is required to protect routes and require authentication before accessing protected routes
export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return { 
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: ['user.read']
    }
  };
}

// Create an NgModule that contains the routes and MSAL configurations
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MsalModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService
  ],
  bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }

    Koden konfigurerar MSAL för användarautentisering och API-skydd. Den konfigurerar appen med MsalInterceptor för att skydda API-begäranden och MsalGuard för att skydda vägar, samtidigt som viktiga komponenter och tjänster för autentisering definieras. Ersätt följande värden med värdena från administrationscentret för Microsoft Entra.

    • Ersätt Enter_the_Application_Id_Here med Application (client) ID från appregistreringen.
    • Ersätt Enter_the_Tenant_Info_Here med Directory (tenant) ID från appregistreringen.

  2. Spara filen.

Lägga till autentiseringskod i programmet

I det här avsnittet lägger du till autentiseringskod i programmet för att hantera användarautentisering och sessionshantering. Välj lämplig flik baserat på din klienttyp.

  1. Öppna src/app/app.component.ts filen och ersätt innehållet med följande kod:

    // Required for Angular
import { Component, OnInit, Inject, OnDestroy } from '@angular/core';

// Required for MSAL
import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
import { EventMessage, EventType, InteractionStatus, RedirectRequest } from '@azure/msal-browser';

// Required for RJXS
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'Angular - MSAL Example';
  loginDisplay = false;
  tokenExpiration: string = '';
  private readonly _destroying$ = new Subject<void>();

  constructor(
    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
    private authService: MsalService,
    private msalBroadcastService: MsalBroadcastService
  ) { }

  // On initialization of the page, display the page elements based on the user state
  ngOnInit(): void {
    this.msalBroadcastService.inProgress$
        .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        this.setLoginDisplay();
      });

      // Used for storing and displaying token expiration
      this.msalBroadcastService.msalSubject$.pipe(filter((msg: EventMessage) => msg.eventType === EventType.ACQUIRE_TOKEN_SUCCESS)).subscribe(msg => {
      this.tokenExpiration=  (msg.payload as any).expiresOn;
      localStorage.setItem('tokenExpiration', this.tokenExpiration);
    });
  }

  // If the user is logged in, present the user with a "logged in" experience
  setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
  }

  // Log the user in and redirect them if MSAL provides a redirect URI otherwise go to the default URI
  login() {
    if (this.msalGuardConfig.authRequest) {
      this.authService.loginRedirect({ ...this.msalGuardConfig.authRequest } as RedirectRequest);
    } else {
      this.authService.loginRedirect();
    }
  }

  // Log the user out
  logout() {
    this.authService.logoutRedirect();
  }

  ngOnDestroy(): void {
    this._destroying$.next(undefined);
    this._destroying$.complete();
  }
}

    Koden integrerar MSAL med Angular för att hantera användarautentisering. Den lyssnar efter ändringar i inloggningsstatusen, visar inloggningstillståndet, hanterar händelser för tokenförvärv och tillhandahåller metoder för att logga in eller ut användare baserat på Microsoft Entra-konfiguration.

  2. Spara filen.

Nästa steg

Självstudie: Lägga till funktionella komponenter för inloggning och utloggning i en Angular-app