Error messages when trying to use the Facebook API - facebook

Question

I am getting an error message when attempting to use the Facebook API.
When I have Client OAuth Login enabled, Web OAuth Login enabled and a valid Oauth redirect URI set to http://localhost:8000/ the error I get is this when trying to log into Facebook with the correct App ID:
URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.
Is there a particular setting or thing I have to put in code to get this to work correctly?
This is the code I've got:
$(window).load(function() {
if (window.cordova.platformId == "browser") {
facebookConnectPlugin.browserInit(MYAPPIDHERE);
}
});
And this:
facebookConnectPlugin.login(["user_likes"],
function(response) {
likes();
},
function(response) {
likes();
});
}
EDIT:
Added pictures of what is in the Facebook App, as well as the URL I am navigating from.

Answer 1

You might want to check for HTTP calls made by facebookConnectPlugin and see if the redirect_uri in the query string matches the one you have in your Facebook App settings as a valid redirect URI.
It might look something like this:
https://www.facebook.com/dialog/oauth?client_id={FB_APP_ID}&redirect_uri=http://localhost:8000/
EDIT:
There seems to be an issue with the redirect_url=http://static.ak.fbcdn.net/connect/xd_proxy.php#cb=f11b73fd18e512c# being used by facebookConnectPlugin. I checked the javascript code and it is using phonegap/plugin/facebookConnectPlugin/fbsdk.js, which seems to be the culprit.
When I used direct loading of FB SDK, it uses a different redirect_url=http://staticxx.facebook.com/connect/xd_arbiter/r/RYqXvcNXPI-.js?version=42. Replacing the previous redirect_url with this one solved the issue for me. It is possible that phonegap's fbsdk.js uses an outdated script.
Bottomline: It would be better to load FB SDK directly, as mentioned here. And according to FB docs, it would look like this:
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Lastly, to enable debug logs, replace //connect.facebook.net/en_US/sdk.js to //connect.facebook.net/en_US/sdk/debug.js.

Answer 2

The Javascript API wont work on PhoneGap for the login.
Use this cordova plugin instead.
https://github.com/Wizcorp/phonegap-facebook-plugin

Answer 3

It is impossible for Facebook to redirect to a local URL. What will happen is that you redirect a user to Facebook, they login, Facebook validates this and sends them back to you. Facebook sends them to the URL you provide. The URL http://localhost:8000 is a shorthand for: connect to port 8000 on your own machine. At the point where Facebook does the redirect, localhost refers back to Facebook, not you anymore. Apparently, Facebook has blacklisted that stuff - probably for security reasons.
What you need is a public URL that Facebook can redirect to. Maybe this helps?

Answer 4

Try these things:
set the URI to http://localhost/ (no port)
put a callback at the redirectURI with a corresponding callback function. i.e., http://localhost/loginCallback
Report back with any errors, I have a feeling the 1st way will work.