SoundCloud：callback.html 弹出窗口未关闭答案

【问题标题】：SoundCloud: callback.html popup doesn't closeSoundCloud：callback.html 弹出窗口未关闭
【发布时间】：2015-12-11 21:08:21
【问题描述】：

我已经注册了我的 SoundCloud 应用程序。

我正在尝试使用“callback.html”API 实现 SoundCloud JS 示例代码 https://developers.soundcloud.com/docs/api/sdks#authentication http://connect.soundcloud.com/examples/recording.html

当我上传录音时，我会弹出授权登录弹出窗口。
登录后，弹出窗口显示“此弹出窗口应自动关闭...”
但是弹出窗口没有关闭。
而且录音没有上传。

我很肯定 SC.initialize 具有正确的“clientID”，并且从我的目录中正确引用了“callback.html”。
我错过了什么吗？也许是“客户机密”？

SC.initialize({
        client_id: "xxxxxxxxxxxxxxxxxxxxxx",
        redirect_uri: "http://www.example.com/callback.html"
      });

一次（侥幸）而不是正常的弹出消息“这应该关闭”，消息说“502 Bad Gateway”。但我无法重现此消息。

【问题讨论】：

您是否尝试在弹出窗口中打开开发人员工具以查看控制台输出？（例如，在 Chrome 中按 Ctrl+Shift+I）。我的测试页面在 HTTP 上，我的回调页面在 HTTPS 上，我可以重现您的问题。输出控制台显示... SecurityError ... Protocols must match.
如果是这种情况，您可以通过使用 --disable-web-security 选项重新启动 Chrome 来绕过此错误（用于测试目的）。
我真的很想回答这个问题 - 我什至无法在他们的 API 文档中获得基本示例。弹出窗口只是挂起。我在弹出控制台上看不到任何错误，所以我不知道发生了什么。我的凭据（clientId、redirectUri 等）都配置正确，但没有运气。

标签： authentication soundcloud

【解决方案1】：

SoundCloud 的示例代码已损坏。

来自 SoundCloud 的callback.html

<body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">

这就是我让它工作的方式：

<body onload="window.setTimeout(window.opener.SC.connectCallback, 1)">

SoundCloud 的 connectCallback 使用 this.location 收集 OAuth 访问令牌。如果您在window.opener 上设置超时，则在connectCallback 内部this 将引用您应用程序的window，并且该位置将是您的主页。而在window 上设置它会将this 绑定到回调弹出窗口，而this.location 将在查询参数中包含访问令牌。

【讨论】：

【解决方案2】：

我也遇到了同样的问题，找到了解决办法，如果你把callback.html改成下面两个选项，就可以了-

<!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="text-align: center;">This popup should automatically close in a few seconds</b>
    <script type="text/javascript">
        window.opener.SC.connectCallback.call(this);
    </script>
  </body>
</html>

或者

<!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="setTimeout(window.opener.SC.connectCallback)">
    <b style="text-align: center;">This popup should automatically close in a few seconds</b>
  </body>
</html>

【讨论】：