如何使用重定向uri获取访问令牌？

Question

我正在使用Spotify API而且我感到很困惑，因为当我在js小提琴上使用重定向uri时，我的程序似乎工作得很好但是当我回去并使用redirect uri在我的本地服务器上托管相同的代码时http://localhost:8888“'alert（）'和'console.log（）'行没有做任何事情。为什么我使用的是什么？我认为这只是授权发生后用户被发送到的地址。这会影响访问令牌的使用位置吗？

我的代码（测试行似乎不起作用）：

<title>Testy</title>
<link href="scripts/cached.css" type="text/css" rel="stylesheet" />
<style type="text/css">
    .container {
        margin: 1em;
    }

    img {
        margin-bottom: 1em;
    }
</style>




<div class="container">
<h1>Displaying User Data</h1>
<p>Log in with your Spotify account and this demo will display information about you fetched using the Spotify Web API</p>
<button class="btn btn-primary" id="btn-login">Login</button>
<button class="btn btn-res" id="btn-res">Result</button>
</div>





<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>


<script>
$(document).ready(function() {  
function login(callback) {
    var CLIENT_ID = '04270f76089b4a65a3eb749c0addb583';
    var REDIRECT_URI = 'http://localhost:8888';
    function getLoginURL(scopes) {
        return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +
          '&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +
          '&scope=' + encodeURIComponent(scopes.join(' ')) +
          '&response_type=token' +
          '&show_dialog=true';
    }

    var url = getLoginURL([
        'user-library-read playlist-read-private user-follow-read'
    ]);

    var width = 450,
        height = 730,
        left = (screen.width / 2) - (width / 2),
        top = (screen.height / 2) - (height / 2);

    window.addEventListener("message", function(event) {
        var hash = JSON.parse(event.data);
        if (hash.type == 'access_token') {
            callback(hash.access_token);
        }
    }, false);

    var w = window.open(url,
                        'Spotify',
                        'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left
                       );

}
function ridDuplicates(artists) { // returns final artists array
        artistsFresh = []; // will contain no duplicate artists
    artistsFresh.push(artists[0]); // first element can't be a duplicate
    for (var i = 1; i < artists.length; i++) {
            var j = i-1;
        var duplicateArt = false;
            while (j >= 0 && duplicateArt == false) {
             if (artistsFresh[j] == artists[i]) {
                duplicateArt = true;
           }
           j--;
        }
        if (!duplicateArt) {
                artistsFresh.push(artists[i]);
        }
    }
    return artistsFresh;
} 

var i = 0;
function getUserData(accessToken, i) {
    return $.ajax({
        url: 'https://api.spotify.com/v1/me/tracks?limit=50&offset=' + i,
        headers: {
           'Authorization': 'Bearer ' + accessToken
        }
    });
}


   var loginButton = document.getElementById('btn-login');

var resButton = document.getElementById('btn-res');
var artists = [];
resButton.addEventListener('click', function() {
  alert(artists.length);
});

loginButton.addEventListener('click', function() {
login(function(accessToken) {
    loginButton.style.display = 'none';
    var arr = [getUserData(accessToken, i)];
    arr[0]
    .then(function(response) {
        for (var i = 50; i < response.total; i += 50) {
            arr.push(getUserData(accessToken, i));
        }
        Promise.all(arr).then(function(chunks) {
            var artists = [].concat.apply([], chunks.map(function(response)                    {
                return response.items.map(function(item) {
                    return item.track.album.artists[0].name;
                });
            }));
            //nothing works here!!
            //tests
            alert("WORKS");
            console.log("hello?");
            alert(artists.length);
            alert(artists[9]);
            var newArray = ridDuplicates(artists);
            alert(newArray.length);

        });
        // nothing happens here either
        alert("WORKS");
        console.log("hello");
    })

});

});
});

</script>

然后，如果我在jsFiddle中运行此代码，重定向uri为“http://jmperezperez.com/spotify-oauth-jsfiddle-proxy/”，一切似乎都完美无缺。有人可以解释这个/如何使用重定向uris与访问令牌一起给我？提前谢谢！