/frontend /JS /tools

Facebook is one of the most popular social networks and is widely used for login to different applications. You can easily login via Facebook using OAuth, but you will stuck if you build a hybrid app, so you need another solution for that. Using Phonegap-Facebook-Plugin you can implement login in a dozen of minutes.

First you need to have facebook account and go to https://developers.facebook.com/. Then follow easy steps to create your application:

1. Find “My apps” tab and click on it to create New application.

2. Choose platform you need application to work on:

3. Then choose an existing application or create a new one:

4. Next choose if it’s a test application or not and click on “Create App ID”

5. This will lead you to the tutorial that you can skip.

6. All your applications are available through “My Apps” tab.

7. Open the main page of your application

You need to retrieve your App ID and name of your application.

If you are creating application for iOS you only need to execute this command in your shell:

cordova -d plugin add https://github.com/phonegap/phonegap-facebook-plugin.git --variable APP_ID="123456789" --variable APP_NAME="myApplication" 1 cordova - d plugin add https : // github .com / phonegap / phonegap - facebook - plugin .git -- variable APP_ID = "123456789" -- variable APP_NAME = "myApplication"

For Android integration you should find a file in your Cordova application that is available by route /platforms/android/res/values/facebookconnect.xml and add these lines:

<resources> <string name="fb_app_id">123456789</string> <string name="fb_app_name">TEST</string> </resources> 1 2 3 4 <resources> <string name = "fb_app_id" > 123456789 </string> <string name = "fb_app_name" > TEST </string> </resources>

Then execute previous command in your shell.

The command installs latest version of Apache Cordova Facebook Plugin from Github using your application ID and name. This plugin uses native Facebook app to perform Single Sign On for a user.

This plugin provides some methods for integration with Facebook API. The main methods are:

facebookConnectPlugin.login(Array strings of permissions, Function success, Function failure) facebookConnectPlugin.logout(Function success, Function failure) facebookConnectPlugin.getLoginStatus(Function success, Function failure)

So how can we use these three methods?

getLoginStatus() method allows you to check if user is already logged in or not depending on the response that is returned in success callback.

In your code you can write something like this:

facebookConnectPlugin.getLoginStatus(statusCheckSuccess, statusCheckFail); function statusCheckSuccess(response) { if (response.status == 'connected') { // you can get user data here or redirect to main page depending on your goals } else { // here you can call login or redirect to login page } } function statusCheckFail() { // any actions to handle exceptions } 1 2 3 4 5 6 7 8 9 10 11 12 13 facebookConnectPlugin . getLoginStatus ( statusCheckSuccess , statusCheckFail ) ; function statusCheckSuccess ( response ) { if ( response . status == 'connected' ) { // you can get user data here or redirect to main page depending on your goals } else { // here you can call login or redirect to login page } } function statusCheckFail ( ) { // any actions to handle exceptions }

What next? If we are not logged in we need to call login() function.

this.facebookLogin = function() { facebookConnectPlugin.login([ "email", "user_birthday", "user_groups", "user_education_history", "user_likes", "user_work_history", "user_location", "user_photos" ], onLoginSuccess, onLoginFail); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 this . facebookLogin = function ( ) { facebookConnectPlugin . login ( [ "email" , "user_birthday" , "user_groups" , "user_education_history" , "user_likes" , "user_work_history" , "user_location" , "user_photos" ] , onLoginSuccess , onLoginFail ) ; }

The function takes an array of data fields you want to have access to. Also it gets two callback functions - one for successful login, other - to handle an exception. In success function you can do whatever you want i.e. you can get data about user:

function onLoginSuccess() { // console.log('LOGIN SUCCESS'); var apiRoute = "me/?fields=id,name,birthday,education,email,work,location,hometown,picture.width(720).height(720)"; facebookConnectPlugin.api(apiRoute, ["user_birthday"], onDataReceiveSuccess, onDataReceiveFail); } function onLoginFail(error) { // console.log('Login failed:', error); } 1 2 3 4 5 6 7 8 9 10 function onLoginSuccess ( ) { // console.log('LOGIN SUCCESS'); var apiRoute = "me/?fields=id,name,birthday,education,email,work,location,hometown,picture.width(720).height(720)" ; facebookConnectPlugin . api ( apiRoute , [ "user_birthday" ] , onDataReceiveSuccess , onDataReceiveFail ) ; } function onLoginFail ( error ) { // console.log('Login failed:', error); }

api() function allows you to create a request to facebook server.

For logout you need to call logout() function. Well, thanks “captain obvious”.

facebookConnectPlugin.logout( function(response) { $location.url('/login'); $timeout(function() { $scope.$apply(); }); }, function(response) { // console.log('Logout error'); } ); 1 2 3 4 5 6 7 8 9 10 11 facebookConnectPlugin . logout ( function ( response ) { $ location . url ( '/login' ) ; $ timeout ( function ( ) { $ scope . $ apply ( ) ; } ) ; } , function ( response ) { // console.log('Logout error'); } ) ;

Both login() and logout() methods can be called by clicking on appropriate buttons.

Now you can easily login via Facebook using facebook-cordova-plugin.

If you need more complex logic you can look through their official documentation on Github and use additional methods for that.