Menu
I've followed the simple example of connecting to the SC API that's on their dev site. I've managed to get everything working on my local server but now that I've pushed it to my website it doesn't seem to be working.
The "connect to app" window pops up. I click connect. It shows my 'redirect_url' page which has:
<body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
But it seems like it is never fired.
I found one SO question about this from 2 years ago here: Javascript SDK connect() function not working in chrome
And the top answer says that there is a problem with trying to do this if you have the SC Chrome app and to try listening for a 'Storage Event' as a workaround.
My problem is that I don't have the SC app installed on chrome and never have. Also, it seems strange that this works perfectly on my local server.
Can anyone think of how moving the code to my web hosting could have killed this? Do some hosting companies block window.opener.setTimeout() for some reason or anything?
Thank in advance for the help.
733
Figured this out after what felt like hours of hopeless debugging.
Pull the callback into a script tag, like so:
<!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 should automatically close in a few seconds</b>
<script type="text/javascript">
window.opener.SC.connectCallback.call(this);
</script>
</body>
</html>
It's a little weird because the function expects to be called on window, and not SC, hence the call to call().
The other part of it is that the this needs to refer to the popup window's window object, since that's the one with the window.location.search set. The URL looks like this:
http://localhost:8080/callback.html?code=<CODE>&state=SoundCloud_Dialog_ca4d6#access_token=<ACCESS TOKEN>&scope=non-expiring
And if you look at window.opener.SC.connectCallback, it looks like this:
function (){r.notifyDialog(this.location)}
So, that this needs to be the popup window, not the original, parent window.
If you pass the connectCallback function into the parent window's setTimeout, it gets called with a this set to the parent window's window object, which doesn't have the window.location.search query parameters (auth tokens).
Hopefully, that makes sense. At the very least, it should solve your problem.
Also, if you insist on using the body onload property, you can just change it to this:
<body onload="setTimeout(window.opener.SC.connectCallback)">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
