Parse.com Facebook Login with Ionic Framework

I have a problem with an Ionic Framework app that uses Parse.com’s Facebook Login.

I have followed the instructions on the Parse.com website (https://parse.com/docs/js_guide#fbusers-setup) and have had no luck, spent the entire day on it today.

The code I have in my app.js

Parse.initialize('xxxxxx', 'xxxxx');
window.fbAsyncInit = function() {
//     FB.init({
//   appId      : 'xxxxxxxx',
//   status     : true,
//   xfbml      : true,
//   version    : 'v2.0'
// });
Parse.FacebookUtils.init({
  appId: 'xxxxxx',
  cookie: true,
  status: true,
  useCachedDialogs: false,
  logging: true,
  oauth: true
});
};

(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 = "http://connect.facebook.net/en_US/all.js";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

var currentUser = Parse.User.current();
$rootScope.user = null;
$rootScope.loggedIn = false;
if (currentUser) {
$rootScope.user = currentUser;
$rootScope.loggedIn = true;
}
$rootScope.userActionText = $rootScope.loggedIn ? 'Sign out' : 'Create account';
});

The settings I have on the FB app:

Basic Settings: https://www.dropbox.com/s/3c6vib6i323bbvf/Basic.png?dl=0

Advanced Settings: https://www.dropbox.com/s/f5q3rgh7v014ohf/Advanced.png?dl=0

I use the iOS Simulator and ran the app on the device. After tapping “Login with Facebook” it goes to a “browser” type of screen and shows the following error:

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 have tried:

  1. Every single Google result with the error message and relevant results
  2. Adding in channel URL’s hosting on myapp.parseapp.com/channel.html
  3. Using the FB.init method that is commented out
  4. Changing up the FB App settings from localhost to a online domain
  5. Different variations of the init key:val

Does anyone have experience with Parse.com and Ionic Framework who could shed some light on what I can do to solve this problem?

I bet on wrong cookie domian. Never tried parser or fb login but had some painful days trying rest auth with some server and solved it by setting cookies over ipCookie.

Are you able to check your cookies settings?

Hi BioPhoton,

Thanks for your reply, however I’m not sure what you mean. Where do I check this in an Ionic project?

Appreciate the help!

Couple of things will probably need to change on the FB App settings page;

  1. You can’t set the Website and Mobile Site URL to localhost (this is confirmed by this bug report: https://developers.facebook.com/bugs/430342230452053/)
  2. You will most likely need to fill in the App Domains field.

So how do you get around the fact that Facebook don’t want you allow you to test locally? Set up your hosts file so Facebook thinks you’re using a real website. For example you could set up your hosts file such that a url like http://local.myawesomeapp.com points to localhost. You’d then set the App Domains field to “local.myawesomeapp.com” and the Website and Mobile Site URL fields to “http://local.myawesomeapp.com:8080” (or whatever port you were using)

I’m not saying this will solve your problem but these are the basics I think need to be covered off in order to rule out any issues on the FB App settings.

1 Like

You can check this in your browsers debug panel -> f.e. Firebug

@slashwhatever good advice!

I’ve set my mobile URL to http://localhost:8100 and the website URL as my actual domain, that works for me.