【问题标题】:Authentication with Azure AD from React JS app从 React JS 应用使用 Azure AD 进行身份验证
【发布时间】:2019-02-03 06:10:53
【问题描述】:

我有一个使用 React JS 开发的前端应用程序。我需要使用 Azure AD 为这个应用程序提供身份验证。我要求在登录时不要重定向到微软的登录页面。为了达到同样的效果,我创建了一个自定义登录页面作为我的前端应用程序的一部分。在单击登录时,我正在使用资源所有者密码凭据流调用 azure AD 令牌端点,因此我将输入的用户名和密码传递到我的自定义页面中进行身份验证。但是当尝试将 post 方法调用到令牌端点时,我收到一个错误,因为

Failed to load https://login.windows.net/<tenant id>/oauth2/token: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

我也尝试设置 Access-Control-Allow-Origin 标头,但得到了同样的错误。

请帮我解决这个问题。

【问题讨论】:

    标签: reactjs oauth-2.0 cors azure-active-directory


    【解决方案1】:

    您不能从客户端 JavaScript 应用程序调用令牌端点。 获取令牌的主要方式是使用隐式授予流程(用户登录后从授权端点获取令牌)。 您必须使用 Microsoft 登录页面,您不能自己制作。

    你可以使用react-adal来实现登录流程,这里有一篇关于它的使用文章:https://itnext.io/a-memo-on-how-to-implement-azure-ad-authentication-using-react-and-net-core-2-0-3fe9bfdf9f36

    【讨论】:

    • 我有一个后端 azure 函数,它执行我的客户端应用程序的服务器端任务。如果我使用资源所有者密码凭据流将身份验证和获取令牌的代码移动到此 azure 函数并从我的客户端应用程序调用函数 api,该怎么办?这种方法是否正确,因为我们必须严格使用我们自己的自定义 UI?
    • 嗯,这当然是可能的,尽管我仍然不推荐它。您是否知道 ROPC 流程不适用于具有 MFA 的用户?
    • 好的。那么,通过使用自定义 UI 和机器人从客户端应用程序重定向到 Microsoft 登录页面来对 Azure AD 进行身份验证的最佳选择是什么?
    • 遗憾的是,我没有使用身份验证制作机器人的经验 :( 前端应用程序的典型模式是使用我在答案中提到的库的隐式授权流。你不会得到然后是自定义 UI。遗憾的是,AAD 中的自定义有点受限,并且大多数流程都要求您将用户重定向到 AAD 登录页面。到目前为止,我还没有收到自定义 UI 的要求,但我会推迟由于我提到的原因,这非常困难。
    • 这很有说服力。能否提供一个与 azure AD 集成的 react js 应用示例?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-06-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多