Condividi tramite

Esercitazione: Creare un'app a pagina singola Angular e prepararla per l'autenticazione

Si applica a: Cerchio verde con un simbolo di spunta bianco che indica che il contenuto seguente si applica ai tenant della forza lavoro. I tenant della forza lavoro Cerchio verde con un simbolo di spunta bianco che indica che il contenuto seguente si applica ai tenant esterni. I tenant esterni (Altre informazioni)

Questa esercitazione è la prima parte di una serie che illustra la creazione di un'applicazione a pagina singola Angular( SPA), l'aggiunta dell'autenticazione e l'estrazione dei dati utente tramite Microsoft Identity Platform.

In questa esercitazione, farai:

  • Creare un nuovo progetto Angular
  • Configurare le impostazioni per l'applicazione
  • Aggiungere il codice di autenticazione all'applicazione

Prerequisiti

  • Inquilino della forza lavoro. È possibile usare la directory predefinita o configurare un nuovo tenant.
  • Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra, configurata solo per gli account in questa directory organizzativa. Per altri dettagli, vedere Registrare un'applicazione . Registrare i valori seguenti dalla pagina Panoramica dell'applicazione per usarli in un secondo momento:
    • ID applicazione (cliente)
    • ID della directory (cliente)
  • Aggiungi gli URI di reindirizzamento seguenti utilizzando la configurazione della piattaforma applicazione a pagina singola. Per altri dettagli, vedere Come aggiungere un URI di reindirizzamento nell'applicazione .
    • URI di reindirizzamento: http://localhost:4200/.

Creare un nuovo progetto Angular

In questa sezione si creerà un nuovo progetto Angular usando l'interfaccia della riga di comando di Angular in Visual Studio Code. Scegliere la scheda appropriata in base al tipo di inquilino.

Per compilare il progetto Angular da zero, seguire questa procedura:

  1. Aprire una finestra del terminale ed eseguire il comando seguente per creare un nuovo progetto Angular:

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

    Il comando crea un nuovo progetto Angular denominato msal-angular-tutorial con routing abilitato, CSS per l'applicazione di stili e modalità strict disabilitata.

  2. Spostarsi nella directory del progetto:

    cd msal-angular-tutorial

  3. Installare le dipendenze dell'app:

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

    Il comando npm install @azure/msal-browser @azure/msal-angular bootstrap installa il browser MSAL di Azure, Azure MSAL Angular e i pacchetti Bootstrap.

  4. Aprire angular.json e aggiungere il percorso CSS di Bootstrap alla styles matrice:

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

    Il codice aggiunge il css Bootstrap alla matrice di stili nel angular.json file.

  5. Crea i componenti Home e Profilo:

    ng generate component home
ng generate component profile

    I comandi generano i componenti Home e Profile nel progetto Angular.

  6. Rimuovere file e codice non necessari dal progetto:

    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

    I comandi rimuovono i file e il codice non necessari dal progetto.

  7. Rinomina app.routes.ts in app-routing.module.ts usando Visual Studio Code e aggiorna tutti i riferimenti di app.routes.ts nell'intera applicazione.

  8. Rinominare app.config.ts in app.module.ts usando Visual Studio Code e aggiornare tutti i riferimenti a app.config.ts in tutta l'applicazione.

Dopo aver completato questi passaggi, la struttura del progetto avrà un aspetto simile al seguente:

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

Configurare le impostazioni dell'applicazione

In questa sezione verranno configurate le impostazioni dell'applicazione per l'autenticazione. I valori registrati durante la registrazione dell'app verranno usati per configurare l'applicazione per l'autenticazione. Scegliere la scheda appropriata in base al tipo di inquilino.

I valori registrati durante la registrazione dell'app verranno usati per configurare l'applicazione per l'autenticazione. Seguire questa procedura:

  1. Aprire il src/app/app.module.ts file e sostituire il contenuto con il codice seguente:

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

    Il codice configura MSAL per l'autenticazione utente e la protezione api. Configura l'app con MsalInterceptor per proteggere le richieste API e MsalGuard proteggere le route, definendo al tempo stesso i componenti chiave e i servizi per l'autenticazione. Sostituire i valori seguenti con i valori dell'interfaccia di amministrazione di Microsoft Entra.

    • Sostituire Enter_the_Application_Id_Here con il Application (client) ID dalla registrazione dell'app.
    • Sostituire Enter_the_Tenant_Info_Here con il Directory (tenant) ID dalla registrazione dell'app.

  2. Salvare il file.

Aggiungere il codice di autenticazione all'applicazione

In questa sezione si aggiungerà il codice di autenticazione all'applicazione per gestire l'autenticazione utente e la gestione delle sessioni. Scegliere la scheda appropriata in base al tipo di inquilino.

  1. Aprire src/app/app.component.ts il file e sostituire il contenuto con il codice seguente:

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

    Il codice integra MSAL con Angular per gestire l'autenticazione utente. Rimane in ascolto delle modifiche dello stato di accesso, visualizza lo stato di accesso, gestisce gli eventi di acquisizione dei token e fornisce metodi per l'accesso o l'uscita degli utenti in base alla configurazione di Microsoft Entra.

  2. Salvare il file.

Passaggi successivi

Esercitazione: Aggiungere e disconnettere componenti funzionali in un'app Angular

  • Last updated on