微软从oauth2登录问题

Question

我有一个使用axios库处理请求的React应用程序。因此，在下一篇文章之后：

How to login with username/password using OAuth2 and microsoft login and HTTP request

我可以在邮差身上表演这个动作。

然后我设置了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) => {

  });

但我得到了以下错误：

跨源请求被阻止:相同的原产地策略不允许在https://login.microsoftonline.com/{tenant}/OAuth2/令牌上读取远程资源。(原因: CORS标题“访问-控制-允许-起源”丢失)。

我试着补充：

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

但是它不起作用。

因此，添加Allow-Control-Allow-Origin: *​​​铬扩展解决了我的问题。

问题是，我的应用程序将在azure上发布，所以我在其他浏览器上测试了这个请求，但它没有工作。所以我不希望我的用户安装这个分机。

我的要求有什么问题吗？为什么邮递员可以在不设置页眉的情况下做到这一点？

是否还有其他方法来实现这一目标？

PS:我读过关于使用adal.js的文章，但我不想使用微软的登录屏幕，因为我了解用户，也不想使用这个应用程序，我希望避免手动登录。

Answer 1

您面临的问题是您试图通过AJAX调用令牌端点，由于CORS标头丢失，它将不接受该端点。您不能添加它，它在Azure AD的响应中丢失了。

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

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