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 login 和 HTTP 请求使用用户名/密码登录

我可以对 Postman 执行操作.

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

到标题，但它不起作用.

to the headers, but it did not work.

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

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

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

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.

我的请求有问题吗?为什么postman不用设置headers就可以做到?

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 的应用程序设计.更多信息:https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-dev-understanding-oauth2-implicit-grant.

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屋！