Angular 16使用MSAL实现Azure AD认证时点击登录报错

错误原因 #

MSAL.js v2及后续版本要求，在调用任何其他MSAL API（如loginPopup）之前，必须先调用并等待initialize()方法完成初始化。你的代码仅创建了PublicClientApplication实例，但未执行初始化操作，导致触发该错误。

解决方案 #

通过两步确保MSAL实例在应用启动时完成初始化：

1. 修改MSAL实例工厂与初始化逻辑
   创建异步初始化函数，配合Angular的APP_INITIALIZER，确保应用启动前完成MSAL初始化。

2. 调整模块配置
   在AppModule中配置APP_INITIALIZER，依赖MsalService执行初始化。

修改后的代码示例 #

工厂函数与初始化逻辑

import { APP_INITIALIZER } from '@angular/core';
import { IPublicClientApplication, PublicClientApplication } from '@azure/msal-browser';
import { MsalService } from '@azure/msal-angular';

// 创建MSAL实例
export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'd3126f21-d2da-4b33-93a1-d0ac5caa9785', // 替换为你的Azure AD客户端ID
      authority: 'https://login.microsoftonline.com/cbaf2168-de14-4c72-9d88-f5f05366dbef', // 替换为你的租户ID对应的authority
      redirectUri: 'http://localhost:4200' // 替换为你的重定向URI
    }
  });
}

// 异步初始化MSAL实例
export function MSALInitFactory(msalService: MsalService): () => Promise<void> {
  return () => msalService.instance.initialize();
}

AppModule配置

@NgModule({
  declarations: [
    // 你的组件声明
  ],
  imports: [
    MsalModule.forRoot(new PublicClientApplication({
      auth: {
        clientId: 'd3126f21-d2da-4b33-93a1-d0ac5caa9785',
        authority: 'https://login.microsoftonline.com/cbaf2168-de14-4c72-9d88-f5f05366dbef',
        redirectUri: 'http://localhost:4200'
      }
    }))
  ],
  providers: [
    {
      provide: IPublicClientApplication,
      useFactory: MSALInstanceFactory
    },
    {
      provide: APP_INITIALIZER,
      useFactory: MSALInitFactory,
      deps: [MsalService],
      multi: true
    },
    MsalService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

登录按钮代码（无需修改）

LoginSSO() {
  this._msalService.instance.loginPopup({ scopes: ["User.Read"] });
}

说明 #

使用APP_INITIALIZER可以确保MSAL在应用启动时完成初始化，避免点击登录按钮时因实例未初始化而报错。如果不使用APP_INITIALIZER，也可以在调用loginPopup前手动调用initialize()并等待完成，但这种方式不如全局初始化可靠。

内容的提问来源于stack exchange，提问作者Developer