Azure AD保护的Angular 5应用调用Azure托管Web API的技术咨询

我来帮你梳理下具体的实现步骤，核心就是获取针对目标Web API的访问令牌，并在请求中正确携带它，以下是详细操作：

一、先确认Azure AD配置的细节 #

你已经完成了客户端注册和委托权限配置，这里再补两个关键检查点：

• 确保Angular应用的Azure AD注册里，重定向URI完全匹配你的应用部署地址（比如生产环境的https://your-angular-app.azurewebsites.net，或者本地开发的http://localhost:4200）
• 登录Azure Portal找到你的Web API注册，在已授权的客户端应用里添加Angular应用的客户端ID，确保它被允许调用这个API

二、在Angular 5中获取API专属访问令牌 #

你现在通过.auth/me拿到的是网站本身的ID令牌，而调用Web API需要的是针对该API的访问令牌。如果用的是Angular 5常用的adal-angular库，可以这么做：

1. 初始化ADAL时，指定resource参数为你的Web API的应用ID URI（在Web API的Azure AD注册→公开API里可以找到）
2. 调用acquireToken方法获取令牌，示例代码：

import { AdalService } from 'adal-angular';

constructor(private adalService: AdalService) {}

private getApiAccessToken(): void {
  const apiResourceUri = 'https://your-api.azurewebsites.net/api'; // 替换为你的API应用ID URI
  this.adalService.acquireToken(apiResourceUri)
    .subscribe(
      token => this.callProtectedWebApi(token),
      error => console.error('获取API令牌失败:', error)
    );
}

三、在API请求中携带令牌 #

拿到访问令牌后，每次调用Web API都要在请求头里添加Authorization字段，格式为Bearer <令牌内容>。用Angular的HttpClient示例：

import { HttpClient, HttpHeaders } from '@angular/common/http';

constructor(private http: HttpClient) {}

private callProtectedWebApi(token: string): void {
  const requestHeaders = new HttpHeaders({
    'Authorization': `Bearer ${token}`
  });

  this.http.get('https://your-api.azurewebsites.net/api/values', { headers: requestHeaders })
    .subscribe(
      response => console.log('API响应:', response),
      error => console.error('调用API失败:', error)
    );
}

四、处理令牌的自动刷新 #

adal-angular库会自动处理令牌过期的问题，你只需要确保在应用初始化时调用adalService.handleWindowCallback()，用来处理Azure AD的回调请求，保证令牌能自动刷新更新。

五、验证Web API的令牌配置 #

你的Web API已经启用Azure AD防护，还要确认：

• Web API的配置中，Audience设置为自身的应用ID URI，这样只有针对该API的令牌才会被认可
• 如果需要细粒度权限，要在Web API的Azure AD注册→公开API里暴露对应的范围，并且Angular应用已经申请了这些委托权限

这样操作下来，你的Angular 5应用就能顺利调用受Azure AD保护的独立Web API了。

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