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

Posted

技术标签:

【中文标题】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 method 【发布时间】: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 错误。

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

【问题讨论】:

【参考方案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 为您提供的所有内容,可能是从之前的示例中窃取的。

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

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
  ;

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

【讨论】:

以上是关于Azure AD for Angular + ASP.net web api - Msal Angular HTTP 拦截器不为 POST 方法附加令牌的主要内容,如果未能解决你的问题,请参考以下文章

使用 MSAL Angular 包装器在 Ionic 4 中处理来自 Azure AD 的回调

如何从 angular localhost:4200 调用 spring security azure AD localhost:8080。天蓝色调用中的错误

使用刷新令牌 adal azure AD 静默更新访问令牌

从 Azure AD 发出 JWT 令牌中的角色

Unity for Android 中的 Azure AD 身份验证出错

Code as IaaS for Azure : Terraform 初步