Facebook Authentication

The Javascript approach

The Native approach

Facebook authentication using Javascript approach

• CordovaOauth is an AngularJS Apache Cordova Oauth library. The purpose of this library is to quickly and easily obtain an access token from various web services to use their APIs. Read more on the official Cordova Oauth documentation.
• OpenFB is a micro-library that lets you integrate your JavaScript applications with Facebook. It works for both browser-based and Cordova/PhoneGap apps. Read more on the official OpenFB documentation.
• Facebook SDK for JavaScript with AngularJS. You can interact with the facebook javascript sdk using angular. This is useful both for websites and Ionic apps as Ionic is built with AngularJS. Check “Facebook Javascript SDK integration with AngularJS” to get more information.

Facebook authentication using the native approach

Hands on!

Remember ... you will need:

• An Ionic app where you will integrate this login. You can either use a blank app, or an existing one.
• FB API v2.4 but you may be able to make it work with 2.3 and 2.2.
• Register your Facebook app with Facebook and have an APP_ID. (Don’t panic, we will help you with this.)
• The Apache Cordova Facebook Plugin to interact with the device native API's

This is how it will look like

iOS

Android

Step 1: Register your Facebook app

• Go to your Facebook app dashboard
• Click the settings option on the left menu

For iOS

• Add platform iOS
• Set your Bundle ID. (You can find your ID in your config.xml file on the root of your project under the tag widget).

  <widget id="com.ionic-facebook-integration.app" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

• Check Single Sign On
  

For Android

• Add platform android
• Set your Google Play Package Name. You can find your name in your platforms/android/AndroidManifest.xml file.

  <manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="com.ionic_facebook_integration.app" xmlns:android="http://schemas.android.com/apk/res/android">

• Check Single Sign On
• Set the Class Name to com.facebook.LoginActivity
• Generate your own Key Hash.
  

Generate your own Key Hash

Step 2: Install required cordova plugins to interact with Facebook native SDK

• Open a terminal window and clone this repository on your computer:
  $ git clone https://github.com/Wizcorp/phonegap-facebook-plugin.git
• Using your terminal window, go to your Ionic app folder
• If you want to build your app for iOS execute: ionic platform add ios
• If you want to build your app for Android execute: ionic platform add android
• Execute the following command on the terminal changing the variables with your own values:
  • The path you cloned the plugin to earlier
  • Replace APP_ID and APP_NAME variables with your Facebook app values
  $ cordova -d plugin add /path_to_cloned/phonegap-facebook-plugin --variable APP_ID="123456789"--variable APP_NAME="myApplication"

Step 3: Adding Login/Logout functionality

Login

.controller('WelcomeCtrl', function($scope, $state, $q, UserService, $ionicLoading) {
  // This is the success callback from the login method
  var fbLoginSuccess = function(response) {
    if (!response.authResponse){
      fbLoginError("Cannot find the authResponse");
      return;
    }

    var authResponse = response.authResponse;

    getFacebookProfileInfo(authResponse)
    .then(function(profileInfo) {
      // For the purpose of this example I will store user data on local storage
      UserService.setUser({
        authResponse: authResponse,
    userID: profileInfo.id,
    name: profileInfo.name,
    email: profileInfo.email,
        picture : "http://graph.facebook.com/" + authResponse.userID + "/picture?type=large"
      });
      $ionicLoading.hide();
      $state.go('app.home');
    }, function(fail){
      // Fail get profile info
      console.log('profile info fail', fail);
    });
  };

  // This is the fail callback from the login method
  var fbLoginError = function(error){
    console.log('fbLoginError', error);
    $ionicLoading.hide();
  };

  // This method is to get the user profile info from the facebook api
  var getFacebookProfileInfo = function (authResponse) {
    var info = $q.defer();

    facebookConnectPlugin.api('/me?fields=email,name&access_token=' + authResponse.accessToken, null,
      function (response) {
    console.log(response);
        info.resolve(response);
      },
      function (response) {
    console.log(response);
        info.reject(response);
      }
    );
    return info.promise;
  };

  //This method is executed when the user press the "Login with facebook" button
  $scope.facebookSignIn = function() {
    facebookConnectPlugin.getLoginStatus(function(success){
      if(success.status === 'connected'){
        // The user is logged in and has authenticated your app, and response.authResponse supplies
        // the user's ID, a valid access token, a signed request, and the time the access token
        // and signed request each expire
        console.log('getLoginStatus', success.status);

      // Check if we have our user saved
      var user = UserService.getUser('facebook');

      if(!user.userID){
     getFacebookProfileInfo(success.authResponse)
     .then(function(profileInfo) {
      // For the purpose of this example I will store user data on local storage
      UserService.setUser({
       authResponse: success.authResponse,
       userID: profileInfo.id,
       name: profileInfo.name,
       email: profileInfo.email,
       picture : "http://graph.facebook.com/" + success.authResponse.userID + "/picture?type=large"
      });

      $state.go('app.home');
     }, function(fail){
      // Fail get profile info
      console.log('profile info fail', fail);
     });
    }else{
     $state.go('app.home');
    }
      } else {
        // If (success.status === 'not_authorized') the user is logged in to Facebook,
    // but has not authenticated your app
        // Else the person is not logged into Facebook,
    // so we're not sure if they are logged into this app or not.

    console.log('getLoginStatus', success.status);

    $ionicLoading.show({
          template: 'Logging in...'
        });

    // Ask the permissions you need. You can learn more about
    // FB permissions here: https://developers.facebook.com/docs/facebook-login/permissions/v2.4
        facebookConnectPlugin.login(['email', 'public_profile'], fbLoginSuccess, fbLoginError);
      }
    });
  };
})

Then in your html you should add a “Login with Facebook” button

<a class="facebook-sign-in button button-block" ng-click="facebookSignIn()">Login with Facebook</a>

Logout

.controller('HomeCtrl', function($scope, UserService, $ionicActionSheet, $state, $ionicLoading){
 $scope.user = UserService.getUser();

 $scope.showLogOutMenu = function() {
  var hideSheet = $ionicActionSheet.show({
   destructiveText: 'Logout',
   titleText: 'Are you sure you want to logout? This app is awsome so I recommend you to stay.',
   cancelText: 'Cancel',
   cancel: function() {},
   buttonClicked: function(index) {
    return true;
   },
   destructiveButtonClicked: function(){
    $ionicLoading.show({
      template: 'Logging out...'
    });

        // Facebook logout
        facebookConnectPlugin.logout(function(){
          $ionicLoading.hide();
          $state.go('welcome');
        },
        function(fail){
          $ionicLoading.hide();
        });
   }
  });
 };
})

Then in your html you should add a “Log out” button

<a class="button button-assertive button-block button-outline" ng-click="showLogOutMenu()">Log Out</a>

Services

angular.module('services', [])
.service('UserService', function() {
  // For the purpose of this example I will store user data on ionic local storage but you should save it on a database
  var setUser = function(user_data) {
    window.localStorage.starter_facebook_user = JSON.stringify(user_data);
  };

  var getUser = function(){
    return JSON.parse(window.localStorage.starter_facebook_user || '{}');
  };

  return {
    getUser: getUser,
    setUser: setUser
  };
});

Notes

<key>LSApplicationQueriesSchemes</key>
<array>
 <string>fbauth</string>
</array>
<key>NSAppTransportSecurity</key>
<dict>
 <key>NSAllowsArbitraryLoads</key>
 <true/>
</dict>