如何让 MsalGuard 使用我的客户端 ID？

Question

我正在尝试设置我的 Angular 应用程序以使用 @azure/msal-angular。我已经像这样设置了 MsalModule：

import { NgModule } from "@angular/core";
import { MsalModule, MsalInterceptor } from "@azure/msal-angular";
import { HTTP_INTERCEPTORS } from "@angular/common/http";

console.log(`window populated: ${(window as any).APP_SETTINGS.aadAppClientId}`);
export const msalModuleForRoot = MsalModule.forRoot({
  clientID: (<any>window).APP_SETTINGS.aadAppClientId,
});

@NgModule({
  imports: [
    msalModuleForRoot,
  ],
  exports: [
    MsalModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
  ],
})
export class AppMsalModule { }

这个模块是在我的 app.module.browser.ts 中导入的。控制台日志成功打印出我的客户端 ID。

然后在我的 app.routing.ts 中，我在需要身份验证的路由上添加了 MsalGuard。

我所看到的：这些路由按预期重定向到登录屏幕，但是当您进行身份验证时，它要求授予 "myTrialApp" 权限，这不是我的应用程序的名称。

仔细查看调试器中的 MsalGuard，我发现它使用的客户端 ID 未定义。我试图了解我需要更改什么以确保登录页面使用正确的客户端 ID。

Answer 1

由于 AoT，这无法正常工作。一个很好的解决方法是能够注入 MsalConfig，但目前库中似乎不支持这种方法。现在我通过在编译时可用的 environment.ts 中定义我的 clientId 来解决这个问题。

如何让 MsalGuard 使用我的客户端 ID？

How do I get the MsalGuard to use my client ID?

msal

angular

msal.js