The problem

Question

I’m integrating Facebook Business Login using the Facebook JS SDK. Despite following many tutorials and the official guide, I’ve encountered a persistent issue over the past few days. I believe this might be an edge case specific to my setup.

The problem

Both FB.getLoginStatus() and FB.login() call functions return below response.

{authResponse: null, status: 'unknown'}

I’m certain I’ve logged into Facebook and it should show “connected” instead.
The issue is that callback functions are being triggered before Facebook returns the response. For example, when FB.login() opens the login dialog, the console shows the callback response before login completion. Additionally, after completing the login, the callback function is no longer called.
Here is a screenshot:

Here is the source code

(I just copy-pasted from Facebook Offical Guide)

    <!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      console.log( 'Please log ' +
        'into this webpage.');
        FB.login((response) => {
          console.log(response)

        },{
            "config_id":{{FACEBOOK_CONFIG_ID}}
        })
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{{FACEBOOK_APP_ID}}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : 'v20.0'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };
 
  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    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>


<!-- The JS SDK Login Button -->

<fb:login-button config_id="{{FACEBOOK_CONFIG_ID}}" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>

My Environment

I use Facebook Business Login so I can ask my clients permission to manage their pages.
I’ve configured User Access Token configuration and included my Config ID in both login button and in FB.login() function.
My Business is verified.
I’m testing this in localhost. (I have local ssl and I use HTTPS. Also I’ve deployed this in my live web app where i have https as well and facing the same problem).
My App is in Live mode.

Below are some screenshots from my app configs. I’m trying to give lot of details as I beleive this might be specific to my app configurations.

What I’ve Tried

I’ve tried both FB.login() and Facebook login Button. (with facebook login button the onlogin callback function never getting called)
I’ve deleted ALL my cookies and files
I’ve deployed this in Live web app

LEAVE A COMMENT Hủy