如何使用 Azure Easy Auth 获取访问令牌?

IT技术 reactjs azure azure-web-app-service azure-active-directory
2021-05-20 11:48:44

我有一个使用 React 和 Web API 构建的单页应用程序 (SPA),它们都托管在 Azure 的应用程序服务上。身份验证由 Azure AD 提供。

我一直在为 JavaScript 使用 Active Directory 身份验证库 (ADAL)。虽然所有示例似乎都是关于 Angular,但我已经设法使库的纯 JavaScript 版本与 React 应用程序一起使用。我已经使用 OAuth2 隐式授权流程通过 SPA 最终提供对 Web API 的身份验证访问。

ADAL 一切正常,但这种方法要求您具有登录和注销机制(例如,通过按钮)。授权代码作为一个片段添加到 URL 中,其余的事情由 ADAL 方便地完成。但是,我希望整个应用程序都是安全的/经过身份验证的,因此我设置了“Easy Auth”——通过应用服务进行身份验证。

使用“Easy Auth”时,您登录到应用程序,但 URL 中没有返回任何片段,因此 ADAL 不能用于获取 API 的访问令牌。

使用“Easy Auth”时获得隐式授权所需的访问令牌的最佳方法是什么?有没有办法将 ADAL 合并到“Easy Auth”流程中?

谢谢你。

1个回答

如果将单页应用程序和Web API 部署到同一个Azure 的应用程序服务中并使用Easy Auth 保护应用程序服务,则现在无需在单页应用程序中使用adal 来调用Web API。

在这种情况下,您可以通过服务器流登录应用服务,然后您可以直接调用 Web API,因为 Easy Auth 将通过 cookie 对请求进行身份验证。如果 Web API 还为您要使用令牌调用的其他客户端提供服务,则需要使用保护应用服务的 Azure AD 应用程序获取 id_token/access_token,并使用 Azure AD 颁发的 id_token/access_token 交换身份验证令牌。此进程称为客户端流程。

有关这两个流程的更多详细信息,您可以参考此处的链接