MSAL Angular HTTP 拦截器用于未附加令牌的本地主机

Question

我正在尝试调用本地主机 API 并将不记名令牌附加到标头上。它应该由

msal-angular

自动完成。 目前，我已将 localhost API 路由添加到

protectedResourceMap

，但标头内没有不记名令牌。尝试添加 jsonplaceholder 和

graph.microsoft

以对其进行 HTTP post 调用，并且它有效。唯一的问题是当我尝试对 localhost API 进行 HTTP 调用时。

我正在使用：

@azure/[email protected]
@azure/[email protected]

我在

app.module.ts

中使用了拦截器的工厂提供程序。

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
   protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', [
     'user.read',
   ]);

  protectedResourceMap.set('http://localhost:5000/api/add', [
    'api://custom api consent'
  ]);

   protectedResourceMap.set('https://jsonplaceholder.typicode.com/', [
     'api://custom api consent'
   ]);

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

它也注册在

app.module.ts

：

    providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: MsalInterceptor,
          multi: true,
        },
        {
          provide: MSAL_INSTANCE,
          useFactory: MSALInstanceFactory,
        },
        {
          provide: MSAL_GUARD_CONFIG,
          useFactory: MSALGuardConfigFactory,
        },
        {
          provide: MSAL_INTERCEPTOR_CONFIG,
          useFactory: MSALInterceptorConfigFactory,
        },
        MsalService,
        MsalGuard,
        Msal,
        BroadcastService,
  ],

有什么建议吗？

Answer 1

如果您遇到类似问题，我找到了一个可能有帮助的解决方案。事实证明，更动态地使用 protectedResourceMap 函数并提供相对 URL 效果更好。该问题是由于使用完整路由导致的，包括域名和端口号，例如“http://localhost:4200/api/add”。 解决方案只是将“/api/”添加到 protectedResourceMap 中，如下所示：

protectedResourceMap.set('/api/', [
'api://custom api consent'
]);

Answer 2

我们在上面@Bozhinvski 的回答中苦苦挣扎；具体来说

api://custom api consent

是什么意思。

此值需要与应用程序 ID URI 保持一致，按照惯例，其格式为

api://<Application (client) ID>

，其中应用程序（客户端）ID 通常是 Azure 为您生成的 GUID。然而，这不是硬性要求（而是生成时的默认要求和推荐的要求）。这可以在 Azure Active Directory 门户中的应用程序注册页面 -> 公开 API 下进行控制，并且可以根据需要进行更改：

Answer 3

与 SETI At Home 的答案类似，以下是如何在不调用

add

上的

protectedResourceMap

的情况下完成此操作。总体而言，实际上要容易得多。

  protectedResourceMap: new Map([
    ['https://graph.microsoft.com/v1.0/me', ['user.read']],
    ['/api/', ["api://your-app-guide-would-be-here/And.The.Claim"]],
  ])

使用 /api/ 似乎可以验证其中包含 api 的任何请求，就我而言，效果非常好。我之前指定了完整的 http://appsite.local/api，这导致了问题。