Question

我有这个页面（大部分来自facebook文档，稍作修改）。由于我是一个n00b，我发布了整个代码：

<html>
<head>
    <title>Reportes para Anunciantes</title>
    <meta charset="UTF-8">
</head>
<body>
    <script type="text/javascript">
        function statusChangeCallback(response) {
            console.log('statusChangeCallback');
            console.log(response);
            if (response.status === 'connected') {
                // Logged into your app and Facebook.
                testAPI();
            } else if (response.status === 'not_authorized') {
                // The person is logged into Facebook, but not your app.
                document.getElementById('status').innerHTML = 'Please log into this app.';
            } else {
                // The person is not logged into Facebook, so we're not sure if
                // they are logged into this app or not.
                document.getElementById('status').innerHTML = 'Please log into Facebook.';
            }
        }

        // This function is called when someone finishes with the Login
        // Button.  See the onlogin handler attached to it in the sample
        // code below.
        function checkLoginState() {
            FB.getLoginStatus(function(response) {
                statusChangeCallback(response);
            });
        }

        window.fbAsyncInit = function() {
            FB.init({
                appId      : '284483341757738',
                cookie     : true,  // enable cookies to allow the server to access
                // the session
                xfbml      : true,  // parse social plugins on this page
                version    : 'v2.0' // use version 2.0
            });

            checkLoginState();

            FB.Event.subscribe('auth.authResponseChange', function(response) {
                statusChangeCallback(response);
            });
        };

        // Load the SDK asynchronously
        (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'));

        // Here we run a very simple test of the Graph API after login is
        // successful.  See statusChangeCallback() for when this call is made.
        function testAPI() {
            console.log('Welcome!  Fetching your information.... ');
            FB.api('/me', function(response) {
                console.log('Successful login for: ' + response.name);
                document.getElementById('status').innerHTML =
                    'Thanks for logging in, ' + response.name + '!';
            });
        }
    </script>
    <fb:login-button scope="public_profile,email,ads_management" onlogin="checkLoginState();"></fb:login-button>
    <div id="status">
    </div>
</body>
</html>

现在是按部分分析的时候了。

检查facebook状态并更新div的功能，具体取决于用户是否未登录@ facebook，如果已登录但未授权应用程序，或者最后登录并授权应用程序。这种变化反映在dom中。这样的功能是statusChangeCallback。这样的回调只在checkLoginState内调用，因此每次检查登录状态时，都会调用回调。
一个测试api调用，带有一个回调，用结果更新DOM。该函数名为testAPI。
异步加载束。加载后，成功执行了对checkLoginState的初始调用。
带有onlogin事件的登录按钮。该事件再次呼叫checkLoginState。这是为了反映dom中的新登录状态。

我的问题： onlogin事件未被触发。其他一切都很好。 如果我在登录后更新页面（Facebook显示登录弹出窗口），我会看到预期的状态（已登录），作为调用testAPI，的产品在刷新页面之前没有反映。另外一种方式我注意到这一点：登录后，我应该看到来自statusChangeCallback的控制台消息，但是这样的消息既没有出现，所以我得出结论，这样的事件永远不会被触发。

附加说明：我正在localhost（http://localhost）测试我的应用程序。我在我的应用程序中启用了localhost域（在developers.facebook.com上），并启用了一个＆＃34;网站＆＃34;基本网址为http://localhost的平台（我不在画布中使用此应用）。我测试所有内容的网站的入口点是/（index.html页面）。但是，这些消息显示在控制台中：

Uncaught SecurityError: Blocked a frame with origin "http://static.ak.facebook.com" from accessing a frame with origin "http://localhost". Protocols, domains, and ports must match. VM3437:1
Uncaught SecurityError: Blocked a frame with origin "https://s-static.ak.facebook.com" from accessing a frame with origin "http://localhost".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
 VM3461:1
Uncaught SecurityError: Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "http://localhost".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
 VM3571:1
Uncaught SecurityError: Blocked a frame with origin "http://static.ak.facebook.com" from accessing a frame with origin "http://localhost". Protocols, domains, and ports must match.      
 VM3627:1
statusChangeCallback
 (index):9
Object {authResponse: undefined, status: "unknown"}
 (index):10
Uncaught SecurityError: Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "http://localhost".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

所以我的问题是：

为什么登录后onlogin事件不会触发？
控制台中的这些错误是否相关？我正在使用Apache。我该如何解决？
有没有办法 - 在图谱API查询（即GET调用）之后 - 知道用户是否已注销？

Answer 1

您需要订阅facebook的事件处理程序。添加以下代码

FB.Event.subscribe('auth.login', function(){
// This alert box will appears if user successfully logined
// Do anything here....
alert("Successful Login");
});

所以更新的代码将是

  <html>
 <head>
  <title>Reportes para Anunciantes</title>
  <meta charset="UTF-8">
 </head>
  <body>
 <script type="text/javascript">
    function statusChangeCallback(response) {
        console.log('statusChangeCallback');
        console.log(response);
        if (response.status === 'connected') {
            // Logged into your app and Facebook.
            testAPI();
        } else if (response.status === 'not_authorized') {
            // The person is logged into Facebook, but not your app.
            document.getElementById('status').innerHTML = 'Please log into this app.';
        } else {
            // The person is not logged into Facebook, so we're not sure if
            // they are logged into this app or not.
            document.getElementById('status').innerHTML = 'Please log into Facebook.';
        }
    }

    // This function is called when someone finishes with the Login
    // Button.  See the onlogin handler attached to it in the sample
    // code below.
    function checkLoginState() {
        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });
    }

    window.fbAsyncInit = function() {
        FB.init({
            appId      : '284483341757738',
            cookie     : true,  // enable cookies to allow the server to access
            // the session
            xfbml      : true,  // parse social plugins on this page
            version    : 'v2.0' // use version 2.0
        });

        checkLoginState();

        FB.Event.subscribe('auth.authResponseChange', function(response) {
            statusChangeCallback(response);
        });

         FB.Event.subscribe('auth.login', function(){
       // This alert box will appears if user successfully logined
       // Do anything here....
       alert("Successful Login");
        });
    };

    // Load the SDK asynchronously
    (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'));

    // Here we run a very simple test of the Graph API after login is
    // successful.  See statusChangeCallback() for when this call is made.
    function testAPI() {
        console.log('Welcome!  Fetching your information.... ');
        FB.api('/me', function(response) {
            console.log('Successful login for: ' + response.name);
            document.getElementById('status').innerHTML =
                'Thanks for logging in, ' + response.name + '!';
        });
    }
</script>
<fb:login-button scope="public_profile,email,ads_management" onlogin="checkLoginState();"></fb:login-button>
<div id="status">
</div>
 </body>
</html>

onlogin事件未被触发

1 个答案: