Instagram API提供的access_token无效

Question

I am a new programmer and quite new to .js in general. My current issue is that when I run this script Instagram.popular(function(r){ console.log(r)}) locally (ie on the console of Firefox) I get the following error The access_token provided is invalid

As I read in gitHub and other places, it has something do with Instagram changing some API policy as discussed here . The change log for Instagram is given here .

If anyone can point me in the right direction, I will very much appreciate it.

Below you can see my full .js code.

CODE

    window.Instagram = {
        /**
         * Store application settings
         */
        config: {},

        BASE_URL: 'https://api.instagram.com/v1',

        init: function( opt ) {
            opt = opt || {};

            this.config.client_id = opt.client_id;
        },

        /**
         * Get a list of popular media.
         */
        popular: function( callback ) {
            var endpoint = this.BASE_URL + '/media/popular?client_id=' + this.config.client_id;
            this.getJSON( endpoint, callback );
        },

        /**
         * Get a list of recently tagged media.
         */
        tagsByName: function( name, callback ) {
            var endpoint = this.BASE_URL + '/tags/' + name + '/media/recent?client_id=' + this.config.client_id;
            this.getJSON( endpoint, callback );
        },

        getJSON: function( url, callback ) {
            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'jsonp',
                success: function( response ) {
                    if ( typeof callback === 'function' ) callback( response );
                }
            });
        }
    };

    Instagram.init({
        client_id: '97bf259cc45f4dd6a2cd02b694b7ffe7'
    });


    $( document ).ready(function() {

        Instagram.popular(function( response ) {
            var $instagram = $( '#instagram' );
            for ( var i = 0; i < response.data.length; i++ ) {
                imageUrl = response.data[i].images.low_resolution.url;
                $instagram.append( '<img src="' + imageUrl + '" />' );
            }
        });

        $( '#form' ).on('submit', function( e ) {
            e.preventDefault();

            var tagName = $( '#search' ).val();
            Instagram.tagsByName(tagName, function( response ) {
                var $instagram = $( '#instagram' );
                    $instagram.html('');

                for ( var i = 0; i < response.data.length; i++ ) {
                    imageUrl = response.data[i].images.low_resolution.url;
                    $instagram.append( '<img src="' + imageUrl + '" />' );
                }
            });

        });

    });

Answer 1

The first thing you should start from is by hitting Instagram popular link in the browser. you will notice that you are getting invalid access token in response as well. This is happening because instagram API requires authentication which is done through OAuth . You have to find a js implementation of OAuth or a 3rd party js liberary with OAuth implementation and use it to obtain access token and use to get resources in subsequent server calls. you should also reference Instagram Developers website as well to see how they suggest implementing it.

Answer 2

You are using some old code that uses client_id to make API calls.

Instagram stopped allowing API calls with just client_id since June 1, 2016. Now you have to have an access_token in URL param to make API calls, you have to do the oauth authentication and get access_token as described in documentation:

https://www.instagram.com/developer/authentication/

And also from your code /media/popular/ is not valid anymore, its a deprecated, looks like you are using some old Instagram library