Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

FB JS SDK: FB.Login callback fired twice on IE 11

I’m having a strange problem implementing the JS FB-SDK. Everything is working flawless except in IE 11. The method FB.login of the official JS API, which receives a callback, is firing it twice after the OAuth dialog pops up and the user authorizes the application. The first time it returns a response with the parameter authResponse as undefined, the second time it has all the expected values.

I have absolutely no clue as to why this is happening. I’ve double and triple checked that FB.login is not called twice anywhere. Did anyone ever overcome this scenario or made FB login work with IE ?

It works perfect in Edge, Firefox, Chrome and even mobile browsers: chrome and safari in iOS, Android Chrome.

I’m providing a minimal reproducible code demo.

### index.html

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>FB IE 11</title>
</head>

<body> 
  <div id="fb-root"></div>
  <button
    id="fblogin">
    Sign in with Facebook
  </button>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js'></script>
    <script  src="./script.js"></script>
  </body>
</html>

### script.js

(function($) {

  var EP = { facebook: {} }

  EP.facebook.init_was_called = false;
  EP.facebook.promise = $.Deferred();
  EP.facebook.connected = false;
  EP.facebook.emailDeclined = false;
  EP.facebook.loginRetryCount = 0;

  window.fbAsyncInit = () => {
    console.log("window.fbAsyncInit callback triggered by Facebook SDK");
    window.FB.init({
      appId: "418117192377109", // should be your app id when testing
      cookie: true, // Store fbsr_xxx cookie
      xfmbl: false,
      version: "v3.2",
      status: true // Fetch user's facebook login status
    });
    EP.facebook.promise.resolve();
  };

  // Use this to wrap any calls where we're not sure the FB api has been bootstrapped
  EP.facebook.afterFacebookInitialized = callback => {
    return $.when(EP.facebook.promise).then(callback);
  };

  $(function() {
    // Always parseFBML
    EP.facebook.afterFacebookInitialized().done(function() {
      window.FB.XFBML.parse();
    });

    if (EP.facebook.init_was_called) {
      return;
    }
    EP.facebook.init_was_called = true;

    // This only needs to be called once per full page load (on The Post and when showing login screen)
    $.getScript("https://connect.facebook.net/en_US/sdk.js");
  });

  var Facebook = function() {
      var fbLoginParams;

      if (!window.FB) {
        console.log('FB not loaded yet!')
        return;
      } else if (EP.facebook.connected && !EP.facebook.emailDeclined) {
        console.log('Already logged in to FB')
        return;
      } else {
        fbLoginParams = {
          scope: "email"
        };
        if (EP.facebook.emailDeclined) {
          fbLoginParams.auth_type = "rerequest";
        }
        return window.FB.login(function(response) {
          console.log("FB.login response: ", response);
          if (response.authResponse) {
            EP.facebook.connected = true;
            return
          } else {
            return;
          }
        }, fbLoginParams);
      }
    }

    $("#fblogin").on("click", Facebook)
})(jQuery)

In order for this to work, it must be served from a server, with a domain different than localhost due to fb app’s restrictions and served through https. I used ngrok to map an https url to my local dev server. The local dev server was simply parcel, started by doing parcel build index.html and then parcel index.html. Of course you need to have a developer FB app configured with a valid OAuth redirect uri (the ngrok one). Remeber also that you must be logged out from fb before testing this. This are the results after signing in to FB and authorizing the test FB app:

enter image description here

There they are, the 2 responses, magnificent!

Thanks

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The issue was a bug in facebook! I posted in their error report help center, described the issue, and they have fixed it. The resolution is in spanish but you can check here

    Of course they didn't specify the cause of the issue, but tested now and it's working as expected.


  2. 0

    I reproduced the issue in my side. After using fiddler to compare the network traffic between IE and other browsers, I find that the login step will direct to a link-> https://www.facebook.com/dialog/close_window/?app_id=xxxxxxxxx&connect=0 in IE11. You can see this page flash across when login in IE:
    enter image description here
    This will not happen in other browsers. I think this is the cause of two responses. This might be some issue with IE or the API is designed like this in IE.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search