Cordova FacebookConnect Plugin Not Working in iOS 9 and iOS 10

Recently in one of my Cordova project we have Connect with Facebook functionality where I have faced certain issues to make it working in iOS 9 and iOS 10 so in this blog I am going to explain those issues and how to resolve it.

1) Which Plugin to Use

There are two plugins if you search for Cordova Facebook Plugin. Following are two links.

GitHub - Wizcorp/phonegap-facebook-plugin

GitHub - jeduan/cordova-plugin-facebook4

The first plugin is older one and it works good till iOS 7 and iOS 8 and cordova 4.0 iOS but it does not work for iOS 10 and Cordova 6.0. If you use that plugin you will usually get issues like you will not be redirected to Facebook in mobile safari or after authentication, it come back to your app and nothing happen.

So my recommendation is to go for second Plugin, which works fine with latest cordova and iOS 9 and iOS 10.

2) After authentication, it come back to your app and nothing happen.

This issue is observed in iOS 9 and iOS 10 for both the plugins. That's because of LSApplicationQueriesSchemes introduced in iOS 9 on words.

There are two URL-related methods available to apps on iOS that are effected: canOpenURL and openURL. These are not new methods and the methods themselves are not changing. As you might expect from the names, “canOpenURL” returns a yes or no answer after checking if there is any apps installed on the device that know how to handle a given URL. “openURL” is used to actually launch the URL, which will typically leave the app and open the URL in another app.

Up until iOS 9, apps have been able to call these methods on any arbitrary URLs. Starting on iOS 9, apps will have to declare what URL schemes they would like to be able to check for and open in the configuration files of the app as it is submitted to Apple. This is essentially a whitelist that can only be changed or added to by submitting an update to Apple.

So you have to WhiteList all the Facebook App Schemes in your info.plist file. Following are schemes you have to add.

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fbapi20130214</string>
    <string>fbapi20130410</string>
    <string>fbapi20130702</string>
    <string>fbapi20131010</string>
    <string>fbapi20131219</string>  
    <string>fbapi20140410</string>
    <string>fbapi20140116</string>
    <string>fbapi20150313</string>
    <string>fbapi20150629</string>
    <string>fbapi20160328</string>
    <string>fbauth</string>
    <string>fbauth2</string>
    <string>fb-messenger-api20140430</string>
</array>

3) There was an error making the graph call

I spent almost an hour to solve this issue. Everything was configured but when I try to make graph API call to get basic profile, it fails every time and the reason behind this was in graph api call IO have space after each field.

facebookConnectPlugin.api("me/?fields=id, first_name, last_name, email",["public_profile"],
function (result) {
},
function (error) {
});

As you can see above there was a space after each field. So to make it working. Remove that space. It does not affect in Android but it does not work in iOS.

facebookConnectPlugin.api("me/?fields=id,first_name,last_name,email",["public_profile"],
function (result) {
},
function (error) {
});