Microsoft Online Auth 没有“Access-Control-Allow-Origin"标头

2022-01-15 00:00:00 cors microsoft-graph-api javascript

我正在尝试使用 Microsoft graph OAuth 端点发出一个简单的请求以获取访问令牌.当我发送下面的简单请求时，我得到了

<块引用>

请求的资源上不存在Access-Control-Allow-Origin"标头.Origin 'localhost:8080/myapprunninglocally' 因此不允许访问.**"

var xhttp = new XMLHttpRequest();xhttp.open("GET", "https://login.microsoftonline.com/common/oauth2/authorize?client_id=<client_id>&scope=wl.signin%20wl.calendars_update&response_type=token&redirect_uri=localhost:8080/myapprunninglocally", true);xhttp.send();

我还使用 Microsoft Azure 目录注册了这个应用程序，请求了所有权限，并使用了委派的 client_id.

我已经阅读了 CORS 并且我知道跨域策略但是，我知道有些 API 公开了在它们的端点中包含 'Access-Control-Allow-Origin'响应头.有人能帮忙吗?

解决方案

要将 AAD 集成到 javascript 中，我们建议您使用 azure-activedirectory-library-for-js 这是一个 javascript 库，用于前端轻松集成 AAD.

在我们使用 ADAL for JS 之前，我们需要注意两个选项:

根据节点 https://github.com/OfficeDev/O365-jQuery-CORS#step-6--run-the-sample:<块引用>
注意此示例无法在 Internet Explorer 中运行.请使用其他浏览器，例如 Google Chrome.ADAL.js 使用 iframe 为 SPA 自己的后端以外的资源获取 CORS API 令牌.这些 iframe 请求需要访问浏览器的 cookie 才能通过 Azure Active Directory 进行身份验证.不幸的是，当应用程序在 localhost 中运行时，Internet Explorer 无法访问 cookie.
启用 Azure AD 应用程序的 oauth2AllowImplicitFlow.参考 https://crmdynamicsblog.wordpress.com/2016/03/17/response-type-token-is-not-enabled-for-the-application-2/了解详细步骤.

以下是从 Microsoft Graph 获取访问令牌的代码示例:

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.14/js/adal.min.js"></script><身体><a href="#" onclick="login();">登录</a><a href="#" onclick="getToken()">访问令牌</a></身体><脚本类型="文本/javascript">var configOptions = {tenant: "<tenant_id>",//默认可选，发送commonclientId: "<client_id>",postLogoutRedirectUri:window.location.origin，}window.authContext = new AuthenticationContext(configOptions);var isCallback = authContext.isCallback(window.location.hash);authContext.handleWindowCallback();函数getToken(){authContext.acquireToken("https://graph.microsoft.com",function(error, token){控制台日志(错误)；控制台.log(令牌)；})}函数登录(){authContext.login();}</脚本>

I am trying to make a simple request to get an access token using the Microsoft graph OAuth endpoint. When I send the simple request below I get

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:8080/myapprunninglocally' is therefore not allowed access.**"

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://login.microsoftonline.com/common/oauth2/authorize?client_id=<client_id>&scope=wl.signin%20wl.calendars_update&response_type=token&redirect_uri=localhost:8080/myapprunninglocally", true);
xhttp.send();

I have also registered this app using Microsoft Azure Directory, requested ALL permissions, and used the delegated client_id.

I have read up on CORS and I am aware Cross-Origin Policies however, I'm aware there are APIs which expose endpoints that include the 'Access-Control-Allow-Origin' in their response headers. Is anyone able to help?

解决方案

To integrate AAD in javascript, we suggest you to use azure-activedirectory-library-for-js which is a library in javascript for frontend to integrate AAD with a ease.

There are 2 options we need to pay attention on before we use ADAL for JS:

According the node at https://github.com/OfficeDev/O365-jQuery-CORS#step-6--run-the-sample:

Note This sample will not work in Internet Explorer. Please use a different browser, such as Google Chrome. ADAL.js uses an iframe to get CORS API tokens for resources other than the SPA's own backend. These iframe requests require access to the browser's cookies to authenticate with Azure Active Directory. Unfortunately, cookies are not accessible to Internet Explorer when the app is running in localhost.
Enable the oauth2AllowImplicitFlow of your Azure AD application. Refer to https://crmdynamicsblog.wordpress.com/2016/03/17/response-type-token-is-not-enabled-for-the-application-2/ for the detailed steps.

Here is the code sample to acquire access token from Microsoft Graph:

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.14/js/adal.min.js"></script>

<body>
<a href="#" onclick="login();">login</a>
<a href="#" onclick="getToken()">access token</a>
</body>
<script type="text/javascript">
    var configOptions = {
        tenant: "<tenant_id>", // Optional by default, it sends common
        clientId: "<client_id>",
        postLogoutRedirectUri: window.location.origin,
    }
    window.authContext = new AuthenticationContext(configOptions);

    var isCallback = authContext.isCallback(window.location.hash);
    authContext.handleWindowCallback();

    function getToken(){
        authContext.acquireToken("https://graph.microsoft.com",function(error, token){
            console.log(error);
            console.log(token);
        })
    }
    function login(){
        authContext.login();
    }
</script>

相关文章