2

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.

enter image description here

enter image description here

Steven Matthews
  • 9,705
  • 45
  • 126
  • 232
  • You need to do what the message says … input the correct information in your settings in the app dashboard. (Hint: The location of those settings has changed, they are now under Products->Facebook Login. If the latter isn’t shown, you have to add it first.) – CBroe Jul 21 '16 at 07:58
  • The information is there though. I have http://localhost:8000 in that section. – Steven Matthews Jul 21 '16 at 12:40
  • I added a picture of the relevant screen. – Steven Matthews Jul 21 '16 at 12:44
  • `http://localhost:8000/` is presumably not the full value of the `redirect_uri` parameter that is used in the login dialog call. – CBroe Jul 21 '16 at 13:10
  • It is in this case. It's all in a single page PhoneGap app, and it all launches from http://localhost:8000 – Steven Matthews Jul 21 '16 at 22:12

4 Answers4

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.

Community
  • 1
  • 1
Julius Delfino
  • 991
  • 10
  • 27
  • It looks like this: https://www.facebook.com/dialog/oauth?api_key={FB_APP_ID}&app_id={FB_APP_ID}&client_id={FB_APP_ID}&display=popup&domain=localhost&origin=1&redirect_uri=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df11b73fd18e512c%26origin%3Dhttp%253A%252F%252Flocalhost%253A8000%252Ffb572a6b00d4b%26relation%3Dopener%26transport%3Dpostmessage%26frame%3Df2a7da35ea99ccc&response_type=token%2Csigned_request&scope=user_likes&sdk=joey – Steven Matthews Jul 30 '16 at 19:33
  • I was able to replicate your issue from this link. The problem seems to be the usage of `static.ak.fbcdn.net/connect/xd_proxy.php`. When I replaced this with `http://staticxx.facebook.com/connect/xd_arbiter/r/RYqXvcNXPI-.js?version=42`, it works fine for me. I got this from using direct script embed of FB sdk. Allow me to edit my post for more details on this. – Julius Delfino Jul 31 '16 at 08:18
  • Is this just from an update to the SDK or something then? – Steven Matthews Jul 31 '16 at 18:12
  • A few links such as [this](https://conference.hitb.org/hitbsecconf2013ams/materials/D2T1%20-%20Andrey%20Labunets%20and%20Egor%20Homakov%20-%20OAuth%202.0%20and%20the%20Road%20to%20XSS.pdf) and [this](https://developers.facebook.com/bugs/255414447897904/) are saying that xd_proxy.php has been replaced with xd_arbiter. – Julius Delfino Jul 31 '16 at 18:57
  • Yep, this was the answer. Thank you so much Julio! I'm sad I can't award you the bounty because it expired :( – Steven Matthews Jul 31 '16 at 20:39
  • That's really weird that the change was listed as having happened in 2012, but my application worked until recently. Very odd behavior. – Steven Matthews Jul 31 '16 at 20:43
  • No worries Andrew! Maybe xd_proxy was still ok despite the unofficial change in 2012, until you had this issue. – Julius Delfino Jul 31 '16 at 20:53
  • this is my redirect url "redirect_uri=http://staticxx.facebook.com/connect/xd_arbiter/r/nj6HSwERpgK.js?Fversion?D42%23cb?Df2796c364b2448c%26domain?D127.0.0.1%26origin?Dhttp%253A%252F%252F127.0.0.1%252Ff3ec11275bea544%26relation?Dopener%26frame?Df8ecb85c7b4f4" what should i put in the valid oauth redirect url ? – Youssef Boudaya Apr 30 '18 at 10:56
0

The Javascript API wont work on PhoneGap for the login. Use this cordova plugin instead.

https://github.com/Wizcorp/phonegap-facebook-plugin

Danilo Kobold
  • 2,562
  • 1
  • 21
  • 31
0

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?

Community
  • 1
  • 1
Just a student
  • 10,560
  • 2
  • 41
  • 69
  • It seems like that link indicates that localhost should work. Are you thinking that maybe this was a recent change? – Steven Matthews Jul 29 '16 at 13:06
  • Personally, I think that localhost won't work, but I later found the linked question and added it in case I was wrong. Could you maybe try redirecting to say example.com (whitelisting that), seeing if that works? – Just a student Jul 31 '16 at 11:13
0

Try these things:

  1. set the URI to http://localhost/ (no port)
  2. 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.

gcoreb
  • 181
  • 5
  • 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. The first way did not work, nor did the second – Steven Matthews Jul 30 '16 at 19:31