Titanium - Facebook module doesn't using native login

Question

I'm trying to implement facebook login to the app I'm trying to develop with Titanium, and when I'm clicking on "connect" button its shows me a dialog that looks like that:

Its looks like a web-app facebook login and not as native should look like. I want it to be like this:

So, how can I make this module use the native login dialog instead of this web style dialog?

Answer 1

In order to use the iOS native facebook login, you have to:

1. use the new facebook module require('facebook'), the old one is deprecated
2. set forceDialogAuth = false;
3. make sure the bundle id of your app is also set in your facebook app
4. Set the facebook app id in tiapp.xml
5. move the Info.plist to the root folder of your app and provide the facebook id and url scheme there (With the new SDKs you can do this in tiapp.xml, I will give some examples here in a minute)

The images you have posted are the fallback solution, that will happen 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 how I use the native iOS 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.

2. Set up your facebook app
Enable the 'Native iOS app' integration at the Basics 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 + of the modules and add Appcelerators own facebook module, which is installed by default. It should appear in the list below.
Still in tiapp.xml, click the tiapp.xml tab, and add the following:
<property name="ti.facebook.appid">XXXXXXXX</property>
with the Xs being your facebook app id, obviously.

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 placeholder values with your own. This might not be necessary, but I use it and it works, just to be on the safe side ;) 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 your app to be 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 logoutButton 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!
    } 
}