FB Login Button Not Authenticating

Question

I am trying to integrate fb login in my website. On click the button if not logged in fb,it ask for fb credential and then does nothing. It just send a post request to facebook/connect/ping with a forced 302 status

Here is the code

<script>
var isLoaded=false;
window.fbAsyncInit = function() {
    FB.init({
        appId      : '{{app_id}}',
        status     : true,
        xfbml      : true
    });
};
isLoaded=true;

function checkIfLoaded() {
    if(isLoaded) console.log("LOADED!");
    else console.log("NOT YET!");
    return false;
}

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

FB.Event.subscribe('auth.authResponseChange', function(response) {
    if (response.status === 'connected') {
        onLogin(response);
    } else if (response.status === 'not_authorized') {
        FB.login();
    } else {
        FB.login();
    }
});

function onLogin(response) {
    console.log('login succ');
    var status=response.status;
    var accessToken=response.authResponse.accessToken;
    var expiresIn=response.authResponse.expiresIn;
    var signedRequest=response.authResponse.signedRequest;
    var userID=response.authResponse.userID;

    $("#status").val(status);
    $("#accessToken").val(accessToken);
    $("expiresIn").val(expiresIn);
    $("signedRequest").val(signedRequest);
    $("userID").val(userID);
    $("#form").submit();
}

</script>

<a href="#" onclick="checkIfLoaded();">Check</a>
<h2>User</h2>
<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="false"></div>

In my app dashboard I have just added a platform with the site name as above.Nothing else is configured.

Answer 1

The problem is that FB.Event is not subscribed since FB was not initialized when you tried to subscribe this event. See console for the error, you'll see:

FB is not defined

The reason is that the FB object is defined asynchronously under window.fbAsyncInit, so whenever you want to do a API call or use the FB it must be done after the FB is defined.

So the solution to your problem is that, write the FB.event after the FB is defined (not before it is defined), just like this-

window.fbAsyncInit = function() {
    FB.init({
        appId      : '{{app_id}}',
        status     : true,
        xfbml      : true
    });

    // write all your "FB" code here, since the FB is defined now
    FB.Event.subscribe('auth.authResponseChange', function(response) {
        if (response.status === 'connected') {
            onLogin(response);
        } else if (response.status === 'not_authorized') {
            FB.login();
        } else {
            FB.login();
        }
    });
};