javascript - Facebook API javascript FB.logout 拒绝在框架中显示 'https://www.facebook.com/home.php'，因为它将 'X-Frame-Options' 设置为 'deny'

Question

我在使用 Facebook SDK javascript v2.9 注销时遇到问题，我正在做一个 AngularJS 应用程序，我在 HTML 中加载 API 并将 Facebook API 实现到 Controller 中。

当我在 onclick 操作中执行 FB.logout() 时，出现以下错误:

拒绝在框架中显示“”，因为它将“X-Frame-Options”设置为“拒绝”

HTML 代码

   <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 代码

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

解决方法很简单。您只需调用 http delete 方法即可注销 URl。原型(prototype)代码是这样的(Angular代码)(将 ${token} 替换为您从 facebook 检索到的 access_token。

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");
};

使用您的代码，我想您可以通过执行以下操作来注销:

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

//做你想做的事 }));