'why is facebook js sdk web login callback not being called or called too early?

the problems

  1. fb:login-button: with it, I can't log in.
  2. FB.login(): with calling it by clicking a button, I'm able to log in but the callback function called too early before I log in or sign up so passes an unknown state response.

In case of fb:login-button

  • with facebook logged out, facebook login pop up pops up and when I log in, nothing happens(FB.getLoginStatus returns unknown state).

  • with facebook logged in, the pop up just flashes away and nothing happens(FB.getLoginStatus returns unknown state).

after both operation, checkLoginState() logs {authResponse: null, status: 'unknown'} neither status: 'not-authorized' or status: 'login'. It means I don't succeed to login I guess. Is that why the buttons onlogin callback is not called? (Cause it's called on login event)

In case of FB.login()

  • with facebook unknown state, when I click the button, the callback function is called before I login. It results passing unknown state response.
  • with FB.login() in console, FB.getLoginStatus returns successful login response.

Here is my html code

<body>
  <script>
    window.fbAsyncInit = function () {
      FB.init({
        appId: '...',
        cookie: true,
        xfbml: true,
        version: 'v13.0'
      });

      FB.AppEvents.logPageView();

      checkLoginState();
    };

    function checkLoginState() {
      FB.getLoginStatus(function (response) {
        statusChangeCallback(response);
      });
    }

    function statusChangeCallback(response) {
      console.log(response);
    }

    (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 = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    function facebooklogin(){
      FB.login(function(response){
        statusChangeCallback(response);
      });
    }

    function facebooklogout(){
      FB.logout(function(response){
        statusChangeCallback(response);
      });
    }
  </script>

  <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
  </fb:login-button>

  <button onclick="facebooklogin();">fb-login</button>

Any answer would be appreciated.

facebook-javascript-sdk


Solution 1:[1]

I found the answer.

The keypoint is FB.logout function leaves a cookie which prevents anymore login attemps. like fblo_51245583...=y.

With the cookie,

  • if you are logged in facebook and try to login your web then the pop-up will disappear very quickly.
  • if you are not logged in facebook and try to login your web while the pop-up prompts you to login, the callback function will be called with unknown state response(I guess the logout cookie automatically deny the login attempt at all). and whether you succeed to login in facebook or not it takes no effect on the web.

But I still don't know why the fb:login-button doesn't work. And when The callback function is still executed earlier than my log-in process.

My goal is

When users log in first time using facebook, they are signed up automatically with their uid value from authResponse.

While they are accepting or loggin in facebook, the callback function should wait until they accept/reject or login/not like event-driven.

But as I understand FB.login functions callback parameter doesn't wait for the action but just wait for a response from the facebook server.

So I need other approaches.

use event subscription refer to https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v13.0

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions