Självstudie: Skapa en enkelsidig Angular-app och förbered den för autentisering

• En hyresgäst för arbetskraft. Du kan använda din standardkatalog eller konfigurera en ny klient.
• Registrera en ny app i administrationscentret för Microsoft Entra, som endast konfigurerats för konton i den här organisationskatalogen. Mer information finns i Registrera ett program . Registrera följande värden från programöversiktssidan för senare användning:
  • App-ID (klient-ID)
  • Katalog-ID (hyresgäst)
• Lägg till följande omdirigerings-URI:er med hjälp av konfigurationen för ensidesapplikationsplattformen. Mer information finns i Så här lägger du till en omdirigerings-URI i ditt program .
  • omdirigerings-URI: http://localhost:4200/.

• En extern hyresgäst. Om du vill skapa en väljer du mellan följande metoder:
  • (Rekommenderas) Använd Microsoft Entra Externt ID-tillägg för att konfigurera en extern tenant direkt i Visual Studio Code.
  • Skapa en ny extern klient i Microsoft Entras admincenter.
• Registrera en ny app i administrationscentret för Microsoft Entra, som endast konfigurerats för konton i den här organisationskatalogen. Mer information finns i Registrera ett program . Registrera följande värden från programöversiktssidan för senare användning:
  • App-ID (klient-ID)
  • Katalog-ID (hyresgäst)
• Lägg till följande omdirigerings-URI:er med hjälp av konfigurationen för ensidesapplikationsplattformen. Mer information finns i Så här lägger du till en omdirigerings-URI i ditt program .
  • omdirigerings-URI: http://localhost:4200/.
• Associera din app med ett användarflöde i administrationscentret för Microsoft Entra. Det här användarflödet kan användas i flera program. 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.

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

1. Öppna Visual Studio Code, välj Fil>Öppna mapp.... Navigera till och välj den plats där du vill skapa projektet.

2. Öppna en ny terminal genom att välja Terminal>New Terminal.

3. Kör följande kommandon för att skapa ett nytt Angular-projekt med namnet angularspalocal, installera Komponentbibliotek för Angular Material, MSAL Browser, MSAL Angular och generera hembaserade och skyddade komponenter.

   npm install -g @angular/cli@14.2.0
   ng new angularspalocal --routing=true --style=css --strict=false
   cd angularspalocal
   npm install @angular/material@13.0.0 @angular/cdk@13.0.0
   npm install @azure/msal-browser@2.37.0 @azure/msal-angular@2.5.7
   ng generate component home
   ng generate component guarded
   

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.

1. Skapa en ny fil med namnet auth-config.ts i mappen src/app/ och lägg till följande kodfragment. Den här filen innehåller autentiseringsparametrar. Dessa parametrar används för att initiera Angular- och MSAL Angular-konfigurationer.

   
   /**
    * This file contains authentication parameters. Contents of this file
    * is roughly the same across other MSAL.js libraries. These parameters
    * are used to initialize Angular and MSAL Angular configurations in
    * in app.module.ts file.
    */
   
   import {
     LogLevel,
     Configuration,
     BrowserCacheLocation,
   } from '@azure/msal-browser';
   
   /**
    * Configuration object to be passed to MSAL instance on creation.
    * For a full list of MSAL.js configuration parameters, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md
    */
   export const msalConfig: Configuration = {
     auth: {
       clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
       authority: 'https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/', // Replace the placeholder with your tenant subdomain
       redirectUri: '/', // Points to window.location.origin by default. You must register this URI on Azure portal/App Registration.
       postLogoutRedirectUri: '/', // Points to window.location.origin by default.
     },
     cache: {
       cacheLocation: BrowserCacheLocation.LocalStorage, // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
     },
     system: {
       loggerOptions: {
         loggerCallback(logLevel: LogLevel, message: string) {
           console.log(message);
         },
         logLevel: LogLevel.Verbose,
         piiLoggingEnabled: false,
       },
     },
   };
   
   /**
    * Scopes you add here will be prompted for user consent during sign-in.
    * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
    * For more information about OIDC scopes, visit:
    * https://free.blessedness.top/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
    */
   export const loginRequest = {
     scopes: [],
   };
   

2. Ersätt följande värden med värdena från administrationscentret för Microsoft Entra:

   • Leta reda på värdet Enter_the_Application_Id_Here och ersätt det med Application ID (clientId) för appen som du registrerade i administrationscentret för Microsoft Entra.
   • I auktoritet letar du upp Enter_the_Tenant_Subdomain_Here och ersätter det med underdomänen för din hyresgäst. Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har ditt klientnamn, lär dig att läsa klientinformationen.

3. Spara filen.

4. Öppna src/app/app.module.ts och lägg till följande kodfragment.

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
   
   import { MatToolbarModule } from "@angular/material/toolbar";
   import { MatButtonModule } from '@angular/material/button';
   import { MatCardModule } from '@angular/material/card';
   import { MatTableModule } from '@angular/material/table';
   import { MatMenuModule } from '@angular/material/menu';
   import { MatDialogModule } from '@angular/material/dialog';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { MatIconModule } from '@angular/material/icon';
   
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { HomeComponent } from './home/home.component';
   import { GuardedComponent } from './guarded/guarded.component';
   
   import {
       IPublicClientApplication,
       PublicClientApplication,
       InteractionType,
   } from '@azure/msal-browser';
   
   import {
       MSAL_INSTANCE,
       MsalGuardConfiguration,
       MSAL_GUARD_CONFIG,
       MsalService,
       MsalBroadcastService,
       MsalGuard,
       MsalRedirectComponent,
       MsalInterceptor,
       MsalModule,
   } from '@azure/msal-angular';
   
   import { msalConfig, loginRequest } from './auth-config';
   
   /**
    * Here we pass the configuration parameters to create an MSAL instance.
       * For more info, visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/configuration.md
       */
   export function MSALInstanceFactory(): IPublicClientApplication {
       return new PublicClientApplication(msalConfig);
   }
   
   /**
    * Set your default interaction type for MSALGuard here. If you have any
       * additional scopes you want the user to consent upon login, add them here as well.
       */
   export function MsalGuardConfigurationFactory(): MsalGuardConfiguration {
       return {
       interactionType: InteractionType.Redirect,
       authRequest: loginRequest
       };
   }
   
   @NgModule({
       declarations: [
       AppComponent,
       HomeComponent,
       GuardedComponent,
       ],
       imports: [
       BrowserModule,
       BrowserAnimationsModule,
       AppRoutingModule,
       MatToolbarModule,
       MatButtonModule,
       MatCardModule,
       MatTableModule,
       MatMenuModule,
       HttpClientModule,
       BrowserAnimationsModule,
       MatDialogModule,
       MatIconModule,
       MsalModule,
       ],
       providers: [
       {
           provide: HTTP_INTERCEPTORS,
           useClass: MsalInterceptor,
           multi: true,
       },
       {
           provide: MSAL_INSTANCE,
           useFactory: MSALInstanceFactory,
       },
       {
           provide: MSAL_GUARD_CONFIG,
           useFactory: MsalGuardConfigurationFactory,
       },
       MsalService,
       MsalBroadcastService,
       MsalGuard,
       ],
       bootstrap: [AppComponent, MsalRedirectComponent],
   })
   export class AppModule { }
   

   Den här koden initierar MSAL-instansen och anger standardinteraktionstypen för MSALGuard. Den tillhandahåller också nödvändiga tjänster och komponenter för autentisering.

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.

1. Öppna src/app/app.component.ts och ersätt koden med följande för att logga in en användare med hjälp av en POP-up. Den här koden använder MSAL Angular-biblioteket för att logga in en användare.

     import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
     import {
       MsalService,
       MsalBroadcastService,
       MSAL_GUARD_CONFIG,
       MsalGuardConfiguration,
     } from '@azure/msal-angular';
     import {
       AuthenticationResult,
       InteractionStatus,
       InteractionType,
       PopupRequest,
       RedirectRequest,
       EventMessage,
       EventType
     } from '@azure/msal-browser';
     import { Subject } from 'rxjs';
     import { filter, takeUntil } from 'rxjs/operators';
   
     @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css'],
     })
     export class AppComponent implements OnInit, OnDestroy {
       title = 'Microsoft identity platform';
       loginDisplay = false;
       isIframe = false;
   
       private readonly _destroying$ = new Subject<void>();
   
       constructor(
         @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
         private authService: MsalService,
         private msalBroadcastService: MsalBroadcastService,
       ) { }
   
       ngOnInit(): void {
         this.isIframe = window !== window.parent && !window.opener;
         this.setLoginDisplay();
         this.authService.instance.enableAccountStorageEvents(); // Optional - This will enable ACCOUNT_ADDED and ACCOUNT_REMOVED events emitted when a user logs in or out of another tab or window
   
         /**
          * You can subscribe to MSAL events as shown below. For more info,
          * visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/events.md
          */
         this.msalBroadcastService.inProgress$
           .pipe(
             filter(
               (status: InteractionStatus) => status === InteractionStatus.None
             ),
             takeUntil(this._destroying$)
           )
           .subscribe(() => {
             this.setLoginDisplay();
             this.checkAndSetActiveAccount();
           });
   
         this.msalBroadcastService.msalSubject$
           .pipe(
             filter(
               (msg: EventMessage) => msg.eventType === EventType.LOGOUT_SUCCESS
             ),
             takeUntil(this._destroying$)
           )
           .subscribe((result: EventMessage) => {
             this.setLoginDisplay();
             this.checkAndSetActiveAccount();
           });
   
         this.msalBroadcastService.msalSubject$
           .pipe(
             filter(
               (msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS
             ),
             takeUntil(this._destroying$)
           )
           .subscribe((result: EventMessage) => {
             const payload = result.payload as AuthenticationResult;
             this.authService.instance.setActiveAccount(payload.account);
           });
       }
   
       setLoginDisplay() {
         this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
       }
   
       checkAndSetActiveAccount() {
         /**
          * If no active account set but there are accounts signed in, sets first account to active account
          * To use active account set here, subscribe to inProgress$ first in your component
          * Note: Basic usage demonstrated. Your app may require more complicated account selection logic
          */
         let activeAccount = this.authService.instance.getActiveAccount();
   
         if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
           let accounts = this.authService.instance.getAllAccounts();
           // add your code for handling multiple accounts here
           this.authService.instance.setActiveAccount(accounts[0]);
         }
       }
   
       login() {
         if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
           if (this.msalGuardConfig.authRequest) {
             this.authService.loginPopup({
               ...this.msalGuardConfig.authRequest,
             } as PopupRequest)
               .subscribe((response: AuthenticationResult) => {
                 this.authService.instance.setActiveAccount(response.account);
               });
           } else {
             this.authService.loginPopup()
               .subscribe((response: AuthenticationResult) => {
                 this.authService.instance.setActiveAccount(response.account);
               });
           }
         } else {
           if (this.msalGuardConfig.authRequest) {
             this.authService.loginRedirect({
               ...this.msalGuardConfig.authRequest,
             } as RedirectRequest);
           } else {
             this.authService.loginRedirect();
           }
         }
       }
   
       logout() {
   
         if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
           this.authService.logoutPopup({
             account: this.authService.instance.getActiveAccount(),
           });
         } else {
           this.authService.logoutRedirect({
             account: this.authService.instance.getActiveAccount(),
           });
         }
       }
   
       // unsubscribe to events when component is destroyed
       ngOnDestroy(): void {
         this._destroying$.next(undefined);
         this._destroying$.complete();
       }
     }
   

   Den här koden lyssnar efter ändringar i inloggningsstatusen, visar inloggningstillståndet och tillhandahåller metoder för att logga in eller ut användare baserat på Microsoft Entra-konfiguration.