How to Integrate Facebook Login into a Cordova App

sadid khan

Rate me:

4.20/5 (4 votes)

27 Oct 2015CPOL1 min read

17K

I saw a lot of questions about Facebook login integration in cordova app. Most people face a lot of problems because of Facebook app settings, plugin choices, etc. Now, I am going to show you how to add Facebook login functionality in your cordova app.

First, Create a Facebook App

You have to create a Facebook app first. It will provide additional configuration options.

First, go to Facebook developers page to create an app. Click Add a new App.

Then, select Website from the option:

Give your app name and click "Create New Facebook App Id".

Select a category and click "Create App Id".

From top right corner, select "Skip Quick Start".

Click settings and enter the "App Domains" and "Contact Email" into the Basic settings tab as shown below:

After that, click on "Add Platform", select "website" from pop-up window and then enter "Site Url" as shown below:

Under the Advanced tab, add the redirect OAuth URL as shown below:

Then go "status & Review" from left side menu bar and make your app live by selecting "yes" as shown below:

Our Facebook app settings is complete.

Install InAppBrowser Plugin of Cordova

Let's dive into the app part:

Download and add cordova inappbrowser plugin. You can do it by the following command:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

or, you can go here for a brief description.

After that, download and include ng-cordova in your app. You can get a brief description here. Follow the instructions to install it.

Using the Code

Add these scripts in html page:

HTML

<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-cordova.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="app.js"></script>

the body part,

HTML

<body data-ng-app="myApp">
   <div ng-controller="OAuthCtrl">
       <label >
           <button class="button button-block button-positive" 
           ng-click="facebookLogin()">
               Login with Facebook
           </button>
       </label>
   </div>
</body>

and add the following code in app.js file:

JavaScript

var app = angular.module('myApp', ['ngCordova']);

app.controller("OAuthCtrl", function($scope, $cordovaOauth){
    $scope.facebookLogin = function() {

        //user your fb app Id.. 
        $cordovaOauth.facebook(fb_appId, 
        ["email"]).then(function(result) {
            alert(result.access_token);
            // results
        }, function(error) {
            alert("error");
            alert(error);
            // error
        });
    }
})

Conclusion

This was a step by step guide to integrate Facebook login in cordova app using ngcordova OAuth. Hope it helps. Happy coding!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

sadid khan

Software Developer (Senior)

Bangladesh

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.