如何让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，但是今天在库中似乎不支持。现在我通过在环境中定义我的clientId来解决这个问题。在编译时可以使用它。