CODEWITHSUNDEEP
javascriptazurecorsoauth-2.0
Januka samaranyake
Januka samaranyake

Reputation: 2597

OAuth2 Access origin error

I Request an authorization code from OAuth2 Server. My purpose is to authorize user with my microsoft App. Refered Document

My attempt for get Call:

function httpGet(){
        var theUrl = "https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id="client_id"&response_type=code&redirect_uri="redirect_uri"&response_mode=query&resource=https%3A%2F%2Fservice.contoso.com%2F&state=12345";

        var req = new XMLHttpRequest();
        req.open('GET', theUrl, true);
        req.onreadystatechange = function() {
            if (req.readyState === 4) {
                if (req.status >= 200 && req.status < 400) {
                    console.log(req.responseText)
                } else {
                    console.log("error")
                }
            }
        };
        req.send();
    }

but this gives below error:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

then I add the req.setRequestHeader("Access-Control-Allow-Origin", "*");

but it gives the below error:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Upvotes: 1

Views: 693

Answers (2)

Januka samaranyake
Januka samaranyake

Reputation: 2597

Without using any frontend google libraries I came up with solution.

window.open("url")

After complete the authentication I get the code from url params and send it backend and achieve the access token, refersh token.......etc,

Upvotes: 0

Gary Liu
Gary Liu

Reputation: 13918

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:

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

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.10/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>

Upvotes: 1

Related Questions