Angular客户端获取OWIN保护的Azure AD认证Web API访问令牌方案咨询

你遇到的问题其实是因为Angular客户端还没正确配置针对目标Web API的权限请求。不同客户端ID的应用（你的Angular app和Postman）都能获取到Web API的访问令牌，核心是利用Azure AD的**委托权限（Delegated Permissions）**机制，让用户授权Angular客户端代表他们访问Web API。

下面是具体的配置和代码实现步骤：

1. 先给Web API的应用注册配置暴露的API范围 #

登录Azure门户，找到你的Web API对应的应用注册：

• 进入「暴露API」页面，先设置一个应用程序ID URI（比如api://{你的API客户端ID}，这个URI是令牌里aud（受众）字段的取值）
• 添加一个或多个范围（Scopes），比如命名为access_as_user，并设置权限的同意方式（可以选“管理员和用户同意”，根据你的业务需求调整）

2. 给Angular客户端的应用注册添加API权限 #

找到Angular应用的应用注册，进入「API权限」页面：

• 点击「添加权限」→ 选择「我的API」，找到你的Web API应用注册
• 勾选你刚才创建的委托权限（比如access_as_user），点击「添加权限」
• 如果是需要管理员同意的权限，记得点击「授予管理员同意」（针对租户内的所有用户生效）

3. 在Angular应用中用MSAL正确请求API令牌 #

你应该用MSAL.js（微软官方的JS身份验证库）来处理身份验证，关键是请求令牌时要指定Web API的范围，而不是只请求Angular自己的客户端权限。举个例子：

登录时请求令牌 #

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

// 在组件或服务中
constructor(private msalService: MsalService) {}

loginToGetApiToken() {
  const loginRequest = {
    scopes: ["api://{你的API客户端ID}/access_as_user"] // 这里要填你之前创建的范围
  };

  this.msalService.loginPopup(loginRequest)
    .subscribe(response => {
      // 拿到针对Web API的访问令牌
      const apiAccessToken = response.accessToken;
      // 调用API时在请求头带上：Authorization: Bearer ${apiAccessToken}
    });
}

静默获取令牌（避免重复登录） #

getApiTokenSilently() {
  const currentAccount = this.msalService.instance.getAllAccounts()[0];
  if (!currentAccount) return;

  const tokenRequest = {
    scopes: ["api://{你的API客户端ID}/access_as_user"],
    account: currentAccount
  };

  this.msalService.acquireTokenSilent(tokenRequest)
    .subscribe(response => {
      const apiAccessToken = response.accessToken;
      // 用这个令牌调用你的OWIN Web API
    });
}

4. 确保Web API的OWIN中间件正确验证令牌 #

你的Web API需要配置为验证Azure AD颁发的令牌，并且校验aud（受众）是否匹配Web API的客户端ID。比如用Microsoft.Identity.Web（推荐的现代方式）：

// Startup.cs 或 Program.cs
services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
  .AddMicrosoftIdentityWebApi(options =>
  {
    // 配置验证参数，确保受众是你的API客户端ID
    options.TokenValidationParameters.ValidAudience = "{你的API客户端ID}";
  }, options => {
    // 配置租户ID
    options.TenantId = "{你的Azure AD租户ID}";
  });

// 别忘了启用认证和授权
app.UseAuthentication();
app.UseAuthorization();

补充说明 #

你用Postman能成功，是因为Postman本质上也是一个独立的客户端——你通过授权码流程手动请求了针对Web API的令牌，和Angular应用的原理完全一致，只是Postman帮你简化了流程步骤。

只要按上面的步骤配置，你的Angular客户端不需要重定向到Web API，就能直接获取到访问令牌并发起请求。

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