我刚刚开始使用 Soundcloud API，但在身份验证方面遇到了困难。我已经使用 Yeoman 构建了我的 AngularJS 项目并使用 grunt server在浏览器中预览我的项目
http://localhost:9000/#/
这是 index.html 的 URL这是我的 AngularJS 应用程序的主页。我添加了以下callback.html文件 ( found here at Soundcloud API docs )
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Connect with SoundCloud</title>
</head>
<body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
<b style="width: 100%; text-align: center;">This popup should automatically close in a few seconds</b>
</body>
</html>
在我的项目中 app index.html 所在的目录文件位于。此外，在非理性的绝望中，我配置了我的 AngularJS 应用程序来服务 callback.html文件作为 URL 的 View
http://localhost:9000/#/callback
我想也许会这样找到它。我开始思考redirect_uri必须托管在实际的服务器上。我不确定 grunt 的服务器是否有资格作为可以在本地以外的任何地方提供文件的服务器。
关于我的任何想法 redirect_uri 看起来就像知道我的 callback.html 文件位于 app 我的 AngularJS 应用程序的目录？
更新 1
我尝试了不同的 URL/URI 组合。
组合 1
在我的 JavaScript 中:
redirect_uri: "http://localhost:9000/#/callback"
在我的应用设置中
http://localhost:9000/#/callback.html
组合 2
在我的 JavaScript 中:
redirect_uri: "http://localhost:9000/#/callback.html"
在我的应用设置中
http://localhost:9000/#/callback.html
组合3
在我的 JavaScript 中:
redirect_uri: "http://localhost:9000/#/callback.html"
在我的应用设置中
http://localhost:9000/#/callback
此外，当我在 Chrome 中运行此命令时，我会在 Chrome 开发工具的控制台中看到此错误:
Uncaught SyntaxError: Unexpected identifier useranalyzr.js:4
正如您在我的 useranalyzr.js 中看到的那样文件第四行是 redirect_uri .
window.onload = function() {
SC.initialize({
client_id: '###################################'
redirect_uri: "http://localhost:9000/#/callback.html"
});
SC.connect(function(){
SC.put("/me/followings/12345", function(user, error) {
if(error){
alert("Error: " + error.message);
}else{
alert("You are now following " + user.username);
}
});
});
}
所以，是的，无论我尝试什么组合，我总是会遇到相同的错误。我开始认为我需要找到一种方法来让 grunt 提供静态callback.html 文件，而不会受到 AngularJS 路由的干扰。只是直接链接。
更新2
好的，我可以提供服务callback.html在http://localhost:9000/callback.html整个SC.connect授权过程就开始了。我的浏览器被重定向到
https://soundcloud.com/connect?state=SoundCloud_Dialog_c3241&client_id=####################################&redirect_uri=http%3A%2F%2Flocalhost%3A9000%2Fcallback.html&response_type=code_and_token&scope=non-expiring&display=popup
然后，我按“连接”以授权访问，然后浏览器重定向到 callback.html位于http://localhost:9000/callback.html但附加了代码、状态和访问 token ，如下所示
http://localhost:9000/callback.html?code=508aa0dd5ce3d0f4254157a487fc4826&state=SoundCloud_Dialog_c3241#access_token=1-46482-7907892-1328d9e0fc383baf&scope=non-expiring
该页面加载后，我会在开发工具控制台中看到错误
Uncaught TypeError: Cannot read property 'SC' of null
这正常吗？
此外，我不希望应用程序被重定向回 callback.html在http://localhost:9000/callback.html因为我的应用程序是基于我的 index.html ，或 http://localhost:9000/#/网址。 如何让它返回 http://localhost:9000/#/ <强>？
我开始想，也许是因为它无法访问 SoundCloud SDK，所以我添加了
<script src="http://connect.soundcloud.com/sdk.js"></script>
在 <head>的callback.html但错误仍然存在。
更新 3:更新 2 问题已解决
所以我在 Firefox 中尝试了一下，效果很好。实际上弹出了一个弹出窗口，要求我登录/连接。这样做之后，我的callback.html在弹出窗口中被调用，然后它按预期消失了。我的主应用程序窗口仍然存在，但具有用户身份验证。它在 Chrome 中不起作用的原因是因为弹出窗口一直被默默地阻止，因此 Chrome 实际上会离开我的应用程序，转到登录/连接页面，在我按下连接后，它将转到 callback.html 。我猜因为它是一个窗口选项卡，它会像代码指示的那样消失。抱歉我的解释不好。还是 JS 和 SC API 的初学者。
最佳答案
对于回调 URI，它们肯定需要与应用设置页面匹配。在 URI 中使用 # 很可能不起作用，但 redirect_uri 文件需要的只是调用 window.opener.SC.connectCallback，因此它不需要成为 JS 应用程序结构的一部分。
关于angularjs - 如果我正在运行 grunt 本地服务器，Soundcloud redirect_uri 应该是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17823505/