Facebook API javascript FB.logout Refused to display 'https://www.facebook.com/home.php' in a frame because it set 'X-Frame-Options' to 'deny'

Question

I'm have a problem to do logout with Facebook SDK javascript v2.9, I'm doing an AngularJS application an I load the API in the HTML and implement the Facebook API into a Controller.

When I do FB.logout() in the onclick action I get the following error:

Refused to display '' in a frame because it set 'X-Frame-Options' to 'deny'

HTML CODE

   <div class="top-content">      
    <!--content-->
    <fb:login-button class="btn-login" scope="public_profile,email" 
      onlogin="doFbLogin();" data-button-type="continue_with" data-
      auto-logout-link="false" data-use-continue-as="true" data-
      size="large">
    </fb:login-button>
    <button onclick="FB.logout()" class="btn">Logout</button>    
   </div>

    <script>  
        window.fbAsyncInit = function() {
            FB.init({
                appId            : 'API-KEY',
                autoLogAppEvents : true,
                status           : true,
                xfbml            : true,
                version          : 'v2.9'
          });
          FB.AppEvents.logPageView();
      };


      (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/es_ES/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));   

    </script>

AngularJS Controller Code

appController.controller('LoginCtrl', ['$scope','$window','$location','$http','sendLoginParams','checkCreds', 'setCreds','setUserSession',
    function LoginCtrl($scope, $window,$location,$http, sendLoginParams, checkCreds, setCreds, setUserSession){   
        $scope.loggin = true;        
        $window.doFbLogin = function (){                          
            var fb_token;

            function checkLoginState() {
                $window.FB.getLoginStatus(function(response) {
                    fb_token = response.authResponse.accessToken;
                    statusChangeCallback(response);
                });
            };
            function statusChangeCallback(response) {
                console.log('statusChangeCallback');
                console.log(response);

                if (response.status === 'connected') {                      
                  facebookLogin();
                }
            }



            facebookLogin = function () {                
                $window.FB.api('/me',{ fields: 'id, name, email' }, function(response) {
                    console.log(response);
                    console.log('Successful login for: ' + response.name);
                    console.log('Successful login for: ' + response.email);
                    var id = parseInt(response.id);  
                    var postData = {
                        "user_fb_id":id,                
                        "user_fb_token": fb_token,
                        "user_email":response.email,
                        "user_avatar":"http://graph.facebook.com/" + response.id + "/picture?type=normal",
                    };


                    $http.post("http://localhost:8080/webserver/rest/usrs/fblogin",postData,
                        {
                            'Content-Type':'application/json'
                        }
                    ).success(function (success){

                        var resp = JSON.stringify(success);
                        var objResp = JSON.parse(resp);                    
                        if(objResp.user_online){                                                    
                            setCreds(success.user_alias,success.user_password);                        
                            setUserSession(success);                        
                            $location.path("/");
                        }                 

                    })
                    .error(function (failures){                 
                        console.error(failures);
                    }); 


                });                

            };                

            checkLoginState();                           
        };

    }
]);

Answer 1

The solution is very simple. You just call http delete method to logout URl. The prototype code is like this (Angular code) ( replace ${token} by the access_token you retrieved from facebook.

url = "https://graph.facebook.com/v2.7/me/permissions?access_token=${token}{"success":true}";
http.delete(url).then(response => {
    // do something, clean up, whatever.
}).catch(error => {
   console.log(" something wrong, cannot log out");
};

With your code, I guess you can logout by doing this:

 $window.FB.api('me/permissions?success:true', 'delete', function(response => {
    console.log('Log out').

// Do something you want }));