Page need to be refresh before Facebook Login works

[naveenduttvyas]

I am facing this issue in my application where facebook login is used.

ISSUE

Users need to press F5/refresh the page before facebook login prompt comes up. otherwise it doesn't come up and nothing happens on button click.

Here is the button tag for Facebook Login, which calls "Login()" method {angularJS is used}.

<a href="#" class="btn btn-default btn-lg" ng-click="login()" ng-disabled="loginStatus.status == 'connected'"> <span class="network-name">Login Using Facebook

app.controller('DemoCtrl', ['$scope', 'ezfb', '$window', 'PFactory', '$location', function ($scope, ezfb, $window, PFactory, $location) {

updateLoginStatus(updateApiMe);

$scope.login = function () { ezfb.login(function (res) { /* * no manual $scope.$apply, I got that handled / if (res.authResponse) { updateLoginStatus(updateApiMe); } }, {scope: 'email,user_likes,user_status,user_about_me,user_birthday,user_hometown,user_location,user_relationships,user_relationship_details,user_work_history'});

$location.path('/view9');

};

$scope.logout = function () { ezfb.logout(function () { updateLoginStatus(updateApiMe); }); };

$scope.share = function () { ezfb.ui( { method: 'feed', name: 'angular-easyfb API demo', picture: 'http://plnkr.co/img/plunker.png', link: 'http://plnkr.co/edit/qclqht?p=preview', description: 'angular-easyfb is an AngularJS module wrapping Facebook SDK.' + ' Facebook integration in AngularJS made easy!' + ' Please try it and feel free to give feedbacks.' }, null ); };

var autoToJSON = ['loginStatus', 'apiMe']; angular.forEach(autoToJSON, function (varName) { $scope.$watch(varName, function (val) { $scope[varName + 'JSON'] = JSON.stringify(val, null, 2); }, true); });

function updateLoginStatus(more) { ezfb.getLoginStatus(function (res) { $scope.loginStatus = res; $scope.promotion = 'promotion'; (more || angular.noop)(); }); }

function updateApiMe() { ezfb.api('/me', function (res) { $scope.apiMe = res; }); }

}]);

app.controller('DemoCtrl', ['$scope', 'ezfb', '$window', 'PFactory', '$location', function ($scope, ezfb, $window, PFactory, $location) {

updateLoginStatus(updateApiMe);

$scope.login = function () { ezfb.login(function (res) { /* * no manual $scope.$apply, I got that handled / if (res.authResponse) { updateLoginStatus(updateApiMe); } }, {scope: 'email,user_likes,user_status,user_about_me,user_birthday,user_hometown,user_location,user_relationships,user_relationship_details,user_work_history'});

$location.path('/view9');

};

$scope.logout = function () { ezfb.logout(function () { updateLoginStatus(updateApiMe); }); };

$scope.share = function () { ezfb.ui( { method: 'feed', name: 'angular-easyfb API demo', picture: 'http://plnkr.co/img/plunker.png', link: 'http://plnkr.co/edit/qclqht?p=preview', description: 'angular-easyfb is an AngularJS module wrapping Facebook SDK.' + ' Facebook integration in AngularJS made easy!' + ' Please try it and feel free to give feedbacks.' }, null ); };

var autoToJSON = ['loginStatus', 'apiMe']; angular.forEach(autoToJSON, function (varName) { $scope.$watch(varName, function (val) { $scope[varName + 'JSON'] = JSON.stringify(val, null, 2); }, true); });

function updateLoginStatus(more) { ezfb.getLoginStatus(function (res) { $scope.loginStatus = res; $scope.promotion = 'promotion'; (more || angular.noop)(); }); }

function updateApiMe() { ezfb.api('/me', function (res) { $scope.apiMe = res; }); }

}]);

[naveenduttvyas]

href="#" class="btn btn-default btn-lg" ng-click="login()" ng-disabled="loginStatus.status == 'connected'"> <span class="network-name">Login Using Facebook

[mathewcst]

I'm having this issue. My Angular application loads perfectly, but to login with facebook the user has to refresh the page a few times. Any solution?

[pc035860]

Any error message ? Did Facebook SDK load properly ? Matheus Costa notifications@github.com於 2016年9月13日 週二，下午7:38寫道：

I'm having this issue. My Angular application loads perfectly, but to login with facebook the user has to refresh the page a few times. Any solution?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/pc035860/angular-easyfb/issues/26#issuecomment-246654480, or mute the thread https://github.com/notifications/unsubscribe-auth/AAxh_pTiCdH_VXRr0bbftJgkSj9RqlRuks5qpotHgaJpZM4B2uaE .

[ajingopi]

I am having the same issue..

In my controller,

`$scope.loginStatus = {
authResponse : null, status : null }; $scope.apiMe = { id: null, name: null, email: null, picture: null };

/*Facebook login*/

// updateLoginStatus(updateApiMe);

$scope.facebookLogin = function () {
        /**
         * Calling FB.login with required permissions specified
         * https://developers.facebook.com/docs/reference/javascript/FB.login/v2.0
         */
        ezfb.login(function (res) {
          /**
           * no manual $scope.$apply, I got that handled
           */
          if (res.authResponse) {
            updateLoginStatus(updateApiMe);
          }

        }, {scope: 'email,user_likes'});
};

/**
 * Update loginStatus result
 */
function updateLoginStatus (more) {
  ezfb.getLoginStatus(function (res) {
    $scope.loginStatus = res;

    (more || angular.noop)();
  });
}

/**
 * Update api('/me') result
 */
function updateApiMe () {
  ezfb.api('/me?fields=id,name,email,picture', function (res) {
        $scope.apiMe = res;
  });
}

$scope.$watch('[loginStatus, apiMe]', 
    function () { 
        if ($scope.loginStatus.status && $scope.apiMe.id) {
            if ($scope.loginStatus.status == "connected") {
                $scope.performLogin("facebook");
            }
        }
}, true);

/*************************************************************************/

//Login Section
$scope.performLogin = function(type){
    if ( type == 'facebook' ) {
        var url = Constants.POST_REQUEST_URL().facebookLoginUrl;
        var data = JSON.stringify({
            email : $scope.apiMe.email,
            fbToken : $scope.apiMe.id,
            name : $scope.apiMe.name
        });
            /**
             * Calling FB.logout
             * https://developers.facebook.com/docs/reference/javascript/FB.logout
             */
            ezfb.logout(function () {
              updateLoginStatus(updateApiMe);
            });
    }       
};`

For the 1st time every thing works perfect.

From my facebook login I go to my dashboard state(I am using ui-router).

When leaving from login page, I am signing out from facebook successfully.

But when I logged out from my dashboard, it comes to Login page and the clicking on Facebook login, facebook login window pops up but a blank one.

I get new facebook pop-up window only when I reload my browser.

So now I am using this below code in my login controller to overcome this issue.

if ($cookies.getObject('userLoggedOut')) {
    $cookies.remove('userLoggedOut');
    $window.location.reload();
}

I set this cookie when I log out from my dashboard.

[ajingopi]

""But when I logged out from my dashboard, it comes to Login page and the clicking on Facebook login, facebook login window pops up but a blank one.""

More over to this. I could give my credentials, it getting successfully logged in to Facebook, but the popup window is not getting closed and return to my domain.

Simply when I reload the page, it works normal.

Also I came to notice that when I come from page.dashboard to $state.go("page.login"); Facebook sdk is not getting loaded. Becase of that ezfb.login() not working.

[Celadora]

You can solve this by calling: FB.XFBML.parse(); // from the Facebook SDK directly

Causes a flashing of the Facebook UI elements if those elements are already loaded, so you might need to arrange some way of detecting the refresh conditions.

https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse