如何使用ADAL与Angular 5访问受保护的Azure Web API

我之前在项目里也碰到过几乎一模一样的情况——AngularJS用adal.js能正常认证并调用API，但Angular 5换了adal-angular5后，明明登录成功了，API请求就是打不通。咱们一步步来排查：

1. 先核对Resource配置是否正确 #

这是最常见的坑！adal-angular5里的resource参数必须和你Web API在Azure AD应用注册里的应用ID URI完全一致，而不是API的客户端ID。

比如你的API应用ID URI是api://xxxx-xxxx-xxxx-xxxx，那在Angular 5的adal配置里必须写：

export const adalConfig = {
  tenant: 'your-tenant-id',
  clientId: 'angular5-app-client-id',
  resource: 'api://xxxx-xxxx-xxxx-xxxx', // 这里必须是API的应用ID URI
  redirectUri: window.location.origin + '/',
  postLogoutRedirectUri: window.location.origin + '/'
};

对比一下你AngularJS项目里adal.js的resource配置，确保两者完全相同。

2. 检查HTTP拦截器是否正确配置 #

adal-angular5依赖拦截器自动给API请求添加Authorization头，如果拦截器没配置好，就算有令牌也不会带上。

确认你在AppModule里注册了AdalInterceptor：

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AdalService, AdalInterceptor } from 'adal-angular5';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    AdalService,
    { provide: HTTP_INTERCEPTORS, useClass: AdalInterceptor, multi: true }
  ]
})
export class AppModule { }

另外，确保你调用API用的是HttpClient而不是旧的Http服务，adal-angular5只支持HttpClient。

3. 验证Azure AD里的权限配置 #

登录Azure Portal，检查Angular 5客户端应用是否被授予了Web API的权限：

• 找到Angular5应用的注册 → API权限 → 添加权限 → 选择你的Web API
• 确保勾选了对应的权限（比如你API里设置的access_as_user之类的权限）
• 如果是租户级别的权限，记得点击“授予管理员同意”按钮（这个很容易忘！）

对比AngularJS客户端应用的权限配置，确保两者完全一致。

4. 解码令牌排查问题 #

用adalService.userInfo.token获取Angular5应用拿到的令牌，然后去jwt.ms解码，重点看这几个字段：

• aud：必须等于API的应用ID URI，如果是客户端ID就错了，说明resource配置不对
• scp：应该包含你给API设置的权限名称，如果为空，说明权限没配置或者没同意
• iss：必须是你的Azure AD租户颁发的（比如https://login.microsoftonline.com/your-tenant-id/v2.0或者v1版本的地址）

再对比AngularJS应用拿到的令牌，看看哪里不一样。

5. 检查版本兼容性 #

adal-angular5不同版本对Angular的支持不一样，Angular 5对应的合适版本大概是1.0.17左右。如果你的版本太新或太旧，可能会有兼容性问题，试试锁定这个版本：

npm install adal-angular5@1.0.17 --save

6. 排查CORS设置 #

虽然认证过，但API的CORS配置如果没允许Angular5应用的域名，也会导致请求失败。去Azure Portal里你的Web API应用 → CORS设置：

• 添加Angular5应用的完整URL（比如http://localhost:4200）
• 确保允许OPTIONS方法（浏览器预检请求需要）
• 允许的头里包含Authorization

按照上面的步骤一步步排查，应该能解决问题。

内容的提问来源于stack exchange，提问作者al-mesa