Esercitazione: Creare un'applicazione Angular e prepararla per l'autenticazione
si applica a: locatari della forza lavoro
locatari esterni (ulteriori 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 questo tutorial:
- Creare un nuovo progetto Angular
- Configurare le impostazioni per l'applicazione
- Aggiungere il codice di autenticazione all'applicazione
Prerequisiti
- Angular CLI
- Node.js.
- Visual Studio Code o un altro editor di codice.
- Nuova registrazione dell'app nell'interfaccia di amministrazione di Microsoft Entra con la configurazione seguente. Per delle altre informazioni, vedere la sezione Registrazione di un'applicazione.
- Nome: identity-client-spa
- Tipi di account supportati: account solo in questa directory organizzativa (tenant singolo).
- Configurazione della piattaforma: applicazione a pagina singola (SPA).
-
URI di reindirizzamento:
http://localhost:4200/
.
- (solo esterno) Flusso utente associato alla registrazione dell'app. Per ulteriori informazioni, consultare Creare flussi utente di registrazione self-service per le app nei tenant esterni e Aggiungere l'applicazione al flusso utente.
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.
- tenant di Workforce
- tenant esterno
Per compilare il progetto Angular da zero, seguire questa procedura:
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.Spostarsi nella directory del progetto:
cd msal-angular-tutorial
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.Aprire
angular.json
e aggiungere il percorso CSS di Bootstrap allastyles
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.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.
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.
Rinomina
app.routes.ts
inapp-routing.module.ts
usando Visual Studio Code e aggiorna tutti i riferimenti diapp.routes.ts
nell'intera applicazione.Rinominare
app.config.ts
inapp.module.ts
usando Visual Studio Code e aggiornare tutti i riferimenti aapp.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.
- tenant di Workforce
- tenant esterno
I valori registrati durante la registrazione dell'app verranno usati per configurare l'applicazione per l'autenticazione. Seguire questa procedura:
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 eMsalGuard
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 ilApplication (client) ID
dalla registrazione dell'app. - Sostituire
Enter_the_Tenant_Info_Here
con ilDirectory (tenant) ID
dalla registrazione dell'app.
- Sostituire
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 utente.
- tenant di Workforce
- tenant esterno
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.
Salvare il file.