I found a way to make it work! maybe its not the “right” way but it does work!
cordova-facebook-connect-plugin.js
/*global window, document, FB */
(function () {
'use strict';
/*
* @author Pat Nolan - Modifed from the original Author Ally Ogilvie
* @copyright Wizcorp Inc. [ Incorporated Wizards ] 2014
* @file - facebookConnectPlugin.js
* @about - JavaScript interface for PhoneGap bridge to Facebook Connect SDK
*
*
*/
document.addEventListener('DOMContentLoaded', function(e) {
//console.log('DOMContentLoaded', e);
var facebookConnectPlugin = {};
if (!window.cordova || window.cordova && window.cordova.platformId === 'browser') {
console.log('no cordova');
facebookConnectPlugin = {
getLoginStatus: function (s, f) {
// Try will catch errors when SDK has not been init
try {
FB.getLoginStatus(function (response) {
s(response);
});
} catch (error) {
if (!f) {
console.error(error.message);
} else {
f(error.message);
}
}
},
showDialog: function (options, s, f) {
var opts = {
name: '',
message: '',
caption: '',
description: '',
href: '',
picture: ''
}, opt = '';
for(opt in options) {
if(options.hasOwnProperty(opt)) {
opts[opt] = options[opt];
}
}
// Try will catch errors when SDK has not been init
try {
FB.ui(options,
function (response) {
if (response && (response.request || !response.error_code)) {
s(response);
} else {
f(response);
}
});
} catch (error) {
if (!f) {
console.error(error.message);
} else {
f(error.message);
}
}
},
// Attach this to a UI element, this requires user interaction.
login: function (permissions, s, f) {
// JS SDK takes an object here but the native SDKs use array.
var permissionObj = {};
if (permissions && permissions.length > 0) {
permissionObj.scope = permissions.toString();
}
FB.login(function (response) {
if (response.authResponse) {
s(response);
} else {
f(response.status);
}
}, permissionObj);
},
getAccessToken: function (s, f) {
var response = FB.getAccessToken();
if (!response) {
if (!f) {
console.error('NO_TOKEN');
} else {
f('NO_TOKEN');
}
} else {
s(response);
}
},
/* jshint ignore:start */
logEvent: function (eventName, params, valueToSum, s, f) {
// AppEvents are not avaliable in JS.
s();
},
logPurchase: function (value, currency, s, f) { // jshint ignore:line
// AppEvents are not avaliable in JS.
s();
},
/* jshint ignore:end */
logout: function (s, f) {
// Try will catch errors when SDK has not been init
try {
FB.logout( function (response) {
s(response);
});
} catch (error) {
if (!f) {
console.error(error.message);
} else {
f(error.message);
}
}
},
api: function (graphPath, permissions, s, f) {
// JS API does not take additional permissions
// Try will catch errors when SDK has not been init
try {
FB.api(graphPath, function (response) {
if (response.error) {
f(response);
} else {
s(response);
}
});
} catch (error) {
if (!f) {
console.error(error.message);
} else {
f(error.message);
}
}
},
// Browser wrapper API ONLY
browserInit: function (appId, version) {
if (!version) {
version = 'v2.0';
}
FB.init({
appId : appId,
cookie : true,
xfbml : true,
version : version
});
}
};
// Bake in the JS SDK
if (!window.FB) {
console.log('launching FB SDK');
var scriptEl = document.createElement('script'),
fbRootEl;
scriptEl.src = document.location.protocol !== 'file:' ? '//connect.facebook.net/en_US/sdk.js' : 'http://connect.facebook.net/en_US/sdk.js';
scriptEl.async = true;
if(!document.getElementById('fb-root')) {
fbRootEl = document.createElement('div');
fbRootEl.id = 'fb-root';
fbRootEl.appendChild(scriptEl);
document.body.appendChild(fbRootEl);
} else {
document.body.appendChild(scriptEl);
}
scriptEl.onload = function() {
console.log('FacebookSDK loaded from server');
};
}
window.facebookConnectPlugin = facebookConnectPlugin;
}
});
})();
copy this file into your src/assets/js folder
I created a SocialService that will make use of the object window.facebookConnectPlugin when not in Cordova as follows:
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { Events, Platform } from 'ionic-angular';
import { Config } from '../../config/config';
import {Facebook, FacebookLoginResponse} from '@ionic-native/facebook';
declare var cordova:any;
declare var window:any;
@Injectable()
export class SocialService {
mode:string = 'dev';
ready:boolean = false;
isCordova:boolean;
isIOS:boolean;
isAndroid:boolean;
fbPermissions:any[];
constructor(
public config:Config,
public http:Http,
public events:Events,
public plt:Platform,
public fb:Facebook){
this.isAndroid = plt.is('android');
this.isCordova = plt.is('cordova');
this.isIOS = plt.is('ios');
this.fbPermissions = ['public_profile', 'user_friends', 'email'];
let fbInit = ()=>{
window.facebookConnectPlugin.browserInit(config.FB.appid, config.FB.version);
}
plt.ready()
.then(source=>{
console.log(source);
if(this.isCordova){
}else{
console.log(window);
if(!window.facebookConnectPlugin){
setTimeout(()=>{
//console.log(window.facebookConnectPlugin);
fbInit();
}, 2000);
}else{
//console.log(window.facebookConnectPlugin);
fbInit();
}
}
})
.catch(err=>{
});
}
fbLogin():Promise<any>{
if(this.isCordova){
}
else{
return new Promise((resolve, reject)=>{
window.facebookConnectPlugin.getLoginStatus(
(res)=>{
console.log(res);
if(res.status == 'connected') {
resolve(true);
return;
}else{
window.facebookConnectPlugin.login(this.config.FB.permissions,
res=>{
console.log(res);
resolve(true);
},
err=>{
console.log(err);
reject(err);
})
}
//resolve(res);
},
(err)=>{
console.log(err);
reject(err);
});
});
}
}
}
in your pages you just call the service method accordingly!
my login.ts
import {SocialService} from '../../providers/native/social-service';
@Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
constructor(public socialService:SocialService){
}
fbLogin(){
this.socialService.fbLogin()
.then(res=>{})
.catch(err=>{});
}
}
hope it helps!
Cheers
