How do I recive instagram log in token using ajax

Question

I am trying to recive token from Instagram and I am having some problems. I use this code, but I get these errors:

SEC7127: Redirect was blocked for CORS request.

SCRIPT7002: XMLHttpRequest: Network Error 0x2ef1, Could not complete the operation due to error 00002ef1.

$(document).ready(function() {
    var clientId = 'xxx';
    var clientSecret = 'xxx';
    var redirectUri = 'http://localhost/instagramFeed/';
  
  function callback(code) {
        $.ajax({
            type: 'POST',
            client_id: clientId,
            client_secret: clientSecret,
            grant_type: authorization_code,
            redirect_uri: redirectUri,
            code: code,
            success: function(code) {
                console.log('Callbeck success!');
            },
            error: function(msg) {
                console.log('Error in callback');
                console.log(msg);
            }
        });
    }
    var requestToken = function() {
        var url = 'https://instagram.com/oauth/authorize/?client_id=' + clientId + '&redirect_uri=' + redirectUri + '&response_type=code';
        $.ajax({
            type: 'GET',
            url: url,
            success: function(code) {
                console.log('Success' + code);
                callback(code);
            },
            error: function(msg) {
                console.log('Error');
                console.log(msg);
            }
        });
    };
    requestToken();
});

the ajax call in "callback" function looks wrong. There's no URL specified, and none of "client_id", "client_secret", "grant_type", "redirect_uri", "code" are valid parameters for the jQuery ajax method, as far as I can see: http://api.jquery.com/jquery.ajax/ . Should they be part of the data sent with the request? — ADyson, Jul 18 '16 at 09:41
also in both ajax calls, the signature of the "error" function is wrong. It should be function( jqXHR, textStatus, errorThrown). Again see http://api.jquery.com/jquery.ajax/ . That might be preventing it reporting problems to you as well as it could. You could try swapping it for something like `function (jQXHR, textStatus, errorThrown) { alert("An error occurred whilst trying to contact the server: " + jQXHR.status + " " + textStatus + " " + errorThrown); }` to get a better report — ADyson, Jul 18 '16 at 09:44
I have commented whole callback() and still the same error; With edited error handler now the error is: An error occurred whilst trying to contact the server: 0 error. But still two errors which I posted in the question — Mihajlo Racic, Jul 18 '16 at 10:59
Are you using IE11 for this? Does it work in Chrome? See http://stackoverflow.com/questions/20198696/cors-request-with-ie11 and https://msdn.microsoft.com/en-us/library/dn423949(v=vs.85).aspx — ADyson, Jul 18 '16 at 11:04
I tested it on Chrome, Edge and Mozila - same result... I allowed CORS request in mozila and edge. I also tried ssl connection and not just http. — Mihajlo Racic, Jul 18 '16 at 11:12

score 1 · Accepted Answer · answered Jul 18 '16 at 18:04

Bunch of things wrong: The code will arrive as url param in the redirect url, you cannot make ajax get call and get the code in response. And you cannot make server explicit oauth login with just javascript, you have to do the post on server side code.

If u want to just do using javascript, then you can use the client implicit grant method of oauth2 that is supported by Instagram, you have to enable this is app settings.

All you have to do is open the auth url with response_type=token instead of =code.

window.location = 'https://instagram.com/oauth/authorize/?client_id=' + clientId + '&redirect_uri=' + redirectUri + '&response_type=token'

just open this url and after login, the access_token will be in the hash fragment of redirect url

to grab it, just have this code in the redirect url page

var access_token = "";
if (window.location.hash){
    access_token = window.location.hash.split("access_token=")[1];
    window.location.hash = "";
}

More details here: https://www.instagram.com/developer/authentication/

I get this error after trying this solution: {"code": 403, "error_type": "OAuthForbiddenException", "error_message": "Implicit authentication is disabled"} — Mihajlo Racic, Jul 19 '16 at 09:14

How do I recive instagram log in token using ajax

1 Answers1

Linked