Given URL is not allowed by the Application configuration.

[SeanReece]

Hey There,

I've got angular-easyfb integrated into a basic app with a button that calls ezfb.login. I'm running on localhost and I'm getting the following error message on page load, and when the login button is clicked (in a popup).

Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

I understand that this is returned by Facebook because I supposedly have the wrong Web URL but I can't seem to get it to work no matter what I set it to.

After trying localhost in the Facebook App settings with no luck I set example.com to forward to 127.0.0.1 in my hosts file and set my Facebook App domain to example.com and the web url to http://example.com/www/index.html

Still nothing no matter how much I tweak the url in the Facebook app settings.

Anyone else run into this?

[pc035860]

How about http://eugene17.com/2011/03/13/testing-your-facebook-app-in-your-localhost/ ?

[SeanReece]

Hey @pc035860, Thanks for the quick reply!

So I switched to localhost.local and I'm still getting the same error but I now have a new error...

Error in event handler for (unknown): Blocked a frame with origin "http://static.ak.facebook.com" from accessing a cross-origin frame.

I've tried a whole bunch of combinations for the Site URL with/without trailing slashes, with/without port. All with the same result. It's almost as if Facebook is ignoring this field... it's driving me insane.

I should probably note that I'm trying to set this up in a Cordova/Ionic app but I want to get it working in the browser first before I start messing with the Cordova-Facebook-Plugin. I've tried to show all the details in this screenshot...

[lrettig]

angular-easyfb works fine for me in the browser while developing but I always get the same error when running on iOS:

Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

Note that other facebook plugins work for me on iOS. I only get this error from angular-easyfb. I tried adding all of the candidates I could find to the "Valid OAuth Redirect URLs" in my app's settings in Facebook:

Adding my external IP address, and the IP address on my local network didn't help.

Other things that didn't work:

• changing not just the "Valid OAuth Redirect URLs" but also the "App Domains" and "Site URL" setting on Facebook
• enabling Client OAuth Login, Web OAuth Login, Native or desktop app?, and Embedded Browser OAuth Login in Facebook
• adding iOS as a platform to the app in Facebook and making sure the bundle ID matches
• installing, uninstalling, reinstalling https://github.com/Wizcorp/phonegap-facebook-plugin plugin and following setup and troubleshooting instructions for iOS
• compiling and running in Xcode doesn't help

Basically, I'm out of ideas. I have to give up on this plugin unless you can suggest something I'm missing.

Thanks!

[pc035860]

Hi @lrettig,

I have no experience on cordova/ionic development, though I really want to solve the issue... It seems that the issue has been around there for a while and no one actually solve it?

https://github.com/Wizcorp/phonegap-facebook-plugin/issues/419 https://github.com/Ciul/angular-facebook/issues/79

As far as I know, cordova's facebook plugin provides a different set of API comparing to FB JS SDK, so angular-easyfb would not work on it unless your platform is web, which also backed by official FB JS SDK.

Maybe there's some way that I can bake in the cordova facebook plugin support, but I'll have to do some research I guess.

[lrettig]

Hi @pc035860 thanks so much for responding--you're right, this trouble is almost definitely being caused by cordova/ionic so perhaps this "issue" rightly belongs on that side.

I have not been able to find a single library which works both in web browsers (in my case, for this Ionic project, I use a web browser for development work) and on iOS/Android inside cordova. The facebookConnectPlugin works on the native platforms while Facebook's Javascript SDK works in the web browser, but neither works on the other platform, so for now I'm taking a hybrid approach (a bit like the one described here: https://github.com/Ciul/angular-facebook/issues/79#issuecomment-58820168).

It would be really wonderful to have a single reliable Facebook library that provides the following minimum features:

• Native SDK on iOS and Android - rather than an in-app browser experience which requires the user to authenticate again, even if they're already authenticated on their phone.
• Works out of the box in a web browser and on iOS and Android (at minimum) via Cordova.

For the record, in addition to angular-easyfb I've tried all of the following and none of them support even these minimum requirements:

• Facebook JS SDK (produces "Given URL not allowed" error on iOS)
• facebookConnectPlugin (https://github.com/Wizcorp/phonegap-facebook-plugin) (doesn't work in browser since cordova plugins not available there and "cordova" itself isn't available)
• angular encapsulation of the above (https://github.com/dunksmith/facebookConnectPlugin-angular)
• OpenFB (https://github.com/ccoenraets/OpenFB) (uses in-app browser)
• http://ngcordova.com/docs/plugins/oauth/ (does not work in browsers)

Some others that I haven't played with extensively:

• https://github.com/GoDisco/ngFacebook
• https://github.com/jjsee/facebook-connect-plugin-parse-phonegap-ionic “a working example"
• https://github.com/ajeeshpu/phonegap-native-fb-ionic

If I've missed something, please let me know!

[pc035860]

Hi @lrettig

I did some study on Ionic & Cordova this weekend. And I find out that facebookConnectPlugin actually works in normal Cordova apps but not in current Ionic apps when running in the browser.

When Ionic serving the app in the web browser, it strips off cordova.js from the app. So there's no cordova instance in the javascript context when running in the browser, which causes the malfunction of facebookConnectPlugin.js.

So I came up with a gist that might solve the issue. If the issue is solved with the gist(by replacing the one in the plugin), the angular encapsulation of facebookConnectPlugin.js might be the best choice for you.

[lrettig]

Thanks for looking into this @pc035860 -- I came to a similar conclusion. None of the existing Facebook integration modules did exactly what I needed, so I ended up putting together a new Angular module that encapsulates both facebookConnectPlugin and the native Facebook Javascript SDK. I'll post it here in a bit!

[marcussaad]

@lrettig I'm on the same boat as you. Will kindly appreciate if you could share it when you're done :+1: (or if you need help, let me know)

[lrettig]

Hi @pc035860 @marcussaad et al: I ended up writing my own module which wraps the existing facebookConnectPlugin to solve the issues described above. It works seamlessly on both iOS and a desktop web browser. (I have not tested it on Android but I have no reason to believe it wouldn't work there too.) You can find the code here: https://github.com/lrettig/allPlatformFacebookConnect/

There are various tricks that you can do inside your application, such as monitoring for deviceReady or the presence of window.FB, to work around these issues and make sure the right libraries are in place. The idea of this library is to automate all of that so you literally don't have to think about it inside the application.

One of the challenges with the Facebook JS code (when running in the browser) is that, depending on how the script is loaded, it may be loaded asynchronously and may not be ready when you first attempt to call into the SDK. In my script, for getLoginStatus I work around this by waiting until the SDK is initialized. This should be the case for all of the methods, but I haven't done that part yet.

It's a work in progress and I welcome advice or pull requests!

[marcussaad]

@lrettig, thanks a lot for your effort. I've recently got my code to work doing most of what you said (waitaing for ionic ready event, checking for properties on document, etc). I'll look into your solution and see if you approached it in a more "fashionable" way. What I did looks hackish (at least not good looking). Once again, thank you for taking your time to reply.

[lrettig]

@marcussaad Of course! I'm afraid my solution is a bit "hackish" too (not sure there's a better way around this situation at the moment), with the hope that hiding the hacks inside a clean module makes it a bit more fashionable!