Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

No 'Access-Control-Allow-Origin' header with Microsoft Online Auth

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?

like image 273
Riyanat Avatar asked Jul 11 '16 23:07

Riyanat


People also ask

How do I fix not allowed by Access-Control allow origin?

If the server is under your control, add the origin of the requesting site to the set of domains permitted access by adding it to the Access-Control-Allow-Origin header's value. You can also configure a site to allow any site to access it by using the * wildcard. You should only use this for public APIs.

What is no Access-Control allow origin?

This error occurs when a script on your website/web app attempts to make a request to a resource that isn't configured to accept requests coming from code that doesn't come from the same (sub)domain, thus violating the Same-Origin policy.

How do I fix Azure CORS error?

In the allowed origins section, please make sure the origin URL which will call your APIM service, has been added. In some cases, you may only want to apply <cors> policy to the API or Operation level. In this case, you will need to navigate to the API or Operation, add the <cors> policy into the inbound policy there.


2 Answers

Your not going to be able to run that from the client. Part of the CORS setup requires that microsoftonline.com adds your domain to their CORS supported whitelist.

I would suggest that you make a call a service on your server, which then makes the request server to server.

like image 187
Charlie Avatar answered Oct 02 '22 16:10

Charlie


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>
like image 22
Gary Liu Avatar answered Oct 02 '22 15:10

Gary Liu