Beginner Guide to Facebook Phonegap Plugin Installation with Netbeans – Android

In this blog, i will try to explain how to setup facebook login in your phonegap application using netbeans. Although there is lot of blogs/documentation on this available, i found it difficult to get relevant information when trying to do this with netbeans. Also as this was the first plugin i installed, i found it difficult to debug and understand how it exactly works. So I will try share all the problems/details in this blog post which i found and hopefully this will be helpful to many people.

Here are few important pages which you need to open and consult while reading this blog
1. https://github.com/phonegap/phonegap-facebook-plugin
2. https://developers.facebook.com/docs/android/getting-started/
Both are official phonegap and facebook guides.
Also i am assuming you are already aware of how to create a facebook app for website, and you already have created a facebook app(have an app id). If you not familiar with these you can check by other blog here

Understanding the facebook phonegap plugin

Before going into what exactly needs be done. There was great confusion to me what all exact does the facebook plugin have, questions like
1. Do i need to download/install facebook sdk separately
2. What javascript do i write in my html5 app to use facebook api.
3. Which method of installation do i use “Adobe Phonegap Build” or “Manual” as mentioned in the phonegap guide

So to answer these questions, facebook phonegap plugin already has the facebook sdk it. You don’t need to install it separately.

For javascript, you need to use the exact same javascript code which you would use in an standard website. All the functions written in https://developers.facebook.com/docs/javascript/reference/FB.api/ work just like a normal website. The facebook cordova plugin, has made changes to the facebook sdk javascript files so that you can use facebook api without making any changes.

Installing the Facebook Plugin in Netbeans

As we have seen in the previous blog to install any plugin we need to edit the plugin.properties file in “nbproject” folder. But in case of the facebook plugin, there is a catch here, to install the facebook plugin we need to pass two additional parameters i.e APP_ID and APP_NAME. Netbeans doesn’t allow us to pass parameters in the plugin.properties file (at least i am not aware of it). So here is the trick that i applied, i “forked” the project in github to my own account and then edit the plugin.xml file.
Remove the lines

 <preference name="$APP_ID"/>
 <preference name="$APP_NAME"/>

and replace all instance of $APP_ID with your app_id and $APP_NAME with your appname in plugin.xml file itself.
You can find my plugin.xml file here https://github.com/manishiitg/phonegap-facebook-plugin/blob/master/plugin.xml
I all added this line to the plugin.xml file

<config-file target="AndroidManifest.xml" parent="/*"> 
      <uses-permission android:name="android.permission.INTERNET"/> 
</config-file>

I added this line because i was getting a “SecurityException: Permission denied (missing INTERNET permission)” error. I am not sure if this is required or not, but my error got fixed by this.
So basically what i have done i create by own plugin github repo to add it to netbeans.
It has a disadvantage the
if there is any version upgrade or bug fix the official plugin, my repo won’t get that update. I guess i will have to track it manually.

Next i add this to my plugin.properties file

com.phonegap.plugins.facebookconnect=https://github.com/manishiitg/phonegap-facebook-plugin

now when you “clean and build” the project. open your netbeans output window to see that netbean downloads the files from your github.

Plugin Behind the scene

Next if you want to check if everything got copied correctly and the build process was correct. Check these folders.
MAIN_PROJECT = you main project folder in your netbeans

Open folder MAIN_PROJECT/plugins in windows explorer and you should see a folder name “com.phonegap.plugins.facebookconnect” there. This should be the copy of your plugin github repo. You can open the files to verify.

Next open MAIN_PROJECT/platforms/android/src/com/facebook/android you see the plugin files here.

Next open platforms\android\assets\www\ and you see cdv-plugin-fb-connect.js and facebook-js-sdk.js files here.

if you see these files, means your good to go.

Facebook App HASH Key Mystery

It actually a very thing to setup, but looks very complicated.

To generate this hash key, first you need to install OpenSSL tool on windows.
Furthermore, if you are generating this hash on Windows (specifically 64 bit versions), please use version 0.9.8e or 0.9.8d of OpenSSL for Windows and not 0.9.8k. Big ups to fernandomatos for pointing this out! You can download it from here https://code.google.com/p/openssl-for-windows/downloads/list

Once you have done this, run this command in windows command prompt


keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64

when it asks for password put “android” without the quotes. (If you are not prompted for a password, something is wrong and you must check your paths above to ensure the debug.keystore is present. One reason for it not asking a password is an existing debug.keystore file is not present. You need to build an android project at least once before running this command. While building an android, it generates a debug.keystore file.)
It generates a hash key which you need to copy to your facebook sample app settings.
Find more details here on https://developers.facebook.com/docs/android/getting-started/#create-app on Step5.


Tip: Run the command

keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64 > D:\log.txt

This is write the key to the log file and you can directly copy it from text file.

What this does is, generate a filename debug.keystore in your HOME folder. In my case it was here “C:\Users\manish\.android”. You can open this folder and verify the file. Don’t bother opening the file its all encrypted.

This is it, you just need to copy the hash key to facebook to run facebook api in your mobile phone or simulator app.

If your wondering how this default.keystore and facebook sample app setting (open https://developers.facebook.com and from right top menu click on Developer Settings and then Sample App ) connect, what happens behind the scene is as follows.
1. when you compile and run the application from netbeans, it takes the debug.keystore file into the file .apk which gets generated.
2. During facebook login, facebook uses this hash from the .apk file. Validates it with their database if as such key is saved, checks that it’s a developer key (since password was android) and allows it to work.

Javascript Code to Write

Next this is the code which you need to write in your HTML5 Application. First you need to include the javascript files

<script type="text/javascript" src="cdv-plugin-fb-connect.js"></script> 
<script type="text/javascript" src="facebook-js-sdk.js"></script>

both these are automatically copied during build and compile process to the www/ folder.
Next add this code

<div id=\"fb-root\"></div> 
<script type="text/javascript"> 
document.addEventListener('deviceready', function() { 
try { 
FB.init({appId: "APP_ID", nativeInterface: CDV.FB, useCachedDialogs: false}); 
} catch (e) { 
alert(e); 
} 
} , false); 
</script>

The above code is the changed version of FB.init() which you use in your normal website.
Next add this code on your button click event.

function onFacebookLoginButtonClick(){
FB.getLoginStatus(function(r) {
        if (r.status === 'connected') {
            processFacebook();
        } else {
            FB.login(function(response) {
                if (response.authResponse) {
                    processFacebook();
                } else {
                    // user is not logged in
                }
            }, {
                scope: 'email'
            });
        }
    });
}
function processFacebook() {
    FB.api('/me', function(response) {
        if (response.error) {
            alert('Unexpected Facebook Login Error: ' + JSON.stringify(response.error));
        } else {
            console.log(response);
            var login_data = '';
            for (var key in response) {
                if (key == 'id' || key == 'name' || key == 'email' || key == 'gender')
                    login_data += key + '=' + encodeURIComponent(response[key]) + '&amp;';
            }
            // do further processing as per your application
        }
    });
}

As you can see the above code is same the facebook javascript api.
At this point, if everything was done correctly facebook login should work flawlessly.

  • Elian Cutiño Díaz

    Thanks for the guide, work perfect.

  • Thamizh

    After login from native app the session is not opened. While i checked the status it’s showing closed_login_failed. But works well if native facebook app is not present…!

    Can you say what’s the solution. I’m stuck here…!

  • Marco

    Hi, i have a question about “Facebook App HASH Key Mystery”. Previusly i set up the hash with keytoll without konw anything about it. So now i have read this article and i see you have to put the “android” keyword to let the plugin works. There’s a way to change my hash with key tool? Or set a new one?
    Thanks

    • Manish Prakash

      You can create a new one, should not be a problem.

      • Marco

        Yes i have tried an i works, thank you!! :-)

  • sravanthi

    Hai,

    Iam using the same code,
    when i’am login into FB, It just showing white blank screen,
    Any one can help for this.

    Thanks,
    Sravanthi