Azure AD for Angular + ASP.net web api - Msal Angular HTTP 拦截器不为 POST 方法附加令牌答案

【问题标题】：Azure AD for Angular + ASP.net web api - Msal Angular HTTP interceptor does not attach token For POST methodAzure AD for Angular + ASP.net web api - Msal Angular HTTP 拦截器不为 POST 方法附加令牌
【发布时间】：2021-12-11 00:14:09
【问题描述】：

我正在使用 Azure AD 进行身份验证（SPA(Angular) 和 ASP.net core web api）。在阅读用户信息或来自 Angular 的任何 Get 调用时，我没有任何问题。我可以看到 Bearer token 被 MSAL 拦截器附加到 Request.header。到目前为止一切正常。

当我对同一个 API 运行 Post 调用时，我的 API 收到未经授权的 401 错误。

谁能告诉我我错过了什么？

【问题讨论】：

标签： angular asp.net-core azure-active-directory webapi

【解决方案1】：

我假设您找到了它们，但以防万一您可以查看 angular msal here 的相关示例。

当我浏览它时，我的 app.module 最终看起来像下面这样

 providers: [
    AuthService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    PermissionEndpointService,
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService
  ],
  bootstrap: [AppComponent, MsalRedirectComponent]

将MsalRedirectComponent 添加到引导程序不是文档的一部分，但我发现它有助于使其开始工作。你也可以试试。我也没有调用forRoot，而是提供module's forRoot 为您提供的所有内容，可能是从之前的示例中窃取的。

您的拦截器配置看起来也可能导致您出现问题。基本思想是它限制了您将 jwt 发送到的目的地。这是我的定义

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set(`${environment.api_url}/some-anonymous-route/*`, null);
  protectedResourceMap.set(`${environment.api_url}/another-anonymous-route`, null);
  protectedResourceMap.set(environment.api_url, environment.msalConfig.scopes);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

您可以尝试改写您拥有它的方式，但也许我读错了您的内容。类似的东西

{
  const protectedResourceMap = new Map<string, Array<string>>();  
  protectedResourceMap.set(environment.apiBaseUrl, [https://yoursitehere.com/api/user_impersonation]);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

随时发表评论或添加信息。我会看看我是否可以提供更多帮助。

【讨论】：