Cordova/PhoneGap Facebook Integration without Plugin

Many consumer apps provide a Facebook Login option, as well as other Facebook integration features such as posting to your feed, getting your list of friends, etc.

Cordova has a Facebook Plugin that makes that integration easy. Internally, the plugin uses both the Native and the JavaScript implementations of the Facebook SDK, and historically, it has sometimes been hard for the plugin to keep up with new versions of these SDKs, as well as new versions of Cordova.

In a recent Cordova project, I integrated with Facebook without using the Facebook Plugin, and in fact without using the Facebook SDK at all. I implemented a traditional OAuth workflow to log in (as described here), and made direct HTTP requests to Graph API endpoints to retrieve and post data.

I encapsulated that logic in a micro library that I called OpenFB, and decided to share it in this article. Here are a few code examples…

Login using Facebook:

openFB.login(scope, successHandler, errorHandler);

Get the user’s list of friends:

openFB.api({path: '/me/friends', success: successHandler, error: errorHandler});

Post on the user’s feed:

openFB.api(
    {
        method: 'POST',
        path: '/me/feed',
        params: {
            message: 'Testing the Facebook Graph API'
        },
        success: successHandler,
        error: errorHandler
    });

The approach used in OpenFB (plain OAuth + direct requests to Graph API endpoints) is simple and lightweight, but it is definitely not perfect.

Pros:

• No plugin dependency and no uncertainties when new versions of Cordova or the Facebook SDK are released.
• Works for all platforms, including platforms for which a version of the plugin doesn’t exist.
• Works for both browser-based apps and Cordova apps.

Cons:

• Not full-fledged, less out-of-the box features.
• Integration not as tight. For example, no native dialogs, etc.

Browser and Cordova Apps

The library works for both browser-based apps and Cordova/PhoneGap apps. When running in a browser, the OAuth URL redirection workflow happens in a popup window. When running in Cordova, it happens inside an “In-App Browser”.

Try it here

You can try the sample app here (My sample Facebook app is called Sociogram). This application is intentionally simplistic to keep the code readable and focused on the Facebook integration. The same app works inside Cordova.

Source Code

OpenFB is available in this repository on GitHub.

Getting Started

To run the sample on your own system:

1. Create a Facebook app here: https://developers.facebook.com/apps. In the advanced settings, make sure you declare a “Valid OAuth redirect URI”. For example, if during development you access your application from http://localhost/openfb/index.html, you must declare http://localhost/openfb/oauthcallback.html as a valid redirect URI. Also add https://www.facebook.com/connect/login_success.html as a Valid OAuth redirect URI for access from Cordova.
2. Copy the Facebook App Id and paste it as the first argument of the openFB.init() method invocation in index.html.
3. Load index.html, from a location that matches the redirect URI you defined above. For example: http://localhost/openfb/index.html

Summary

No rocket science here. The Facebook Plugin is still the best technical solution because it provides a tighter integration with Facebook (using native dialogs, etc). However, if you are looking for a lightweight and easy-to-set-up solution with no dependencies, or if you are targeting mobile platforms for which an implementation of the plugin is not available, you may find this library useful as well. I’d love to hear your feedback, and learn how you are integrating with Facebook.