Angular11升级@azure/msal-angular V2出现AADSTS7000218鉴权报错

AADSTS7000218 报错的核心原因是：Azure AD 将你的应用识别为机密客户端，要求令牌请求携带客户端密钥或断言，而你当前的前端 SPA 应用作为公共客户端，无法也不应存储这类敏感信息。
该问题通常是新旧版本 MSAL 的流切换、配置不匹配导致的：

• 旧版 @azure/msal-angular v1 默认使用隐式授权流，只要在 Azure 门户 Web 平台配置中开启隐式流开关，无需客户端密钥即可获取令牌
• 新版 @azure/msal-angular v2 默认使用授权码流 + PKCE，如果 Azure 门户的应用注册仍沿用旧的 Web 平台配置，AAD 会将该流识别为后端机密客户端的令牌请求，强制要求携带客户端密钥

1. 优先调整 Azure 门户应用注册配置（最常见根因） #

• 进入 Azure AD 应用注册页面，定位到你的客户端应用（对应 clientId: b4f868f3-xxxx-xxxx-xxxx-4d44f053ff29）
• 进入「身份验证」配置页：
  • 删除原有 Web 平台下配置的所有重定向 URI
  • 点击「添加平台」，选择*单页应用（SPA）*类型
  • 填入你的前端实际重定向地址（即 environment.redirectUrl，如 http://localhost:4300/），保存配置
• 下拉到页面底部的「高级设置」，将「允许公共客户端流」开关设置为「是」
  该配置调整后，AAD 会将应用标记为公共客户端，授权码流的令牌交换步骤无需客户端密钥，完全匹配前端 SPA 的使用场景。

2. 修正应用内 MSAL 配置错误 #

2.1 修正 MsalInterceptor 受保护资源映射 #

当前你配置的受保护资源键为自身客户端 ID，完全不符合 MSAL Interceptor 的匹配规则：

• MSAL Interceptor 的 protectedResourceMap 键需要填写你要调用的后端 API 的 URL 前缀，而非自身客户端 ID
• 修正示例：如果你的后端 API 基地址为 http://localhost:4300/api，对应配置改为：

protectedResourceMap.set(`http://localhost:4300/api/`, [`${environment.scopeUrl}`]);

如果需要拦截所有路由，可以使用通配符 /**，但不推荐生产环境使用。

2.2 补充活跃账号初始化逻辑 #

你定义的 checkAndSetActiveAccount() 方法未在 ngOnInit 的订阅逻辑中调用，会导致静默获取令牌时找不到默认活跃账号，补充逻辑如下：

ngOnInit() {
  this.msalBroadcastService.inProgress$
    .pipe(
      filter((status: InteractionStatus) => status === InteractionStatus.None),
      takeUntil(this._destroying$)
    )
    .subscribe(() => {
      this.checkAndSetActiveAccount(); // 补充该调用
      this.checkAccount();
    }); 
}

3. 校验 Scope 配置有效性 #

• 确认你配置的 scopeUrl（api://xxxxxxx-xxxx-xxxx-a247-6023a95xxxxx/api）已在 Azure 门户的「API 暴露」页面中注册为自定义委托权限
• 确认在「API 权限」页面，已为该自定义权限勾选并完成管理员授予同意，避免后续权限校验报错

• 你当前使用的 @azure/msal-angular 为 2.0.0-beta.3 测试版本，生产环境建议升级到正式发布的 v2 稳定版本，避免未修复的已知 bug 导致的兼容问题
• 不要在前端代码中存储任何客户端密钥、证书等敏感信息，即使是开发环境也禁止，避免安全风险

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