Question

我正在尝试构建一个允许用户提交歌曲以进行宣传的表单。基础是用户选择一到三个平台; soundcloud，youtube或spotify。当他们选择他们希望展示的平台时，他们必须在这些平台上关注/订阅。

到目前为止，我已经设法构建表单，并且只有在选中相应的复选框时才会显示“Connect [platform]”按钮，但我对Soundcloud的API调用有困难。

我正在使用JavaScript SDK，并在html文件中包含预建命令，我通过浏览器激活该文件。 html看起来像这样：

<!doctype html>
    <html>
        <head>
            <title>Connect Soundcloud</title>
    <script src="https://connect.soundcloud.com/sdk.js"></script>
    <button id="scbutton" onclick="scconnectgo()">Connect Soundcloud</button>
    <script src="https://connect.soundcloud.com/sdk/sdk-3.0.0.js"></script>
    <script>
    function scconnectgo(){
    document.getElementById("scbutton").value="soundcloud connected";
    SC.initialize({
    client_id: 'example_client_id',
      redirect_uri: 'http://djr.kissr.com/callback.html'
      });
// initiate auth popup
    SC.connect().then(function() {
    return SC.get('/me');
    }).then(function(me) {
    alert('Hello, ' + me.username);
    });
    }
    </script>
    </script>
  </head>
<body>
<div id="target"></div>
</body>
</html>

当我将此文件加载到浏览器中时，按钮显示“connect soundcloud”，这就是我想要的。单击该按钮运行脚本时，将显示soundcloud connect弹出窗口。到目前为止一切都很好，但是当我输入我的详细信息后点击连接时，弹出窗口不会消失。我托管的callback.html文件似乎不起作用，我只是将其复制并粘贴到文本文件中并将其上传到我的KISSr dropbox文件夹。该页面加载并显示“此弹出窗口将关闭......”但它没有。

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

窗口保持打开状态，我不知道脚本是否成功。

有什么建议吗？我之前见过一些问题，但遗憾的是他们都没有回答我的问题。我真的很感激这方面的一些帮助。

编辑：我刚刚在Chrome中使用了'inspect'功能，发现协议不匹配。错误是：“Uncaught SecurityError：阻止具有原点”http://djr.kissr.com“的帧访问具有原点”null“的帧。请求访问的帧具有”http“协议，被访问的帧具有协议“文件”。协议必须匹配。“我不知道这是否有帮助。

提前致谢。

Answer 1

这就是我在我正在进行的项目中为我工作的。

我的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>
    <b style="text-align: center;">This popup...</b>
    <script type="text/javascript">
        var sURL = window.document.URL.toString();
        window.opener.scUser.parseToken(sURL);
        window.close();
    </script>
  </body>
</html>

scUser是一个javascript对象，其解析方法为“parseToken” URL，剥离并利用令牌（如果存在）。

Answer 2

这是我的工作登录流程：

我使用Ajax远程调用php函数来检索 url我将用来创建一个我自己的登录窗口

public function getAuthConnect() {
  $result = "https://soundcloud.com/connect?"
    . "client_id=" . $this->getClientId(false)
    . "&redirect_uri=" . urlencode($this->getCallback())
    . "&response_type=code"
    . "&consumer_key=" . $this->getClientSecret();
  return $result;
}

这个函数给我一个这样的网址：

https://soundcloud.com/connect?client_id=MY_CLIENT_ID&redirect_uri=MY_CALLBACK_URL&response_type=code&consumer_key=MY_CLIENT_SECRET_CODE

MY_CALLBACK_URL必须与您在soundcloud为您的应用输入的身份验证重定向URI相匹配。

然后我创建并打开我自己的登录弹出窗口其中“data”是上面返回的URL

var myWindow = window.open(
  data, "myWindow", "width=" + w + ", height=" 
  + h + ", top=" + top + ", left=" + left);

提交表单为

2 个答案: