初始化 MSAL Angular

在使用 @azure/msal-angular 之前，在 Microsoft Entra ID 中注册应用程序以获取 clientId。

在应用模块中包含和初始化 MSAL 模块

导入 MsalModule 到app.module.ts。 若要初始化 MSAL 模块，请传入你的应用程序的 clientId，你可以从应用注册中获取该 ID。

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

保护应用程序中的路由

通过添加到 canActivate: [MsalGuard] 路由定义添加身份验证来保护应用程序中的特定路由。 将其添加到父路由或子路由。 当用户访问这些路由时，库会提示用户进行身份验证。

在我们的文档中详细了解MsalGuard配置和注意事项，包括使用其他接口。

下面是使用 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 { }

获取 Web API 调用的令牌

@azure/msal-angular 允许你在 app.module.ts 中按如下方式添加 HTTP 拦截器（MsalInterceptor）。 MsalInterceptor 将根据 protectedResourceMap 获取令牌，并在 API 调用中将其添加到你的所有 HTTP 请求中。 有关配置和使用的详细信息，请参阅 我们的 MsalInterceptor 文档 。

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

可以选择使用MsalInterceptor。 你可能会希望转而使用 acquireToken API 来显式获取令牌。

请注意，为方便起见提供， MsalInterceptor 可能不适合所有用例。 如果你有 MsalInterceptor 无法满足的特定需求，可以编写自己的拦截器。

订阅事件通知

MSAL 提供一个事件系统，用于发出与身份验证和 MSAL 相关的事件。 若要使用事件，请将 MsalBroadcastService 添加到组件或服务的构造函数中。

1.如何订阅事件

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. 可用事件

在事件文档中查找 MSAL @azure/msal-browser 可用的事件列表。

3. 取消订阅

取消订阅非常重要。 在组件中实现 ngOnDestroy() 以取消订阅。

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

后续步骤

你已准备好使用 @azure/msal-angular公共 API。

  • Last updated on