Question

实施JS FB-SDK时遇到一个奇怪的问题。除IE 11外，其他所有东西都可以正常工作。official JS API的方法FB.login收到回调，在OAuth对话框弹出并授权用户使用该应用程序后，将其触发两次。第一次返回未定义参数authResponse的响应，第二次返回所有期望值。

我绝对不知道为什么会这样。我已经三遍三遍地检查了FB.login在任何地方都不被两次调用。有没有人克服过这种情况或使用IE进行FB登录？

它可以在Edge，Firefox，Chrome甚至移动浏览器中完美运行：iOS，Android Chrome中的chrome和safari。

我正在提供一个最小的可复制代码演示。

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

要使其正常工作，由于fb应用程序的限制，必须从服务器（域不同于 localhost ）的服务器中进行服务，并通过https进行服务。我使用ngrok来将https URL映射到本地开发服务器。本地开发服务器仅是parcel，先执行parcel build index.html，然后执行parcel index.html。当然，您需要具有配置有有效OAuth重定向uri（ngrok一个）的开发者FB应用程序。还请记住，在测试之前必须从fb中注销。这是登录FB并授权测试FB应用程序后的结果：

有2个回答，很棒！

谢谢

Answer 1

我转载了这个问题。在使用提琴手比较IE和其他浏览器之间的网络流量之后，我发现登录步骤将定向到IE11中的link-> https://www.facebook.com/dialog/close_window/?app_id=xxxxxxxxx&connect=0。在IE中登录时，您会看到此页面闪烁：在其他浏览器中不会发生这种情况。我认为这是两个回应的原因。 IE可能有问题，或者IE中的API是这样设计的。

Answer 2

问题出在Facebook中！我在他们的错误报告帮助中心中发布了问题的说明，并已解决。分辨率为西班牙语，但您可以选中here

他们当然没有指定问题的原因，但现在进行了测试，并且按预期工作。

FB JS SDK：FB.Login回调在IE 11上触发了两次

2 个答案: