×
Bogdan RusinkaJS Developer

Facebook login in Cordova apps


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.

1

2. Choose platform you need application to work on:

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

3

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

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

5

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

6

7. Open the main page of your application

7

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:

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:

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:

  1. facebookConnectPlugin.login(Array strings of permissions, Function success, Function failure)
  2. facebookConnectPlugin.logout(Function success, Function failure)
  3. 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:

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

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:

 api() function allows you to create a request to facebook server.
For logout you need to call logout() function. Well, thanks “captain obvious”. 

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.

 

  • Subi

    how to fix uncaught referenceerror facebook connect plugin is not defined.?

    • Богдан Волков

      Hi, Subi. It could be related to improper installation of facebookConnectPlugin. Try to check all credentials again and data in facebookconnect.xml file

  • Guilherme Sanches

    Hy,
    I wonder if there is any example you could show us how to deploy the methods?
    I am new at developing with Cordova.