Angular应用对接Azure AD保护的Web API：Token验证方法、Azure Portal配置及应用注册连接方案咨询

嘿，我明白你现在的困境——已经搞定了Angular和Microsoft Graph的认证，也给后端API加上了Azure AD保护，但卡在了两个应用注册的衔接上对吧？别着急，我来一步步帮你理清楚关键配置和代码调整的要点：

一、Azure Portal中两个应用注册的核心衔接配置 #

这是让前端能合法获取API访问令牌的基础，必须配置到位：

• API应用注册（后端）的关键设置：
  1. 进入API应用注册的「公开API」页面，先设置应用程序ID URI（比如api://your-api-client-id，这个值会作为token的受众aud，API验证时会用到）
  2. 创建一个自定义范围（Scope），比如命名为access_as_user，设置用户和管理员都能同意这个权限，描述清楚权限用途（比如“允许用户访问后端API”）
  3. 在「授权客户端应用」区域，点击「添加客户端应用」，输入你的Angular应用的客户端ID，勾选刚才创建的access_as_user范围，保存后Angular应用就被允许请求这个API的令牌了
• Angular应用注册（前端）的关键设置：
  1. 进入Angular应用注册的「API权限」页面，点击「添加权限」→「我的API」，选择你创建的API应用注册，添加委托权限（就是你创建的access_as_user）
  2. 别忘了点击「授予管理员同意」（如果是企业租户内的应用，这一步能让所有用户不用手动同意权限）
  3. 到「身份验证」页面，确认已经添加了Angular应用的重定向URI（单页应用类型，比如http://localhost:4200），并且启用了「ID令牌」和「访问令牌」（因为我们需要访问令牌来调用API）

二、Angular应用中的代码调整 #

确保你用的是微软官方的@azure/msal-angular库，然后做以下配置：

1. 在app.module.ts的MsalModule配置里，把API的资源和对应的scope添加到protectedResourceMap：

import { MsalModule, MsalService, MSAL_INSTANCE } from '@azure/msal-angular';
import { PublicClientApplication } from '@azure/msal-browser';

export function MSALInstanceFactory(): PublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'your-angular-client-id',
      authority: 'https://login.microsoftonline.com/your-tenant-id',
      redirectUri: 'http://localhost:4200'
    }
  });
}

@NgModule({
  imports: [
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: 'your-angular-client-id',
          authority: 'https://login.microsoftonline.com/your-tenant-id',
          redirectUri: 'http://localhost:4200'
        }
      }),
      {
        protectedResourceMap: new Map([
          ['https://your-api-base-url', ['api://your-api-client-id/access_as_user']]
        ])
      }
    )
  ],
  providers: [
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    MsalService
  ]
})
export class AppModule { }

2. 调用API时，获取针对该API的访问令牌并添加到请求头：

import { MsalService } from '@azure/msal-angular';
import { HttpClient, HttpHeaders } from '@angular/common/http';

constructor(private msalService: MsalService, private http: HttpClient) {}

async fetchDataFromApi() {
  const tokenRequest = {
    scopes: ['api://your-api-client-id/access_as_user']
  };

  try {
    const response = await this.msalService.acquireTokenSilent(tokenRequest);
    const headers = new HttpHeaders().set('Authorization', `Bearer ${response.accessToken}`);
    return this.http.get('https://your-api-base-url/api/data', { headers });
  } catch (error) {
    // 如果静默获取失败，触发交互式登录
    this.msalService.acquireTokenPopup(tokenRequest).then(popupResponse => {
      const headers = new HttpHeaders().set('Authorization', `Bearer ${popupResponse.accessToken}`);
      return this.http.get('https://your-api-base-url/api/data', { headers });
    });
  }
}

三、常见问题排查（对应你遇到的错误） #

如果还是遇到报错，先检查这几个点：

• Scope格式错误：确保请求的scope是api://{api-client-id}/{scope-name}，不能只写scope名称，必须带API的应用ID URI前缀
• 权限未授权：检查Angular应用的API权限里，是否已经添加了正确的委托权限，并且完成了「授予管理员同意」
• Token受众不匹配：API验证token时，要确保aud（受众）是API的应用程序ID URI，而不是前端的客户端ID
• 重定向URI不匹配：Angular应用注册里的重定向URI必须和代码里的redirectUri完全一致，包括http/https、端口号

备注：内容来源于stack exchange，提问作者Ravikumar Gunge