I've been working on implementing ngFacebook login into my Angular app, but I'm facing an issue with logging in to Facebook. Even after calling '$facebook.log()', nothing is being displayed in the console.
This is a snippet of my Angular app:
'use strict';
angular
.module('fmcFrontendApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngFacebook'
])
.config(function ($facebookProvider) {
$facebookProvider.setAppId('///////////');
$facebookProvider.setCustomInit({
version: 'v2.2',
channelUrl : '/index.html',
xfbml : true
});
$facebookProvider.setPermissions('email, public_profile');
})
.run(function() {
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
})
.controller( 'fbCtrl', [ '$facebook', function($facebook) {
var self = this;
self.isLoggedIn = false;
self.login = function() {
console.log('hello')
$facebook.login().then(function() {
console.log("Please see me")
refresh();
});
}
function refresh() {
$facebook.api("/me").then(
function(response) {
console.log(response);
self.welcomeMsg = "Welcome " + response.name
self.isLoggedIn = true
},
function(err) {
self.welcomeMsg = "Please log in";
});
}
refresh();
}]);
For the relevant Angular elements:
<button id="fb-login" type="button" ng-click="fbCtrl.login()" ng-hide="fbCtrl.isLoggedIn" class="btn btn-default navbar-btn"> Login </button>
<div id="fb-root"></div>
If anyone could provide assistance or insight into what might be causing this issue, I would greatly appreciate it! I've been trying to troubleshoot this myself with no luck so far!