Bagikan melalui

Tutorial: Membuat aplikasi satu halaman Angular dan menyiapkannya untuk autentikasi

Berlaku untuk: Penyewa tenaga kerja (Lingkaran hijau dengan simbol tanda centang putih yang menunjukkan konten berikut berlaku untuk penyewa tenaga kerja.) Penyewa eksternal (Lingkaran hijau dengan simbol tanda centang putih yang menunjukkan konten berikut berlaku untuk penyewa eksternal.) (pelajari selengkapnya)

Tutorial ini adalah bagian pertama dari seri yang menunjukkan pembuatan aplikasi satu halaman (SPA) Angular, menambahkan autentikasi dan mengekstrak data pengguna menggunakan platform identitas Microsoft.

Di tutorial ini, Anda akan:

  • Membuat proyek Angular baru
  • Mengonfigurasi pengaturan untuk aplikasi
  • Menambahkan kode autentikasi ke aplikasi

Prasyarat

  • Penyewa dari kalangan tenaga kerja. Anda dapat menggunakan Direktori Default atau menyiapkan tenant baru.
  • Daftarkan aplikasi baru di pusat admin Microsoft Entra, dikonfigurasi hanya untuk Akun di direktori organisasi ini. Lihat Mendaftarkan aplikasi untuk detail selengkapnya. Rekam nilai berikut dari halaman Gambaran Umum aplikasi untuk digunakan nanti:
    • ID Aplikasi (klien)
    • ID Direktori (Penyewa)
  • Tambahkan URI pengalihan berikut menggunakan konfigurasi platform aplikasi satu halaman. Lihat Cara menambahkan URI pengalihan di aplikasi Anda untuk detail selengkapnya.
    • Alihkan URI: http://localhost:4200/.

Membuat proyek Angular baru

Di bagian ini, Anda akan membuat proyek Angular baru menggunakan Angular CLI di Visual Studio Code. Pilih tab yang sesuai berdasarkan jenis penyewa Anda.

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

Mengonfigurasi pengaturan aplikasi

Di bagian ini, Anda akan mengonfigurasi pengaturan aplikasi untuk autentikasi. Kita akan menggunakan nilai yang direkam selama pendaftaran aplikasi untuk mengonfigurasi aplikasi untuk autentikasi. Pilih tab yang sesuai berdasarkan jenis penyewa Anda.

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.

Menambahkan kode autentikasi ke aplikasi

Di bagian ini, Anda akan menambahkan kode autentikasi ke aplikasi untuk menangani autentikasi pengguna dan manajemen sesi. Pilih tab yang sesuai berdasarkan jenis penyewa Anda.

  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 berkas tersebut.

Langkah berikutnya

Tutorial: Menambahkan komponen fungsi masuk dan keluar di aplikasi Angular

  • Last updated on