In this blog post we will see how to integrate facebook login with cordova for your mobile app. We will see how to integrate this on desktop, android and ios. This blog uses the ionic framework, but you can use plan simple cordova as well.
The cordova plugin we will use for facebook login is https://github.com/Wizcorp/phonegap-facebook-plugin/
To setup the plugin first, i found it best to clone the facebook plugin to a folder and then install it. Installing the plugin directly through git can take long time in case of errors, where you need to reinstall the plugin.
So first create a folder, lets says “facebook_plugin” and run below commands inside the folder.
[pre]
git init
git remote add origin https://github.com/Wizcorp/phonegap-facebook-plugin
git pull -u origin master
[/pre]
this will pull all latest files from github for the plugin.
Setting Up Facebook App
First step is to create a facebook app. Go to http://developer.facebook.com and register yourself here. After registration, start the process to create a new app.
Select “WWW” when creating a new app and complete the entire process. For App URL you can put in http://localhost there.
Once the app is setup you will get APP ID and APP NAME. Both these are important information which will be used later.
Enter source code for below is located at
https://github.com/manishiitg/Excellence-Blog-Cordova-Ionic-Facebook-Login
Facebook Login For Desktop/Browser
First lets start with most easiest platform i.e your browser.
Here is a guide for the same which you can follow https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/platforms/browser/README.md
Here are the steps to follow
[pre]
ionic start fb_demo blank –id com.excellence.fb_app //create using a blank template
cd fb_demo
ionic platform add browser
ionic platform add android //adding android because going to use this later
ionic plugin add “/PATH/TO/YOUR/FACEBOOK_PLUGIN” –variable APP_ID=”123456789″ –variable APP_NAME=”myApplication”
[/pre]
put in your correct app id and app name above.
Once this is done, your facebook plugin should be installed successfully.
Next for desktop, add this code to your index.html file
[html]
<div id="fb-root"></div>
[/html]
Next add this to your javascript, “deviceready” or “ionic.ready” . You can also add this to your on-click even of the facebook login button
[js]
if (window.cordova.platformId == "browser") {
facebookConnectPlugin.browserInit(appId); //replace with ur app id
}
[/js]
Next add this code to your controller
[js]
var self = this;
$timeout(function () {
//timeout requried to wait for facebook plugin file to load
if (window.cordova.platformId == "browser") {
facebookConnectPlugin.browserInit(‘100538436963664’);
}
facebookConnectPlugin.getLoginStatus(function (response) {
$log.info(response);
if (response.status === ‘connected’) {
$log.info(‘User Already LoggedIn’);
self.getData();
} else {
$log.info(‘User Not Logged In’);
}
}, function () {
$log.warn(‘Get Login Status Error’);
});
}, 1000);
$scope.facebookLogin = function () {
facebookConnectPlugin.login([‘public_profile’], function (data) {
$log.info(data);
self.getData();
}, function (data) {
$log.warn(data);
});
};
self.getData = function () {
facebookConnectPlugin.api(‘/me’, [‘public_profile’], function (data) {
$log.info(data);
$scope.$apply(function () {
$scope.fb_data = data;
});
});
};
[/js]
in above code, we have added $timeout of 1sec because facebookConnectPlugin takes time to initialize. If timeout is not added you might get the error
“facebookConnectPlugin undefined”
“facebookLogin()” function is called from the click event of facebook login button.
The entire source code for this is in the github link above. Next to run this
[pre]
ionic run browser
[/pre]
Next open the “platforms/browser/www/index.html” file in your browser and everything should work well. Make sure your browser URL is http://localhost not file://
Facebook Login For Android
Now lets see how to integrate facebook login for android. The above code remains the same for us, we just need to make few other changes.
We need create an android hashkey (development version) and add it to our facebook app created. For this we need to run the following command
Windows
[pre]
keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64
[/pre]
OSX or Linux
[pre]
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
[/pre]
“keytool” command comes with android skd, so this should be in your path. openssl needs to be installed, many a times its already preinstalled.
The above command will ask for a password and put the password as android
The above output will generate a base64 encoded string, copy that entire string.
Next go your facebook app, add Android platform to it. Below is screenshot of the settings you need to do.
Once this is done, connect your phone to your computer.
[pre]
ionic run android
[/pre]
This should install the app on yoru device and facebook login should work.
If you get an error like the screenshot below, you need to confirm if your android hashkey matches or not.
Above, was only development hash key for android. When we distribute our app, we need to generate a release key.
The commands stay same, you just need to replace the “androiddebugkey” with your actual key name. This key you get when you release your android app.
https://developers.facebook.com/docs/android/getting-started#release-key-hash
Facebook Login On iOS
To add facebook login to your iOS app, first you need to your bundle id or app id to facebook developer setting.
See screenshot below on how to do this.
This is the only thing need for ios, after this you simply need to build and deploy your app on ios device.
The same code works automatically on ios.