Блог

Я пытаюсь настроить свое приложение 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 { }
  

Этот модуль импортирован в мое приложение.module.browser.ts. Журнал консоли успешно распечатывает мой идентификатор клиента.

Затем в моем app.routing.ts я добавил MsalGuard на маршруты, требующие авторизации.

Что я вижу: эти маршруты перенаправляются на экран входа в систему, как и ожидалось, но при аутентификации запрашивается разрешение на «myTrialApp», которое не является именем моего приложения.

При более внимательном рассмотрении MsalGuard в отладчике я вижу, что используемый им идентификатор клиента не определен. Я пытаюсь понять, что мне нужно изменить, чтобы убедиться, что на странице входа используется правильный идентификатор клиента.

Это не работает из-за AoT. Хорошим обходным путем была бы возможность внедрить MsalConfig, но, похоже, сегодня это не поддерживается в библиотеке. На данный момент я обошел это, определив свой ClientID в environment.ts, который доступен во время компиляции.