咨询@microsoft/mgt及mgt-msal2-provider与Angular16的兼容方案

问题根源 #

@microsoft/mgt-msal2-provider v3.x目前仅兼容@azure/msal-browser v2.x，强制通过overrides升级到v3后，由于MSAL v3的API结构（比如PublicClientApplication的方法、参数）发生了变化，MGT内部调用旧API失败，导致组件无法正常初始化，因此全部不显示。

可行解决方案 #

1. 自定义MSAL v3适配层（推荐）

通过封装一个适配类，模拟MSAL v2的核心API，让MGT的Msal2Provider能识别MSAL v3的实例：

首先创建适配类：

import { PublicClientApplication } from '@azure/msal-browser';
import { AccountInfo, AuthenticationResult, SilentRequest } from '@azure/msal-common';

export class MsalV3Adapter {
  constructor(private pca: PublicClientApplication) {}

  // 适配v2的getAccount方法
  getAccount(accountId?: string): AccountInfo | null {
    const accounts = this.pca.getAllAccounts();
    if (!accountId) {
      return accounts[0] || null;
    }
    return accounts.find(acc => acc.homeAccountId === accountId) || null;
  }

  // 适配v2的acquireTokenSilent方法
  async acquireTokenSilent(request: SilentRequest): Promise<AuthenticationResult> {
    return this.pca.acquireTokenSilent({
      ...request,
      account: this.getAccount(request.account?.homeAccountId)
    });
  }

  // 按需添加MGT可能调用的其他方法
  async loginPopup(request?: any) {
    return this.pca.loginPopup(request);
  }

  logout(request?: any) {
    this.pca.logout(request);
  }
}

然后在组件中使用适配类包装MSAL实例：

constructor(
  @Inject(MSAL_INSTANCE) public publicClientApplication: PublicClientApplication
) {
  const adaptedPca = new MsalV3Adapter(publicClientApplication);
  
  Providers.globalProvider = new Msal2Provider({
    publicClientApplication: adaptedPca as any
  });
}

如果浏览器控制台仍有API报错，根据提示补充适配类中对应的方法即可。

2. 临时降级MSAL版本

如果项目不依赖Angular 16的特定新特性，可以暂时回退MSAL版本，保持与MGT依赖一致：

"dependencies": {
  "@microsoft/mgt": "^3.1.1",
  "@microsoft/mgt-msal2-provider": "^3.1.1",
  "@azure/msal-angular": "^2.5.0",
  "@azure/msal-browser": "^2.37.0"
}

移除overrides配置，重新安装依赖后，MGT组件即可正常显示，待MGT官方发布适配MSAL v3的版本后再升级。

3. 等待官方适配版本

MGT团队已在开发适配MSAL v3的版本，待正式版本发布后直接升级@microsoft/mgt-msal2-provider即可。

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