3

我刚刚开始使用 Soundcloud API，但在身份验证方面遇到了麻烦。我已经用 Yeoman 构建了我的 AngularJS 项目，并使用grunt server它在浏览器中预览我的项目

http://localhost:9000/#/

那是index.html我的 AngularJS 应用程序主页的 URL。我添加了以下callback.html文件（在 Soundcloud API 文档中找到）

<!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 文件位于 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文件中看到的，第 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.htmlSC.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位于http://localhost:9000/callback.html但附加了代码、状态和访问令牌的位置，就像这样

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

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

Uncaught TypeError: Cannot read property 'SC' of null

这正常吗？

此外，我不希望应用程序被重定向回callback.htmlat，http://localhost:9000/callback.html因为我的应用程序基于 myindex.html或http://localhost:9000/#/URL。我如何让它回到 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 的初学者。

4

1 回答 1

3

对于回调 URI，它们肯定需要匹配应用程序设置页面。很可能#在 URI 中使用 是行不通的，但是该redirect_uri文件只需要调用window.opener.SC.connectCallback，因此它不需要成为您的 JS 应用程序结构的一部分。

于 2013-07-24T13:10:32.603 回答