Angular独立组件通过MSAL实现AAD认证.NET Web API的问题

1. 导入必要依赖 #

在main.ts中导入MSAL相关服务、HTTP拦截器及配置：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { MsalModule, MsalInterceptor, MsalGuard, MsalService } from '@azure/msal-angular';
import { msalConfig } from './msal-config';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';

2. 在启动配置中注册拦截器与服务 #

修改bootstrapApplication的providers数组，配置MSAL拦截器、服务及受保护资源规则：

bootstrapApplication(AppComponent, {
  providers: [
    MsalService,
    MsalGuard,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: 'MSAL_INTERCEPTOR_CONFIG',
      useValue: {
        // 定义需要自动附加令牌的API路径与对应权限范围
        protectedResourceMap: new Map([
          ['https://你的.NET-API地址/api/**', ['api://你的API客户端ID/access_as_user']]
        ])
      }
    },
    HttpClientModule,
    MsalModule.forRoot(msalConfig)
  ]
});

3. 验证自动令牌附加功能 #

直接使用HttpClient发起API请求，无需手动添加请求头，拦截器会自动为匹配规则的请求附加Bearer令牌：

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

constructor(private http: HttpClient) {}

fetchApiData() {
  // 该请求将自动携带认证令牌
  this.http.get('https://你的.NET-API地址/api/data').subscribe(res => {
    console.log(res);
  });
}

关键注意事项 #

• 确保protectedResourceMap中的API路径和权限范围与Azure AD应用注册、.NET Web API的配置完全匹配。
• 本地开发时需配置.NET Web API的CORS规则，允许携带凭据（withCredentials: true），同时Azure AD应用注册需添加正确的重定向URI和API权限。
• 确认MsalService已完成初始化，用户登录后能获取到有效的访问令牌。

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