Microsoft 从 oauth2 问题登录

Question

我有一个使用 axios 库处理请求的 React 应用程序。于是接着下post:

我可以在 Postman 上执行操作。

然后我设置了 axios 库来执行 POST

const dataForBody = `${'grant_type=password&' +
      'username='}${encodeURI(userName)}&` +
      `password=${encodeURI(userPassword)}&` +
      `client_id=${encodeURI(clientID)}&` +
      `resource=${encodeURI('https://graph.microsoft.com')}&` +
      `client_secret=${encodeURI(clientSecret)}`;
const messageHeaders = {
  'Content-Type': 'application/x-www-form-urlencoded'
};

axios({
  method: 'post',
  url: 'https://login.microsoftonline.com/{tenant}/oauth2/token',
  headers: messageHeaders,
  data: dataForBody,
})
  .then((response) => {

  });

但出现以下错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://login.microsoftonline.com/{tenant}/oauth2/token. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

我尝试添加：

'Access-Control-Allow-Origin': 'https://login.microsoftonline.com',

到headers，但是没用。

所以添加 Allow-Control-Allow-Origin: * chrome 扩展解决了我的问题。

问题是，我的应用程序要在 azure 上发布，所以我在其他网络浏览器上测试了请求，但没有成功。所以我不希望我的用户安装扩展程序。

我的请求有问题吗？为什么postman不用设置headers也能做到？

还有其他方法可以实现吗？

PS：我阅读了有关使用 adal.js 的信息，但我不想使用 Microsoft 的登录屏幕，因为我知道用户并通过该应用程序，我想避免手动登录。

Answer 1

您遇到的问题是由于您试图通过 AJAX 调用令牌端点，由于缺少 CORS header，它不会接受。您无法添加它，Azure AD 的响应中缺少它。

您需要做的不是从令牌端点获取访问令牌，而是必须使用 OAuth 隐式授权流程。此流程允许您在授权阶段直接获取令牌，并且专为 JavaScript-based 应用程序设计。更多信息在这里：https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-dev-understanding-oauth2-implicit-grant.

这意味着您不能像现在这样使用密码授予流程，除非您从后端而不是前端进行调用。

Microsoft 从 oauth2 问题登录

Microsoft login from oauth2 issue

azure

reactjs

login

oauth-2.0

axios