Facebook login working in browser, but not on iOS simulator

Hey all!

I implemented Facebook connect using the Phonegap plugin (https://github.com/phonegap/phonegap-facebook-plugin). Everything works fine when testing the app in my browser (Chrome/Safari/FF/…), but it’s not working when I build and emulate the app on iOS.

The app loads, I click the Facebook connect button and nothing happens. The button is just not responding. It also works in Safari mobile. I basically do the following:

Facebook.getLoginStatus(function (response) {
    if (response.status != 'connected') {
      Facebook.login(function (response) {
        $session.login(response.authResponse.accessToken, null, true).then(on_success, on_error);
    } else {
      $session.login(response.authResponse.accessToken, null, true).then(on_success, on_error);

The Facebook object is dependency injected into my controller and the $session service connects to a Rails API and just returns a valid user object if login was successful. I include both these sources into my code:

<script src="js/angular-facebook.js"></script>
<script src="js/angular-facebook-phonegap.js"></script>

We’re using Ionic, v1.0.0-beta.1. Any ideas on what goes wrong?


Never used the plugin myself, but are you getting any errors in your console? Can you open up safari and inspect the simulator. Also, update the beta 4 and see if that could help.

In your config.xml, whats your access origin set to?

Thanks for your reply.

Upgraded to beta4. Nothing changed, button still not responding (and still working in the browser).

My output is the following:

philip$ tail -f platforms/ios/cordova/console.log Finished load of: file:///Users/philip/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/E9D5296A-B551-4C6F-89D2-7986AE43C401/test.app/www/index.html#/app/intro
2014-05-13 20:20:27.537 Test[32907:70b] Multi-tasking -> Device: YES, App: YES
2014-05-13 20:20:27.543 Test[32907:70b] Unlimited access to network resources
2014-05-13 20:20:27.556 Test[32907:70b] Init FacebookConnect Session
2014-05-13 20:20:27.557 Test[32907:70b] [CDVTimer][facebookconnectplugin] 0.542998ms
2014-05-13 20:20:27.557 Test[32907:70b] CDVPlugin class CDVStatusBar (pluginName: statusbar) does not exist.
2014-05-13 20:20:27.557 Test[32907:70b] [CDVTimer][statusbar] 0.281990ms
2014-05-13 20:20:27.558 Test[32907:70b] [CDVTimer][TotalPluginStartup] 1.411021ms
2014-05-13 20:20:27.611 Test[32907:70b] Resetting plugins due to page load.
2014-05-13 20:20:28.857 Test[32907:70b] Finished load of: file:///Users/philip/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/E9D5296A-B551-4C6F-89D2-7986AE43C401/Test.app/www/index.html#/app/intro

Notice how it says “Resetting plugins due to page load”, but I found somewhere else that this could be ignored (not sure). In safari inspecting the simulator, I don’t see any errors or warnings either, so I’m at a dead end there.

My whole config.xml:

 <?xml version='1.0' encoding='utf-8'?>
 <widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets"     xmlns:cdv="http://cordova.apache.org/ns/1.0">
        Mobile App
    <content src="index.html" />
    <access origin="*" />
    <preference name="fullscreen" value="true" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="StatusBarOverlaysWebView" value="true" />
    <feature name="StatusBar">
      <param name="ios-package" value="CDVStatusBar" onload="true" />
    <feature name="org.apache.cordova.facebook.Connect">
        <param name="ios-package" value="FacebookConnectPlugin" />

Hey @philipDS,

I can’t even get the phonegap-facebook-plugin working in the browser so I have a couple questions. Their documentation is pretty hard to understand…

  1. Did you use plugman to automatically install the plugin or did you do the manual install?

  2. What are angular-facebook.js and angular-facebook-phonegap.js? Did you just rewrite facebook-js-sdk.js and cdv-plugin-fb-connect.js to angular modules? Could you provide the code for these?

  3. How did you get the Facebook dependancy injected into your controller? I’m an angular noob and I’m having a hard time getting a plain JS library injected into my controller.

Also, make sure you’ve added an iOS platform in your Facebook App Dashboard Settings.