升级Angular v16与msal-angular 3.0.0-beta.0后Azure AD B2C认证失败

核心原因 #

MSAL v3及以上版本（包括你使用的beta版）启用native brokering时，强制要求必须先调用并等待initialize()方法执行完成，才能调用任何其他MSAL API，这个规则适用于所有交互方式（包括Popup和Redirect）。

解决方案 #

方案1：确保初始化完成后再调用登录方法 #

在Angular应用的初始化逻辑中，先等待MSAL完成初始化，再触发登录操作：

1. 在根组件（如AppComponent）的ngOnInit方法中调用并等待msalService.initialize()：

import { MsalService } from '@azure/msal-angular';

constructor(private msalService: MsalService) {}

async ngOnInit(): Promise<void> {
  // 等待MSAL初始化完成
  await this.msalService.initialize();
  
  // 可选：初始化完成后检查是否已有登录账户
  const accounts = this.msalService.instance.getAllAccounts();
  if (accounts.length > 0) {
    // 处理已登录状态
  }
}

2. 确保登录按钮只有在初始化完成后才可用，比如通过一个布尔变量控制按钮状态：

<button *ngIf="msalInitialized" (click)="onLoginClick()">登录</button>

在组件中维护msalInitialized变量：

msalInitialized = false;

async ngOnInit(): Promise<void> {
  await this.msalService.initialize();
  this.msalInitialized = true;
}

方案2：禁用Native Brokering（如果不需要该功能） #

如果你的应用不需要使用Native Broker功能，可以直接在MSAL配置中关闭它，这样就无需调用initialize()方法：

export const msalConfig = {
  auth: {
    clientId: '你的B2C客户端ID',
    authority: '你的B2C授权地址',
    redirectUri: '应用重定向地址'
  },
  // 禁用Native Brokering
  nativeBrokerEnabled: false
};

方案3：调整路由守卫与Interceptor顺序 #

如果应用中使用了MSAL路由守卫或Interceptor，需要确保它们在MSAL初始化完成后再生效：

• 自定义路由守卫，在canActivate方法中先检查MSAL是否已初始化，未初始化则先执行初始化。
• 确保Interceptor的逻辑中，若MSAL未初始化则跳过令牌获取逻辑，避免提前触发MSAL API调用。

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