ReactJs FE 和 Django Rest Services 与 Azure AD 进行身份验证和授权答案

【问题标题】：ReactJs FE and Django Rest Services with Azure AD for authentication & AuthorizationReactJs FE 和 Django Rest Services 与 Azure AD 进行身份验证和授权
【发布时间】：2021-10-25 13:40:50
【问题描述】：

我有一个内置在 Reactjs 中的前端应用程序，它使用 msal 连接到 Azure AD 进行身份验证。身份验证后，用户需要单击一个按钮，该按钮调用同样使用 Azure AD 进行身份验证的 Django rest API。 React FE 和 Django 连接到 Azure AD 中的两个单独的应用注册。甚至认为 1) FE 作为已知客户端添加到 Django 的 App 注册中 2) Django 正在公开 API 并且范围已获得同意。

当经过身份验证的 FE 使用 Bearer 令牌向 Django Rest 服务发送请求时，它无法验证“无效令牌”的请求。

我能够分别对 FE 和 Django Rest 服务进行身份验证，但经过身份验证的 FE 无法连接到 Django Rest 服务。请分享您对其他需要检查的内容或任何解决方案的想法。

【问题讨论】：

您能否提供一些您从 reactjs 应用程序发出的 http 请求的代码，确保隐藏所有重要信息。

标签： reactjs azure django-rest-framework azure-active-directory

【解决方案1】：

请检查这些配置是否可以解决

检查您是否在门户和代码中的重定向 URL 中提供了您的反应应用程序的 URL，以便一旦 Azure AD 验证用户并使用 ID 令牌返回到您的反应应用程序。另外，启用访问令牌和ID 令牌。
检查您是否为您的 Web api 创建了范围（在 Azure 门户 > 您的 API > Expose an API）。然后在 API 权限菜单选项卡上的客户端应用程序上对其进行配置。然后在代码设置中将其添加到您的范围集合中。此外，为该 API 权限添加授予管理员同意。
检查您的 azure 广告应用的 manifest：以下值可能为 null 或一，应该是二：如果您使用的是 v2.0 端点，

“accessTokenAcceptedVersion”：2，

如果您使用的是 v2.0 端点，则范围应为 api://{server_client_id}/.default。

在您的应用程序的代码 setting.py 中，您需要提供您的 Web 应用程序委派登录的权限。（例如：授权：'https://login.microsoftonline.com/(your tenant id>',)

auth: {
clientId: '232a1406-b27b-4667-b8c2-3a865c42b79c',
authority:  'https://login.microsoftonline.com/e4c9ab4e-bd27-40d5-8459-230ba2a757fb',
//
}

当我们执行令牌验证时，请检查 http://jwt.io 中的 jwt 令牌受众：令牌针对 Web API。

azure 为 JWT 令牌生成的

“aud”值也由 AD 应用程序清单中的“accessTokenAcceptedVersion”属性控制。（查看颁发者或 iss 是否具有 v2 以确认为 v2 端点）如果您已将访问令牌接受版本设置为 2，则客户端 ID 和受众需要相同（即无需在受众中写入 api://）

请注意，Implicit flow 是 SPA 支持的唯一流。授权代码流适用于网络应用、移动和桌面应用，但不适用于 SPA。请参阅此document

参考资料：

见how to configure Azure AD and how to determine the settings for django-auth-adfs.
您可以查看this 并找到您的用例场景。
检查v2-supported-account-types for authentication-flows
检查OAuth2.0 On-Behalf-Of flow

【讨论】：