Question

我刚刚开始使用Soundcloud API，我遇到了身份验证问题。我用Yeoman构建了我的AngularJS项目，并使用grunt server在浏览器中预览我的项目

http://localhost:9000/#/

这是我的AngularJS应用的主页index.html的网址。我添加了以下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的视图

http://localhost:9000/#/callback

我想也许会发现它。我开始认为redirect_uri必须托管在实际的服务器上。我不确定grunt的服务器是否有资格作为可以在本地任何地方提供文件的服务器。

关于 redirect_uri 的内容的任何想法，如果知道我的 callback.html 文件位于中我的AngularJS应用的app 目录？

更新1

我尝试了不同的网址/ 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文件中看到的那样，第4行是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%2Fcallbac‌k.html&response_type=code_and_token&scope=non-expiring&display=popup

然后我按连接授权访问权限，然后浏览器重定向到位于callback.html的{{1}}，但附带代码，状态和访问令牌就像这样

http://localhost:9000/callback.html

一旦该页面加载，我就会在Dev Tools控制台中看到错误

http://localhost:9000/callback.html?code=508aa0dd5ce3d0f4254157a487fc4826&st‌ate=SoundCloud_Dialog_c3241#access_token=1-46482-7907892-1328d9e0fc383baf&scope=n‌on-expiring

这是正常的吗？

另外，我不希望将应用重定向回Uncaught TypeError: Cannot read property 'SC' of null callback.html，因为我的应用基于我的http://localhost:9000/callback.html或index.html网址。 如何让它回归 http://localhost:9000/#/ ？

我开始想也许是因为它无法访问SoundCloud SDK所以我放入了

http://localhost:9000/#/

<script src="http://connect.soundcloud.com/sdk.js"></script>

<head>中的

，但错误仍然存在。

更新3：更新2问题已解决

所以我在Firefox中尝试过，它工作正常。实际弹出一个弹出窗口，要求我登录/连接。这样做之后，我在弹出窗口中调用了callback.html，然后它按预期消失了。我的主应用程序窗口仍然保留，但用户身份验它在Chrome中不起作用的原因是因为弹出窗口一直默默地被阻止，因此Chrome实际上会离开我的应用程序，转到登录/连接页面，在我按下连接后它将转到callback.html 。我猜因为它是一个窗口选项卡，它会像代码指示的那样消失。对不起我的错误解释。仍然是JS和SC API的初学者。

Answer 1

对于回调URI，他们肯定需要匹配应用设置页面。最有可能使用URI中的#不起作用，但redirect_uri文件所需要的只是对window.opener.SC.connectCallback的调用，因此它不需要成为您的一部分JS app结构。

如果我运行我的grunt本地服务器，Soundcloud redirect_uri应该是什么？

更新1

更新2

更新3：更新2问题已解决

1 个答案: