×

HELLO, MY
NAME IS MARTIN
AND THIS IS
MY BLOG

Using the native iOS facebook login with Titanium

Posted on

Since the introduction of iOS 6, facebook has been integrated deeply . If you setup facebook via iOS, you can leverage native dialogs and logins without needing to switch to the facebook app, a mobile web interface of html overlays. Too meet these new standards, Appcelerator have introduced an all new facebook module, with the old one being deprecated with the latest SDKs. But how do we use the native facebook features?

Before setting up an application, you have to know that the fallback, the Safari login, is triggered if

  • the user has not activated the facebook login/facebok app on the device
  • the user has an iOS version prior to the native facebook login
  • you run your app in the simulator

This is basically what the apple docs say:

The native iOS Login dialog is available after people log into Facebook on their device. If the device isn’t connected to Facebook, the native Login Dialog isn’t available and permission requests will be made via the fast-app-switch to the Facebook app (if installed) or Safari. The Facebook SDK methods below will seamlessly fall back to this fast-app-switch behavior. To build Facebook-enabled apps that run on all supported iOS versions and devices, we strongly encourage developers to use the Facebook SDK when building iOS apps.

A native facebook login: step-by-step

1. Create a facebook app

In order to use the native iOS facebook login, you have to create a facebook app at developers.facebook.com. Copy your app id to the text-editor, we will need it later.

The facebook app header

2. Set up your facebook app

Enable the ‘Native iOS app’ integration at the Basics section.

Facebook native iOS login section

(1) Enter the bundle id you are using for your app, the same you have set in tiapp.xml (2) Activate Facebook-login if you want facebook to launch your app from bookmarks etc. (3) Optional: for sharing your facebook id accross multiple apps. We will use this url scheme in the Info.plist as well.


3. Set up tiapp.xml

Go to Titanium Studio and open the tiapp.xml (typically the last file in your apps directory). There are two tabs in the lower left corner. We will need Overview first. Make sure that your Application Id matches the one you have entered in your facebook app. Click at the + button at modules and add Appcelerators own facebook module, which is installed by default. It should appear in the list below.

Screenshot 2013-11-16 21.11.37

Still in tiapp.xml, click the tiapp.xml tab, and add the following, while replacing the Xs with your facebook app id, obviously.

<property name="ti.facebook.appid">XXXXXXXX</property>

4. Copy and edit the Info.plist file

In Finder, navigate to your apps root folder. From here, go to build >; iphone. You should see the Info.plist here. Copy it and paste it to the root folder of your app.

Open it with the text editor of your choice. Add FacebookAppID and FacebookDisplayName to the file and replace the placeholders with values of your own. This might not be necessary, but I use it and it works, just to be on the safe side 😉

Now look for CFBundleURLTypes and edit it to look like below, with test being the URL scheme of your app, you have set it in your facebook app before. This will allow for your app being opened from Safari as well, by entering test://. Please note the fb within the CFBundleURLSchemes array, this has to prefix your facebook app id, unlike all other fields before.

<key>FacebookAppID</key>
<string>XXXXXXXXXXXXX</string>
<key>FacebookDisplayName</key>
<string>Your facebook app name</string>
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>test</string>
        <key>CFBundleURLSchemes</key>
        <array>
              <string>test</string>
              <string>fbXXXXXXXXXX</string>
        </array>
    </dict>
</array>

Please note: with the latest SDKs, these settings can be set in tiapp.xml as well, but since I have not done it yet, this example uses the Info.plist


5. Using the facebook module

I do not use the standard facebook button often, as it can not be customized enough. So assuming you have a login button called loginButton and a logout button called logoutButton we hook them up to our facebook module:

// The module we have added to our project via tiapp.xml before
var facebookModule = require('facebook');
// We can read the facebook app id from tiapp.xml
var FACEBOOK_APP_ID = Ti.App.Properties.getString('ti.facebook.appid');
// Set the app id
facebookModule.appid = FACEBOOK_APP_ID;
// Do not force a facebook html popover but use the native dialog if possible
facebookModule.forceDialogAuth = false;
// Add an event listener to the facebook login event
facebookModule.addEventListener('login', facebookLoginHandler);
// Also add an event listener to the logout event
facebookModule.addEventListener('logout', facebookLogoutHandler);

// The event listener of our login button
loginButton.addEventListener('click', function() {
    facebookModule.authorize();
});

// The event listener of our logout button
logoutButton.addEventListener('click', function() {
    facebookModule.logout();
});

// The facebook login event handler
function facebookLoginHandler(e) {
    if (e.success) {
        // Success!
    } else if (e.error) {
        // Error!
    } else if (e.cancelled) {
        // cancelled by user
    }
}

// The facebook logout handler
function facebookLogoutHandler(e) {
    if (e.success) {
        // Success, clear the facebook browser cookies so someone else
        // can login later, if the browser fallback is used
        var client = Titanium.Network.createHTTPClient();
        client.clearCookies('https://login.facebook.com');
    } else if (e.error) {
       // Error!
    }
}