Facebook login working in browser, but not on iOS simulator

1

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?

2 Likes
2

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?

3

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">
    <name>Test</name>
    <description>
        Mobile App
    </description>
    <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>
    <feature name="org.apache.cordova.facebook.Connect">
        <param name="ios-package" value="FacebookConnectPlugin" />
    </feature>
</widget>
4

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.

Thanks,
Sean