Facebook SDK not loaded during the call to get login status

Question

I am using Facebook SDK to build an application however I am faced with a challenge, I try to get the login status of the user before I redirect him to his profile page, however during the call to get the login status I get the error that

ReferenceError: FB is not defined

now the SDK is being loaded asynchronously so the error makes sense, how can i resolve the problem. Here is my code:

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: "Views/ListPages.html",
            controller: 'MainCtrl',
            resolve: {
                authentication:["$location", "LoginFactory", function($location, LoginFactory){
                    console.log("in resolve");
                    LoginFactory.getLoginStatus()
                        .then(function(response){
                            if(response){
                                $location.path('/login');
                            }
                            else{
                                $location.path('/');
                            }
                        });
                }]
            }
        })
        .when('/login', {
            templateUrl: "Views/Login.html",
            controller: 'LoginCtrl'
        })
        .otherwise
        ({redirectTo: '/'});
});


loginApp.factory("LoginFactory", function ($rootScope, $q, $location, UserInfo) {
    return {
        getLoginStatus: function () {
            var deferred = $q.defer();
            FB.getLoginStatus(function (response) {
                if(!response || response.error){
                    deferred.reject(new error("User Not logged in."));
                }
                else{
                    deferred.resolve(response);
                }
            });
            return deferred.promise;
        },
        login: function () {
            FB.login(function (response) {
                if (response.authResponse === "connected") {
                    $rootScope.$broadcast('fb_connected', {facebook_id:response.authResponse.userID});
                } else {
                    $rootScope.$broadcast('fb_login_failed');
                }
            }, {scope: "read_insights, publish_pages, manage_pages"});
        },
        logout: function () {
            FB.logout(function (response) {
                if (response) {
                    $rootScope.$broadcast('fb_logout_succeded');
                    $location.path('/login');
                } else {
                    $rootScope.$broadcast('fb_logout_failed');
                }
            });
        }
    };

angular.module("LoginCtrlModule", ["FacebookLogin"])
    .controller("LoginCtrl", ["$scope", "$location", "LoginFactory", function ($scope, $location, LoginFactory) {
        $scope.login = function () {
            LoginFactory.login();
            $scope.on("fb_connected", function () {
                $location.path("/");
            });
            $scope.on("fb_login_failed", function(){
                $location.path("/login");
            });
        }
    }]);

app.run(function ($rootScope, $location, LoginFactory) {
    window.fbAsyncInit = function () {
        FB.init({
            appId: '',
            status: true,
            cookie: true,
            xfbml: true
        });
    };

    (function (d) {
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement('script');
        js.id = id;
        js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document));

});

I was following these posts: AngularJS- Login and Authentication in each route and controller http://www.sitepoint.com/implementing-authentication-angular-applications/

But the problem i am facing is different.

Thanks for the help.

Just one quick update as well I am having same problem when I included the handler for "$routeChangeStart" event in the app.run(), as the Facebook SDK is not loaded completely, is there a better approach to solve this problem? — user37940, Mar 01 '16 at 00:36

score 0 · Answer 1 · answered Mar 01 '16 at 02:44

I think the solution is to not call the FB.getLoginStatus() but rather have an object that contains the User information and the access token, each time I try to route I should check if the User info object is null, in case if its not null then call the check login status method and accordingly take the route or not to take the route.

Facebook SDK not loaded during the call to get login status

1 Answers1