redirect_uri and how to host callback.html on SoundCloud? - soundcloud

I am trying to access Soundcloud from a local HTML page on my laptop. I am stuck at the part of hosting "callback.html" as a redirect_uri. The script I am trying to run is the basic Authenication JavaScript from the Soundcloud documentation page:
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
// initialize client with app credentials
SC.initialize({
client_id: 'my_client_id',
redirect_uri: 'http://127.0.0.1/Users/Maria/Documents/SoundcloudClient/callback.html'
});
// initiate auth popup
SC.connect(function() {
SC.get('/me', function(me) {
alert('Hello, ' + me.username);
});
});
</script>
This script gets me to the connect pop-up when I launch the page in Chrome and Firefox.
But, once I have logged in as a Soundcloud user, I get the following error:
Oops! Google Chrome could not connect to 127.0.0.1
If I change my redirect_uri to localhost I get the same error.
If I try:
files:///C:/Users/Maria/Documents/SoundcloudThinClient/callback.html
I get a similar error.
I also tried:
ocalhost:3000
and:
localhost:8080
even though I'm not sure what would be listening on those ports.
So, basically, I'm asking what path do I put for callback.html in order for this to work?
I confess I don't know how the redirct_uri actually functions. I looked at the Oauth pages for it, but I don't understand them. I am beginning to think that I can't simply create an HTML page, paste the JavaScript, create a callback.html file and have this work, even though the SC documentation seems to say that this is possible. If so, what steps am I missing?

I am beginning to attempt this. I believe you have to go to the developer site and sign up as having an app. The redirect uri is asked for and the form gives you an API key you can use in your app.
I'm using drupal so, perhaps adding the oath module and using Php to add the api key might work well.

I had the same problem and I think I solved it.
Morning-after-edit: I posted this dead-tired after working towards a solution through the night. Now, the day after, I realize that you were speaking about the general problem, whereof I face a very particular instance. The following only applies directly to registering soundcloudlabs' soundcloud-group-recorder: https://github.com/soundcloudlabs/soundcloud-group-recorder. There is probably a more general principle lurking behind there, though:
First: yes, you do have to register the app as your own at Soundcloud. At least I presumed so. And doing that, you must register correctly where on your server you will place the callback.html file. Take the ClientID assigned to your app and use that in the API intialize procedure.
Now, I'm a novice and know very little coding. But I started looking around in the main file, application.js.
At the top of the file there are two instances of client_id and redirect_uri each. I'm not sure if that serves a purpose or if one is technically superfluous. Through trial and error I found out that replacing the second instance of each with my own data worked.
Then there is groupId and groupUrl, both of which should contain your info, within quotation marks.
After a lot of trial and error, still having trouble getting the thing to run, I looked around and saw that, whereas early in the file, client_id was hooked within SC.initialize, redirect_uri was not. Under the line:
client_id: CLIENT_ID
I added:
redirect_uri: REDIRECT_URI
– with a customary comma in between. And that's it. It runs.

Related

Facebook Send Dialog in iframe doesn't seem to work

I am having issues using the Facebook send dialog. If I open this window in a new browser, everything works:
https://www.facebook.com/dialog/send
?app_id=[My_App_Id]
&redirect_uri=https%3A%2F%2Fwww.example.com%2Fcallback
&link=https%3A%2F%2Fexample.com%2Fimage.jpg
So by doing that, I am able to send a message just fine. However, I need this to be in an iframe, which according to the send dialog documentation, this should work. So I then do this:
https://www.facebook.com/dialog/send
?app_id=[My_App_Id]
&display=iframe
&redirect_uri=https%3A%2F%2Fwww.example.com%2Fcallback
&link=https%3A%2F%2Fexample.com%2Fimage.jpg
Doing so, I get the following error:
API Error Code: 102
API Error Description: Session key invalid or no longer valid
Error Message: Iframe dialogs must be called with a session key
I find it a little strange that I can do this with a popup, but they require a session key for iframe. But even so, that isn't a problem. Because I have already gotten an access_token. So, this should work then:
https://www.facebook.com/dialog/send
?app_id=[My_App_Id]
&display=iframe
&redirect_uri=https%3A%2F%2Fwww.example.com%2Fcallback
&link=https%3A%2F%2Fexample.com%2Fimage.jpg
&access_token=[MY_OAUTH_ACCESS_TOKEN]
The access token was obtained from calling /v12.0/dialog/oauth, and I have confirmed that the access_token is valid:
However, I now get this message:
This Content Isn't Available Right Now
When this happens, it's usually because the owner only shared it with a small group of people, changed who can see it or it's been deleted.
So now this really makes no sense. I can send this link just fine if I use a popup with NO access_token present. But to set the display to iframe, I must include the token, which is fine, but it doesn't like the token for some reason?
It is also worth noting that this behaves the same way regardless if the Facebook app is in development mode or live mode. In development mode, all of the permissions should work for my test users. So it seems very unlikely that this is a permissions issue?
Anybody have any insight on this at all?

How to have users 'reconnect' with soundcloud on each page reload?

I'm using the Javascript SDK inside a node.js (Express) App.
Connecting Users works fine, but the connection does not persist between page reloads.
Is this the default behaviour, or is the User supposed to stay connected in new requests?
Do I have to use OAuth token authentication and if so, how can this be done with the JS-SDK?
Inside the "Permission"-Popup, Users are already logged in with soundlcoud, though.
(just have to click the "connect" button each time)
Figured I'd share my answer for those who are unsatisfied with the current answers for automated oauth:
Retrieving access_token:
I had to define get and set cookie functions and then I use the functions to set and retrieve a function holding the access token. I'm not going to give these functions for conciseness but you can easily find them with a google search. I then use this line of code to get the SC access token (once the user has authenticated for the first time)
SC.accessToken()
Setting token:
So this is kind of just an elephant in the room in my opinion that for some reason no one has mentioned. How in the **** do you connect w/ SC using the access token? Do you set it as oauth param? On each call pass it? Well, after experimenting with putting the parameter in every single place I could think, I found out you have to do something like this:
SC.initialize({
client_id: '[removed for security reasons]',
client_secret: '[removed for security reasons]',
redirect_uri: '[removed for security reasons]',
access_token: getCookie("sc_lm2"),
scope: 'non-expiring'
});
//Where "sc_lm2" is the name of my cookie
Hope the helps! Took me a while to figure this out for such a simple thing
EDIT
Using PHP and Wordpress:
$json = wp_remote_get("http://api.soundcloud.com/users/[user_id]/tracks.json?client_id=[client_id]");
$soundcloudData = json_decode($json['body'],true);
(substitue cURL functionality if you're not using Wordpress). #krafty I assume you would just change the endpoint from "/tracks" to "/users" but I can't say I have ever really needed to grab anything but tracks using the Soundcloud API. Hope this helps, though I'm not sure I fully understand what it is that you are trying to accomplish (or rather, how exactly you're going about it) - are you trying to allow user logins? If you want to explain fully what you're trying to accomplish and the steps you're taking I'd be happy to take a crack at it.
Yep, this is the way to do it, officially. :)
For the Next SoundCloud site, we store the token in localStorage (until the user logs out, of course). In each AJAX request to the API from the front end, we put the oauth token in a request header:
jqXHR.setRequestHeader('Authorization', 'OAuth ' + the_oauth_token);

Trying to get OAuth dialog to work

I am at this step in getting my app started in the documentation:
https://developers.facebook.com/docs/appsonfacebook/tutorial/#auth
In there is a code block that (supposedly) forwards the user to a request dialog asking permission to access certain bit of information about them. I've placed this code block into the PHP script that my canvas URL points to, and changed the $app_id and $canvas_page to my application ID and canvas URL respectively. Instead of getting the expected dialog, I receive this following error from facebook:
"An error occurred. Please try again later."
No other details about the error are present. I've tried some variations of the script, and have even tried loading up this URL directly just to see if that would work. Note that I've replaced YOUR_APP_ID and YOUR_CANVAS_PAGE with the appropriate values and made sure that spelling and/or punctuation are correct:
https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGE&scope=email,read_stream
For the redirect URL, I've tried prepending it with http://, https://, and no prefix at all. All with the same result.
My question: is the example in the documentation broken, or is the oauth link provided in the documentation currently down? The vague nature of the error is somewhat frustrating since I can't tell if it's something I'm doing wrong or if it's facebook's oauth function that's at fault.
So, the problem was that instead of using the numeric application ID that facebook assigned for me when I originally created the app as the YOUR_APP_ID parameter in the OAuth URL, I was using the application namespace string. Facebook didn't understand this sort of request, and returned the generic error message.
Once I used the numeric app ID, the OAuth dialog popped up to ask permission to access my account, as expected.

Codeigniter Facebook app POST method AND query_string

I have a toy facebook app I'm playing with so I can understand how it all works. It's fine if you go the the app like this: http://apps.facebook.com/pushup-challenge/ (and connect it). But if you then go to it from your facebook page, FB uses the URL http://apps.facebook.com/pushup-challenge/?ref=bookmarks.
In my log file, I see that FB is POSTing the data and including the /?ref=bookmarks to it's call to my codeigniter system. This is causing it to either say "invalid URI parameters" or give me a 404, depending on if I've edited the system/core/URI.php file to add rawurlencode() to a particular call.
I've tried using mod_rewrite to get rid of the query_string, too, but since it's POSTing, it doesn't appear to be working (though I'm not exactly sure why).
Has anyone else run into this? How did you fix it?
Thanks in advance,
Hans
try $config['uri_protocol'] = “PATH_INFO”; and set enable_query_strings = TRUE
or
set
$config['permitted_uri_chars'] = 'a-z 0-9~%.:_\-?=';
in config.php
Because it isn't calling your file by name (just ?ref=bookmarks) the server runs thru the standard default files: index.htm, index.html, index.asp. Because you need to accept a POST, you need a server that allows POSTs to htm & html if you choose to use those. Index.asp will accept POSTs on most servers, and that works for me.
SOLUTION: Add a file (index.asp), that calls the real app that you named in the App settings.

FB.getLoginStatus not calling its callback

The title really says it all. Under some (undetermined) conditions FB.getLoginStatus() just stops working and won't invoke the callback I gave it. The only interesting clues I've found are
FB.Auth._loadState is stuck on "loading" -- whatever is supposed to make it click over to "loaded" isn't happening
slight delays like putting in alert() calls tend to make it start working
Any hints at all about even how to investigate this welcome.
This usually happens for me when I am running the page under a different domain from what has been registered in Facebook. Typically this is when I am developing locally.
If you are running locally, you'll have to set up a local web server and then modify your hosts file to point the the registered domain to 127.0.0.1 in order to test on your local machine. Don forget to remove that line from the hosts file when you want to test it on the server.
According to:
https://developers.facebook.com/bugs/240058389381072
You cannot put your application under sandbox mode, or else it won't work. Go into your app settings, advanced, and switch it. This stumped me for a couple hours until I happened upon the bug report.
I had similar problem with FB API. It turned out, that my Facebook App was misconfigured. Please make sure that this is not the case for you. My problem was that my "Site URL" param in FB application was pointing to https, but I was using http protocol for development. Any call against FB api after FB.init was not calling my callback functions. So the first thing to do should be to double check App config.
Now, if some reason you depend on FB api but you wish to have a fallback option in case it;s inoperative - workaround with timer should be ok for you. Just set up a timer and disable it if FB Api gives you proper response. If not - fallback to some custom function which will perform some additional logic.
function callFbApi() {
var timeoutHandler = setTimeout(function() { requestFailed(); }, 1000);
function requestFailed() {
// When this happens, it means that FB API was unresponsive
doSomeFallbackWork();
alert('hey, FB API does not work!');
}
FB.getLoginStatus(function(response) {
clearTimeout(timeoutHandler); // This will clear the timeout in case of proper FB call
doSomeUsualWorkAfterFbReplies();
return false;
}, true);
}
If your application is in sandbox mode, Facebook acts as if your application is invisible to anyone who is not listed as an application developer. If you're not logged in, then it would stand to reason that your app is now invisible.
The callback will only fire if you're initializing with a visible application. Otherwise the following response is returned:
<span>Application Error: There was a problem getting data for the application you requested. The application may not be valid, or there may be a temporary glitch. Please try again later. </span>
For more info please see my comment on this bug ticket:
https://developers.facebook.com/bugs/240058389381072
Maybe you are using the asynchronous call. The same thing happened when I called FB.init with window.fbAsyncInit. All I did was delay the FB.getLoginStatus with a setTimeout function
window.setTimeout(checkLogStatus, 1000);
function checkLogStatus(){
alert("check");
// fetch the status on load
FB.getLoginStatus(handleSessionResponse);
}
It seemed to work after that
On the new version of the Developer app, you have to make sure to have put the correct URL you are using to access the application in the Website field under the
Select how your app integrates with Facebook
section.
Make sure the protocol is HTTPS and not HTTP.
I had a similar problem. The site worked every time when I was opening the browser, but fails when I tried to reload.
The cause was the missing "www" on the site name on Facebook configurations. Note that putting "www" (like www.yoursite.com) works on both situations (yoursite.com or www.yoursite.com).
As others have posted, you must be accessing your site at the same URL that facebook expects. For example if facebook has a callback "example.com" but you're browser has "www.example.com", that can cause this problem.
In addition, if third-party cookies are not allowed by your browser, you may also see this problem. Or you may see the callback erroneously reporting the user is not connected.
Just posting a situation I had were calling FB.getLoginStatus got absolutely no response.
My application is designed to run in a tab, and I only entered the Page Tab URLs on the app admin page, and not the App On Facebook (i.e. Canvas) URLs. The tab loads perfectly, but any calls to the FB JS SDK provoke no response.
In Facebook App Settings, go to Client OAuth Settings, look at Valid OAuth redirect URIs
Make sure you have listed all URIs which are the domains from which Facebook SDK is being invoked. For example:
I develop at localhost:5000 and deploy to Heroku. Notice the format: http://domain.name/