Delen via


Zelfstudie: Een Angular-toepassing maken en voorbereiden op verificatie

Nadat de registratie is voltooid, kan een Angular-project worden gemaakt met behulp van Angular CLI (opdrachtregelinterface). In deze zelfstudie ziet u hoe u een Angular-toepassing met één pagina maakt met behulp van de Angular CLI en hoe u bestanden maakt die nodig zijn voor verificatie en autorisatie.

In deze zelfstudie:

  • Een nieuw Angular-project maken
  • De instellingen voor de toepassing configureren
  • Verificatiecode toevoegen aan de toepassing

Vereisten

Een nieuw Angular-project maken

Voer de volgende stappen uit om het volledig nieuwe Angular-project te bouwen:

  1. Open een terminalvenster en voer de volgende opdracht uit om een nieuw Angular-project te maken:

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

    Met de opdracht maakt u een nieuw Angular-project met de naam msal-angular-tutorial routering ingeschakeld, CSS voor stijl en strikte modus uitgeschakeld.

  2. Ga naar de projectmap:

    cd msal-angular-tutorial
    
  3. App-afhankelijkheden installeren:

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

    Met de opdracht npm install @azure/msal-browser @azure/msal-angular bootstrap worden de Azure MSAL-browser, Azure MSAL Angular en Bootstrap-pakketten geïnstalleerd.

  4. Open angular.json het CSS-pad van Bootstrap en voeg dit toe aan de styles matrix:

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

    De code voegt de Bootstrap CSS toe aan de stijlenmatrix in het angular.json bestand.

  5. Onderdelen voor thuisgebruik en profiel genereren:

    ng generate component home
    ng generate component profile
    

    Met de opdrachten worden de onderdelen Home en Profile in het Angular-project gegenereerd.

  6. Verwijder overbodige bestanden en code uit het project:

    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
    

    Met de opdrachten worden overbodige bestanden en code uit het project verwijderd.

  7. Wijzig de naam app.routes.ts van app-routing.module.ts Visual Studio Code en werk alle verwijzingen in app.routes.ts de toepassing bij.

  8. Wijzig de naam app.config.ts van app.module.ts Visual Studio Code en werk alle verwijzingen naar app.config.ts de hele toepassing bij.

Nadat u deze stappen hebt voltooid, moet de projectstructuur er als volgt uitzien:

.
├── 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

De instellingen voor de toepassing configureren

We gebruiken de waarden die tijdens de app-registratie zijn vastgelegd om de toepassing voor verificatie te configureren. Volg vervolgens deze stappen:

  1. Open het src/app/app.module.ts bestand en vervang de inhoud door de volgende code:

    // 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 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 { }
    

    Met de code wordt MSAL ingesteld voor gebruikersverificatie en API-beveiliging. De app wordt geconfigureerd voor MsalInterceptor het beveiligen van API-aanvragen en MsalGuard voor het beveiligen van routes, terwijl belangrijke onderdelen en services voor verificatie worden gedefinieerd. Vervang de volgende waarden door de waarden uit het Microsoft Entra-beheercentrum.

    • Vervang Enter_the_Application_Id_Here door de Application (client) ID app-registratie.
    • Vervang Enter_the_Tenant_Info_Here door de Directory (tenant) ID app-registratie.
  2. Sla het bestand op.

Verificatiecode toevoegen aan de toepassing

Als u gebruikersverificatie en sessiebeheer wilt afhandelen met MSAL Angular, moet u bijwerken src/app/app.component.ts.

  1. Open src/app/app.component.ts het bestand en vervang de inhoud door de volgende code:

    // 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();
      }
    }
    

    De code integreert MSAL met Angular om gebruikersverificatie te beheren. Het luistert naar wijzigingen in de aanmeldingsstatus, geeft de aanmeldingsstatus weer, verwerkt tokenovername-gebeurtenissen en biedt methoden om gebruikers in of uit te loggen op basis van De Configuratie van Microsoft Entra.

  2. Sla het bestand op.

Volgende stappen