如何验证前端 SPA 应用程序和 API 两者都使用 Azure Easy Auth

Question

情况

我有一个后端 API 和前端 SPA 应用程序都托管在 Azure 中。我使用相同的应用程序注册通过 Azure AD Easy Auth 保护了这两个应用程序服务。这有效 - 如果我尝试访问前端应用程序，我将被重定向到我可以登录的 Microsoft 登录页面，如果我访问 API，我将返回 401（我可以通过 [=12= 交互式登录） ]).在这两个应用程序中，我都可以访问 /.auth/me 来检索 id_token 和 access_token 等。我的 SPA 应用程序将查询此端点以检索 id_token。然后它使用此令牌通过 Bearer 令牌与 API 通信。这种通信有效，我可以通过这种方式成功调用端点。

我遇到的问题是一段时间后，前端存储和发送的id_token失效了。我假设前端会要求用户再次登录，这会刷新 id_token 但事实并非如此。我做了一些挖掘，显然我应该发送 access_token 而不是 id_token。但是，我的 API 拒绝了：

{
    "code": 401,
    "message": "IDX10511: Signature validation failed. Keys tried: '[PII is hidden]'. \nkid: '[PII is hidden]'. \nExceptions caught:\n '[PII is hidden]'.\ntoken: '[PII is hidden]'."
}

https://jwt.io 也无法验证访问令牌。

我在寻找 SPA 应用的 resources/documentation 和 API 时遇到了很多麻烦，两者都使用 Easy Auth 以及如何让它们互相交谈。

已经尝试过的东西

正在从应用程序注册中删除任何 Microsoft Graph 权限
为应用程序注册将清单“accessTokenAcceptedVersion”更改为 2
为 Azure 门户中的应用程序注册启用“隐式授权和混合流”的“ID 令牌”和“访问令牌”
使用 cookie 身份验证（发送来自 SPA 的请求的 cookie）
公开 API 并为其添加权限

当前端和后端都受 Azure Easy Auth 保护时，验证前端和后端的标准方法是什么？我应该使用 access_token 还是 id_token 进行身份验证？如果是后者，我该如何刷新呢？

Answer 1

您似乎正在接收 graph 的访问令牌。请确保为后端网站创建范围 api .

Note:User.Read is for graph api access and may have nonce in token generated which may make the signature invalidated for you web api.

因此，请在门户中创建一个新范围来标识您的后端api，即；修改您的应用以获取 API.

的访问令牌

您的水疗应用 > Expose an API > 添加范围。 (创建一个新的作用域: say name = access_as_user)
在API权限中：为已注册的应用程序和范围添加新权限access_as_user。像 api://<app id>/ scope name

确保将此范围名称放置在应用范围中使用的任何位置（删除 user.read 如果存在并添加 api 的范围）和 grant 管理员同意。现在再试一次并检查 https://jwt.io 中的令牌。

如果有进一步的错误说观众无效：转到清单：将条目“accessTokenAcceptedVersion”从（null 或 1）更改为 2 并尝试。如果不成功，请尝试从您的应用配置范围中删除 api:// 前缀。

参考文献：

教程：E2E 用户身份验证 - Azure 应用服务 |微软文档
azure - Setting additionalLoginParams with auth v2 - Stack Overflow
IDX10511 -issue (github.com)

如何验证前端 SPA 应用程序和 API 两者都使用 Azure Easy Auth

How to authenticate a frontend SPA app and API when both use Azure Easy Auth

oauth

active-directory

azure

azure-active-directory

azure-web-app-service