Clever Geek Handbook

Onlogin event not firing

I have this page (most from facebook documentation, with minor changes). Since I am n00b with this, I am posting all the code:

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

Time to analyze piece by piece.

  • A function that checks the facebook state and updates the div based on whether the user was logged into @facebook, if they are logged in but the app is not logged in, or finally if you are logged in and logged in to the app. This change is reflected in the dom. Such a function statusChangeCallback

    . Such a callback is only called internally checkLoginState

    , so every time the login status is checked, the callback is called.

  • A test api call with a callback that updates the DOM with the results. The function is called testAPI

    .

  • Asynchronous load. After loading it, the initial call checkLoginState

    succeeds.

  • Login button with event onlogin

    . The event calls again checkLoginState

    . This should reflect the new state of the dom entry.

My problem: The onlogin event is not firing . Everything else works great. If I update the page after you log in (facebook displays a pop-up login window), I see the expected state (login) as calling the product testAPI

, but it's not until you refresh the page . There's another way, as I noticed it: after logging in, I should see a console message from statusChangeCallback

, but no such message appears, so I conclude that such an event is never fired.

Additional notes . I am testing my application in localhost ( http://localhost

). I have enabled the localhost domain in my application (at developers.facebook.com) and have enabled the platform "website" with a base url http://localhost

( I am not using this application in canvas ). The entry point of my site where I test everything is /

(page index .html). However, these messages show up in the console:

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.

So my questions are :

  • Why onlogin

    doesn't the event fire after login?
  • Are these errors console related? I am using Apache. How can I solve them?
  • Is there a way - after a Graph API request (i.e. a GET call) - to find out if the user has logged out?
+3


source to share


1 answer


You need to subscribe to facebook event handler. Add below code

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


so the updated code will be

  <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>
+1


source






More articles:


All Articles