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

我使用的是Spotify API，我很困惑，因为当我在js fiddle上使用重定向uri时，我的程序似乎工作得很好，但当我返回并在本地服务器上使用重定向uri托管相同的代码时，“'alert（）'和'console.log（）”行没有任何作用。为什么我使用什么uri很重要？我认为这正是用户在授权发生后被发送到的地址。这是否会影响访问令牌的使用位置

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

Testy
.集装箱{
边缘：1米；
}
img{
边缘底部：1米；
}
显示用户数据
使用您的Spotify帐户登录，此演示将显示有关您使用Spotify Web API获取的信息

登录
结果
$（文档）.ready（函数（）{
函数登录（回调）{
var客户识别码='04270f76089b4a65a3eb749c0addb583'；
var REDIRECT_URI='1〕http://localhost:8888';
函数getLoginURL（作用域）{
返回'https://accounts.spotify.com/authorize?client_id=“+客户ID”+
“&redirect_uri=”+encodeURIComponent（redirect_uri）+
“&scope=”+encodeURIComponent（scopes.join（“”））+
“&response_type=token”+
“&show_dialog=true”；
}
var url=getLoginURL([
'用户库读取播放列表读取私人用户跟随读取'
]);
可变宽度=450，
高度=730，
左=（屏幕宽度/2）-（宽度/2），
顶部=（屏幕高度/2）-（高度/2）；
window.addEventListener（“消息”，函数（事件）{
var hash=JSON.parse（event.data）；
if（hash.type==“访问\u令牌”）{
回调（hash.access\u令牌）；
}
}，假）；
var w=窗口打开（url，
“Spotify”，
'菜单栏=否，位置=否，可调整大小=否，滚动条=否，状态=否，宽度='+宽度+'，高度='+高度+'，顶部='+顶部+'，左侧='+左侧
);
}
函数ridDuplicates（美工人员）{//返回最终美工人员数组
artistsFresh=[]；//将不包含重复的艺术家
artistsFresh.push（artists[0]）；//第一个元素不能重复
for（变量i=1；i=0&&duplicateArt==false）{
if（artistsFresh[j]==艺术家[i]）{
重复艺术=真实；
}
j--；
}
如果（！复制艺术）{
艺人推展（艺人[i]）；
}
}
返回艺术家刷新；
} 
var i=0；
函数getUserData（accessToken，i）{
返回$.ajax({
网址：'https://api.spotify.com/v1/me/tracks?limit=50&offset="我,，
标题：{
“授权”：“承载人”+accessToken
}
});
}
var loginButton=document.getElementById（'btn-login'）；
var resButton=document.getElementById（'btn-res'）；
var=[]；
resButton.addEventListener（'click'，function（）{
警报（艺术家长度）；
});
loginButton.addEventListener（'click'，function（）{
登录（函数（accessToken）{
loginButton.style.display='none'；
var arr=[getUserData（accessToken，i）]；
arr[0]
.然后（功能（响应）{
对于（变量i=50；i

---

然后，如果我在JSFIDLE中运行此代码，重定向uri为“”，则一切似乎都很正常。有人能向我解释一下这一点/如何将重定向URI与访问令牌结合使用吗？提前谢谢你

在运行此代码时，您是否遇到任何JS错误？@MichaelThelin不，我没有遇到任何错误。它只是直接带我去做，而不是去做我想做的事情。我想知道它是否适用于不是我本地服务器的真实域名？@MichaelThelin在用户授予访问权限后，它只需要让我访问，而不执行其中的内容。这是一个循环，因为我已经在本地主机上了。有没有更简单的方法来获取访问令牌？通过代码调试之后，window.addEventListener（“message”，function（event）{..}）方法（我相信它从响应URL中提取访问令牌）似乎不起作用，因为如果我在第一行中抛出一个警报（“test”），什么也不会发生。另外，在JSFIDLE示例中，窗口关闭，但在我的示例中，窗口保持打开状态，并在该窗口内重定向window@MichaelThelin在我同意让应用程序访问我的spotify数据后，我可以在窗口的响应url中看到访问令牌。我想我在提取和使用它时遇到了麻烦

<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>