Menginisialisasi MSAL Angular

Sebelum menggunakan @azure/msal-angular, daftarkan aplikasi di Microsoft Entra ID untuk mendapatkan clientId.

Menyertakan dan menginisialisasi modul MSAL dalam modul aplikasi Anda

Impor MsalModule ke app.module.ts. Untuk menginisialisasi modul MSAL, teruskan clientId aplikasi Anda, yang Anda dapatkan dari pendaftaran aplikasi.

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { MsalModule, MsalService, MsalGuard, MsalInterceptor, MsalBroadcastService, MsalRedirectComponent } from "@azure/msal-angular";
import { PublicClientApplication, InteractionType, BrowserCacheLocation } from "@azure/msal-browser";

@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({ // MSAL Configuration
            auth: {
                clientId: "Your client ID",
                authority: "Your authority",
                redirectUri: "Your redirect Uri",
            },
            cache: {
                cacheLocation : BrowserCacheLocation.LocalStorage,
            },
            system: {
                loggerOptions: {
                    loggerCallback: () => {},
                    piiLoggingEnabled: false
                }
            }
        }), {
            interactionType: InteractionType.Redirect, // MSAL Guard Configuration
        }, {
            interactionType: InteractionType.Redirect, // MSAL Interceptor Configuration
        })
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true
        },
        MsalService,
        MsalGuard,
        MsalBroadcastService
    ],
    bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule {}

Mengamankan rute di aplikasi Anda

Tambahkan autentikasi untuk mengamankan rute tertentu di aplikasi Anda dengan menambahkan canActivate: [MsalGuard] ke definisi rute Anda. Tambahkan ke rute induk atau anak. Saat pengguna mengunjungi rute ini, pustaka meminta pengguna untuk mengautentikasi.

Pelajari lebih lanjut di dokumen kamiMsalGuard tentang konfigurasi dan pertimbangan, termasuk menggunakan antarmuka tambahan.

Berikut adalah contoh rute yang ditentukan dengan MsalGuard:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { MsalGuard } from '@azure/msal-angular';

const routes: Routes = [
    {
        path: 'profile',
        component: ProfileComponent,
        canActivate: [MsalGuard]
    },
    {
        path: '',
        component: HomeComponent
    },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Mendapatkan token untuk panggilan API web

@azure/msal-angular memungkinkan Anda menambahkan interceptor HTTP (MsalInterceptor) dalam app.module.ts Anda sebagai berikut. MsalInterceptor akan mendapatkan token dan menambahkan token tersebut ke semua permintaan HTTP Anda dalam panggilan API berdasarkan protectedResourceMap. Lihat dokumen MsalInterceptor kami untuk detail selengkapnya tentang konfigurasi dan penggunaan.

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { MsalModule, MsalService, MsalGuard, MsalInterceptor, MsalBroadcastService, MsalRedirectComponent } from "@azure/msal-angular";
import { PublicClientApplication, InteractionType, BrowserCacheLocation } from "@azure/msal-browser";

@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({ // MSAL Configuration
            auth: {
                clientId: "Your client ID",
                authority: "Your authority",
                redirectUri: "Your redirect Uri",
            },
            cache: {
                cacheLocation : BrowserCacheLocation.LocalStorage,
            },
            system: {
                loggerOptions: {
                    loggerCallback: () => {},
                    piiLoggingEnabled: false
                }
            }
        }), {
            interactionType: InteractionType.Redirect, // MSAL Guard Configuration
        }, {
            interactionType: InteractionType.Redirect, // MSAL Interceptor Configuration
            protectedResourceMap: new Map([
                ['https://graph.microsoft.com/v1.0/me', ['user.read']],
                ['https://api.myapplication.com/users/*', ['customscope.read']],
                ['http://localhost:4200/about/', null] 
            ])
        })
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true
        },
        MsalService,
        MsalGuard,
        MsalBroadcastService
    ],
    bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule {}

Menggunakan MsalInterceptor bersifat opsional. Anda mungkin ingin secara eksplisit mendapatkan token menggunakan API acquireToken sebagai gantinya.

Perhatikan bahwa MsalInterceptor disediakan untuk kenyamanan Anda dan mungkin tidak sesuai dengan semua kasus penggunaan. Tulis interceptor Anda sendiri jika Anda memiliki kebutuhan khusus yang tidak dicakup oleh MsalInterceptor.

Berlangganan Peristiwa

MSAL menyediakan sistem peristiwa yang memancarkan peristiwa yang terkait dengan autentikasi dan MSAL. Untuk menggunakan event, tambahkan MsalBroadcastService ke konstruktor komponen atau layanan Anda.

1. Cara berlangganan peristiwa

import { EventMessage, EventType } from '@azure/msal-browser';
import { filter } from 'rxjs/operators';

this.msalBroadcastService.msalSubject$
    .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS)
    )
    .subscribe((result) => {
        // do something here
    });

2. Event yang tersedia

Temukan daftar peristiwa yang tersedia untuk MSAL dalam @azure/msal-browser dokumentasi peristiwa.

3. Berhenti berlangganan

Berhenti berlangganan penting. Terapkan ngOnDestroy() dalam komponen Anda untuk berhenti berlangganan.

import { EventMessage, EventType } from '@azure/msal-browser';
import { filter, Subject, takeUntil } from 'rxjs';

private readonly _destroying$ = new Subject<void>();

this.msalBroadcastService.msalSubject$
    .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
        takeUntil(this._destroying$)
    )
    .subscribe((result) => {
        this.checkAccount();
    });

ngOnDestroy(): void {
    this._destroying$.next(null);
    this._destroying$.complete();
}

Langkah berikutnya

Anda siap menggunakan @azure/msal-angularAPI publik.