Självstudie: Skapa ett Angular-program och förbered det för autentisering
Gäller för: Workforce-klienter
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
- Angular CLI
- Node.js.
- Visual Studio Code eller någon annan kodredigerare.
- En ny appregistrering i administrationscentret för Microsoft Entra med följande konfiguration. För mer information, se Registrera en applikation.
- Namn: identity-client-spa
- kontotyper som stöds: endast konton i den här organisationskatalogen (enskild klientorganisation).
- Plattformskonfiguration: Enkelsidigt program (SPA).
-
omdirigerings-URI:
http://localhost:4200/
.
- (Endast externt) Ett användarflöde som har associerats med din appregistrering. Mer information finns i Skapa användarflöden för självbetjäningsregistrering för appar i externa klienter och Lägg till ditt program i användarflödet.
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:
Ö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.Ändra till projektkatalogen:
cd msal-angular-tutorial
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.Öppna
angular.json
och lägg till Bootstraps CSS-sökväg till matrisenstyles
:"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.Generera komponenter för start och profil:
ng generate component home ng generate component profile
Kommandona genererar komponenterna Start och Profil i Angular-projektet.
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.
Byt namn på
app.routes.ts
tillapp-routing.module.ts
med Visual Studio Code och uppdatera alla referenser tillapp.routes.ts
i hela programmet.Byt namn på
app.config.ts
tillapp.module.ts
med Visual Studio Code och uppdatera alla referenser tillapp.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:
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 ochMsalGuard
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
medApplication (client) ID
från appregistreringen. - Ersätt
Enter_the_Tenant_Info_Here
medDirectory (tenant) ID
från appregistreringen.
- Ersätt
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.
Ö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.
Spara filen.