angular - 如何保护 Azure API 管理中的 API，然后通过 Angular (adal-angular5) 进行访问？

Question

背景

1. 我已在 Azure-API-Mangement 中创建了一个测试 API。只要我提供“订阅 key ”，我就可以从 API 获取数据。我不知道如何设置安全性以链接到 Azure AD。

2. 我正在 Angular 中创建 SPA，并使用 adal-angular5。我已经关注了这个excellent guide on SpikesApps ，但是我使用 adal-angular5 而不是 adal-angular4。我能够获取登录用户的 1296 个字符 token 。请参阅下面的屏幕截图:

上面链接的 SpikesApps 指南正在连接到作为 Azure WebApp 创建的 API，而不是 Azure-API-管理的一部分。该指南使用用户 token 并将其作为 HTTP get 中的 header 提交。 (授权:Bearer [用户 1296 字符 token ])。

我对 Azure 的有限了解告诉我，为 Azure WebbApp API 设置安全性与 Azure-API-管理中的 API 不同。

我的情况与 SpikesApps 指南的不同之处(也是我陷入困境的原因)是，我想要安全地连接到属于 Azure-API-管理一部分的 API。

我的问题:

1. 是否可以保护 Azure-API-管理中的 API，以便我的 Angular SPA 可以通过提供 Authorization: Bearer <user 1296 char token> 来访问它 header ？ (即根据 SpikesApps guide 内访问的 API)。

2. 如果没有，我有什么选择？

3. 我已经阅读了一些有关 Azure-API-Management 中 API 的“validate-jwt”策略的内容。如果这是唯一的方法，我如何获取 JWT？我假设 JWT 与我已有的 1296 字符用户 token 不同？

屏幕截图

(显示我的 Angular SPA 中由 adal-angular5 获取的用户信息)

(adal-angular5 如何将 Authorization header 添加到 get 请求的示例。https://www.npmjs.com/package/adal-angular5 )

Answer 1

在发布上述问题一小时后就已经找到了解决方案(在此之前我浪费了很多时间!)。

需要将 validate-jwt 添加到 API 的入站策略。

我按照本页上的(部分)说明进行操作:https://learn.microsoft.com/en-us/azure/api-management/api-management-howto-protect-backend-with-aad#configure-a-jwt-validation-policy-to-pre-authorize-requests

实际上只需要执行以下操作:

1. 在 Azure AD 中创建“应用注册”，以与 APIM 中的 API 关联。我们称之为后端应用
2. 在 API 管理中，修改相关 API 的入站组件的政策，添加如下屏幕截图所示的代码
3. 发出 GET 请求时， header 需要包含:<Authorization: Bearer {USER_TOKEN}> (根据上面原始问题中的指南)
4. 不要忘记在 GET 请求中包含订阅 key 。