Tutorial: Membuat aplikasi Angular dan menyiapkannya untuk autentikasi

Untuk membangun proyek Angular dari awal, ikuti langkah-langkah berikut:

1. Buka jendela terminal dan jalankan perintah berikut untuk membuat proyek Angular baru:

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

   Perintah ini membuat proyek Angular baru bernama msal-angular-tutorial dengan perutean diaktifkan, CSS untuk penataan, dan mode ketat dinonaktifkan.

2. Ubah ke direktori proyek:

   cd msal-angular-tutorial
   

3. Instal dependensi aplikasi:

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

   Perintah npm install @azure/msal-browser @azure/msal-angular bootstrap menginstal browser Azure MSAL, Azure MSAL Angular, dan paket Bootstrap.

4. Buka angular.json dan tambahkan jalur CSS Bootstrap ke styles array:

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

   Kode menambahkan Bootstrap CSS ke array gaya dalam angular.json file.

5. Buat komponen Rumah dan Profil:

   ng generate component home
   ng generate component profile
   

   Perintah menghasilkan komponen Beranda dan Profil dalam proyek Angular.

6. Hapus file dan kode yang tidak perlu dari proyek:

   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
   

   Perintah menghapus file dan kode yang tidak perlu dari proyek.

7. Ganti nama app.routes.ts menjadi app-routing.module.ts menggunakan Visual Studio Code dan perbarui semua referensi app.routes.ts di seluruh aplikasi.

8. Ganti nama app.config.ts menjadi app.module.ts menggunakan Visual Studio Code dan perbarui semua referensi ke app.config.ts seluruh aplikasi.

Setelah Anda menyelesaikan langkah-langkah ini, struktur proyek akan terlihat seperti:

.
├── 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. Buka Visual Studio Code, pilih File >Buka Folder.... Navigasi ke dan pilih lokasi tempat Anda ingin membuat proyek.

2. Buka terminal baru dengan memilih Terminal >Terminal Baru.

3. Jalankan perintah berikut untuk membuat proyek Angular baru bernama angularspalocal, menginstal pustaka komponen Angular Material, MSAL Browser, MSAL Angular, dan menghasilkan komponen beranda serta komponen terlindungi.

   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
   

Kita akan menggunakan nilai yang direkam selama pendaftaran aplikasi untuk mengonfigurasi aplikasi untuk autentikasi. Ikuti langkah-langkah ini:

1. Buka file src/app/app.module.ts dan ganti konten dengan kode berikut:

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

   Kode menyiapkan MSAL untuk autentikasi pengguna dan perlindungan API. Ini mengonfigurasi aplikasi dengan MsalInterceptor untuk mengamankan permintaan API dan MsalGuard untuk melindungi rute, sambil menentukan komponen dan layanan utama untuk autentikasi. Ganti nilai berikut dengan nilai dari pusat admin Microsoft Entra.

   • Ganti Enter_the_Application_Id_Here dengan Application (client) ID dari pendaftaran aplikasi.
   • Ganti Enter_the_Tenant_Info_Here dengan Directory (tenant) ID dari pendaftaran aplikasi.

2. Simpan berkas tersebut.

1. Buat file baru yang disebut auth-config.ts di folder src/app/ dan tambahkan cuplikan kode berikut. File ini berisi parameter autentikasi. Parameter ini digunakan untuk menginisialisasi konfigurasi Angular dan MSAL Angular.

   
   /**
    * 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://learn.microsoft.com/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
    */
   export const loginRequest = {
     scopes: [],
   };
   

2. Ganti nilai berikut dengan nilai dari pusat admin Microsoft Entra:

   • Temukan nilai Enter_the_Application_Id_Here dan ganti dengan ID Aplikasi (clientId) dari aplikasi yang Anda daftarkan di pusat admin Microsoft Entra.
   • Di otoritas, temukan Enter_the_Tenant_Subdomain_Here dan ganti dengan subdomain penyewa Anda. Misalnya, jika domain utama penyewa Anda contoso.onmicrosoft.com, gunakan contoso. Jika Anda tidak memiliki nama penyewa Anda, pelajari cara membaca detail penyewa Anda.

3. Simpan file.

4. Buka src/app/app.module.ts dan tambahkan cuplikan kode berikut.

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

   Kode ini menginisialisasi instans MSAL dan mengatur jenis interaksi default untuk MSALGuard. Ini juga menyediakan layanan dan komponen yang diperlukan untuk autentikasi.

1. Buka src/app/app.component.ts file dan ganti konten dengan kode berikut:

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

   Kode ini mengintegrasikan MSAL dengan Angular untuk mengelola autentikasi pengguna. Ini mendengarkan perubahan status masuk, menampilkan status masuk, menangani peristiwa akuisisi token, dan menyediakan metode untuk masuk atau keluar pengguna berdasarkan konfigurasi Microsoft Entra.

2. Simpan file.

1. Buka src/app/app.component.ts dan ganti kode dengan yang berikut ini untuk memasukkan pengguna menggunakan titik kehadiran (POP)-up. Kode ini menggunakan pustaka MSAL Angular untuk memasukkan pengguna.

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

   Kode ini mendengarkan perubahan status masuk, menampilkan status masuk, dan menyediakan metode untuk masuk atau keluar pengguna berdasarkan konfigurasi Microsoft Entra.