Skip to content

Instantly share code, notes, and snippets.

@Evanion
Created November 6, 2014 08:45
Show Gist options
  • Save Evanion/f662761bfcccd7abd700 to your computer and use it in GitHub Desktop.
Save Evanion/f662761bfcccd7abd700 to your computer and use it in GitHub Desktop.
Integrate Facebook in Iionic

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.

.config(function ($cordovaFacebookProvider) {
$cordovaFacebookProvider.setFacebookAppId(<Your appid>);
})
(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;
});
})();
#!/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 ../../..
<button class="button button-block button-facebook" ng-click="facebookConnect()">
{{'LOGIN_FACEBOOK' | translate}}
</button>
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);
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment