Integrate Facebook in Iionic

readme.md

Installation instructions

Add the plugin to your project:

ionic plugin add com.phonegap.plugins.facebookconnect --variable APP_ID="" --variable APP_NAME=""

Check that com.phonegap.plugins.facebookconnect/FacebookLib exists othervise install facebook SDK manually.

Run clean_android.sh

Done

To hook it up in your angular app. Add the respective content of js files to your app.

THe angular portion uses the following dependencies: angular-data, ngCordova

The authService lests you easily define additional login providers.

app.js

.config(function ($cordovaFacebookProvider) {
  $cordovaFacebookProvider.setFacebookAppId(<Your appid>);
})

AuthService.js

(function() {
    'use strict';

    var module = angular.module('api.auth', [
        'angular-data.DS',
        'ngCordova'
    ]);

    module.constant('AUTH_EVENTS', {
        loginSuccess: 'auth-login-success',
        loginFailed: 'auth-login-failed',
        logoutSuccess: 'auth-logout-success',
        sessionTimeout: 'auth-session-timeout',
        notAuthenticated: 'auth-not-authenticated',
        notAuthorized: 'auth-not-authorized'
    });

    module.constant('USER_ROLES', {
        all: '*',
        admin: 'admin',
        editor: 'editor',
        guest: 'guest'
    });

    module.service('ApiAuthService', function(DS, $q, $http) {
        var apiBaseUrl = DS.defaults.baseUrl;

        function login(credentials) {
            var deferred = $q.defer();

            $http.post(apiBaseUrl + '/login', credentials, { 'withCredentials': true })
                .success(deferred.resolve)
                .error(deferred.reject);

            return deferred.promise;
        }

        function register(credentials) {
            var q = $q.defer();
            $http.post(apiBaseUrl + '/register', credentials)
                .success(q.resolve)
                .error(q.reject);

            return q.promise;
        }

        function exchangeAccessToken(data) {
          var q = $q.defer();

          $http.post(apiBaseUrl + '/auth/' + data.provider + '/token', data)
            .success(q.resolve)
            .error(q.reject);

          return q.promise;
        }

        return {
            'login': login,
            'register': register,
            'exchangeAccessToken': exchangeAccessToken
        };
    });

    module.service('AuthService', function ($cordovaFacebook, ApiAuthService, $q, $localStorage) {
        function setLocalStorage(provider, user, token) {
            $localStorage.provider = provider;
            $localStorage.token = token;
            $localStorage.user = user;
        }

        function getLocalStorage() {
            return {
                'provider': $localStorage.provider,
                'token': $localStorage.token,
                'user': $localStorage.user
            }
        }

        function handleTokenSuccess(q, provider) {
            return function(data) {
                setLocalStorage.apply(this, [provider, data.user, data.token]);

                q.resolve(getLocalStorage());
            }
        }

        /**
         * Public interface
         *
         * @type {{ facebook: *}}
         */
        var authService = {
            'facebook': (function() {
                var provider = 'facebook';

                return angular.extend({}, $cordovaFacebook, {
                    'login': function (permissions) {
                        var deferred = $q.defer();

                        $cordovaFacebook.login(permissions)
                            .then(function(response) {
                                return ApiAuthService.exchangeAccessToken({
                                    'provider': provider,
                                    'access_token': response.authResponse.accessToken,
                                    'exp': response.authResponse.expiresIn
                                });
                            })
                            .then(handleTokenSuccess(deferred, provider))
                            .catch(deferred.reject);

                        return deferred.promise;
                    }
                })
            })()
        };

        authService.isAuthenticated = function () {
            return !!$localStorage.user;
        };

        return authService;
    });
})();

clean_android.sh

#!/bin/bash

android update project --subprojects --path "platforms/android" --target android-19 --library "CordovaLib"

android update project --subprojects --path "platforms/android" --target android-19 --library "com.phonegap.plugins.facebookconnect/FacebookLib"

cd platforms/android/

ant clean

cd com.phonegap.plugins.facebookconnect/FacebookLib

ant clean

ant release

cd ../../..

login.html

<button class="button button-block button-facebook" ng-click="facebookConnect()">
    {{'LOGIN_FACEBOOK' | translate}}
</button>

loginCtrl.js

angular.module('login', [])
  .controller('LoginCtrl', function($scope, $state, AuthService) {
    
    $scope.facebookConnect = function() {
    
        AuthService.facebook.login(['public_profile', 'email'])
            .then(function() {
              $state.go('<insert stateName to go too after login>');
            })
            .catch(function(err) {
                $log.error(err);
            });
    }
  });