Angular中如何为MSAL实例的acquireTokenSilent方法添加resource参数

MSAL v2 及以上版本对接Azure AD v2.0身份端点时，已经移除了旧版API中的resource请求参数，目标Web API的标识不需要单独传参，直接通过scopes字段配置即可。
你只需要按照Azure AD的scope格式，把Web API的客户端ID拼接到scope值里，放到scopes数组中就能拿到对应资源的访问令牌，具体配置如下：

正确代码示例 #

// 替换成你自己Web API在Azure AD中注册得到的客户端ID
const webApiClientId = "你的Web API客户端ID字符串";
const tokenRequest = {
  // 固定格式：api://<Web API客户端ID>/.default 表示申请该Web API的所有已授权静态权限
  scopes: [`api://${webApiClientId}/.default`],
};

const tokenResponse = await this.msalService.instance.acquireTokenSilent(tokenRequest);
// 拿到的访问令牌存在tokenResponse.accessToken字段中
const accessToken = tokenResponse.accessToken;

配置说明 #

• 如果你的Web API在Azure AD应用注册中配置了自定义的应用程序ID URI，直接把scope前缀的api://<客户端ID>替换成你自定义的ID URI即可，比如你配置的ID URI是https://contoso.com/api，那scope值就写https://contoso.com/api/.default
• 如果你给Web API配置了细粒度的委托权限，不需要申请全量权限，可以把.default替换成你定义的具体权限名，比如api://<客户端ID>/Todo.Read
• 不要手动在tokenRequest对象中添加resource字段，MSAL v2发起令牌请求时会自动忽略该字段，不会被身份端点识别
• 调用前需要确保Angular前端应用在Azure AD中已经被授予对应Web API的相关权限，同时用户账号对该API有访问权限，否则acquireTokenSilent会抛出权限相关错误

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