Microsoft登录来自OAuth2问题 [英] Microsoft login from oauth2 issue

问题描述

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

I have a React app using axios library for handling request. So following the next post:

如何使用OAuth2和Microsoft登录名和HTTP请求使用用户名/密码登录

我可以对邮递员执行操作.

I could perform the action on Postman.

然后我设置axios库来执行POST

Then I set up the axios library to perform the 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/token. (原因:CORS标头"Access-Control-Allow-Origin"缺失).

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',

到标题，但没有用.

因此添加Allow-Control-Allow-Origin: *​​​ chrome扩展程序解决了我的问题.

So adding Allow-Control-Allow-Origin: *​​​ chrome extension fixed my problem.

问题是，我的应用程序将在azure上发布，因此我在其他Web浏览器上测试了该请求，但该请求不起作用.因此，我不希望我的用户安装该扩展程序.

The thing is, my app is to be published on azure, so I tested the request on other web browsers and it did not work. So I don't want my users to install the extension.

我的请求有问题吗?为什么邮递员可以在不设置标题的情况下做到这一点?

Is there something wrong with my request? Why postman can do it without setting up headers?

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

Is there any other approach to achieve it?

PS:我读过有关使用adal.js的信息，但是我不想使用Microsoft的登录屏幕，因为我知道该应用程序的用户名和密码，而且我想避免手动登录.

PS: I read about using adal.js but I dont want to use the login screen from microsoft, because I know user and pass for the app, and I want to avoid manual login.

推荐答案

您遇到的问题是由于您尝试通过AJAX调用令牌终结点，由于缺少CORS标头，该终结点不被接受.您无法添加它，Azure AD的响应中缺少它.

The problem you face is due to you trying to call the token endpoint via AJAX, which it won't accept due to the CORS header missing. You can't add it, it's missing from the response from Azure AD.

您需要做的是，必须使用OAuth隐式授权流程，而不是从令牌端点获取访问令牌.此流程使您可以直接在授权阶段获取令牌，并且特别针对基于JavaScript的应用程序而设计.此处的更多信息:

What you need to do is instead of getting the access token from the token endpoint, you must use the OAuth Implicit Grant Flow. This flow allows you to get the tokens directly in the authorization stage, and is especially designed for JavaScript-based apps. More info here: https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-dev-understanding-oauth2-implicit-grant.

这意味着您不能像现在那样使用密码授予流"，除非您从后端而不是前端进行呼叫.

What this means is that you can't use the Password Grant Flow as you are doing now, unless you make the calls from your backend instead of the frontend.

这篇关于Microsoft登录来自OAuth2问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！