FB JS SDK：FB.Login回调在IE 11上触发了两次
tom*_*rez 5 internet-explorer facebook-javascript-sdk
我在实现JS FB-SDK时遇到了一个奇怪的问题。除了IE 11之外，其他所有东西都可以正常工作。官方的JS API的方法FB.login（收到回调）在OAuth对话框弹出并且用户授权应用程序后将其触发两次。第一次返回参数为undefined 的响应，第二次返回所有期望值。authResponse
我绝对不知道为什么会这样。我已经检查过两次和三次，FB.login在任何地方都没有两次被调用。有没有人克服这种情况或使FB登录与IE一起工作？
它可以在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 build index.html然后运行parcel index.html。当然，您需要使用有效的OAuth重定向uri（ngrok一个）配置一个开发者FB应用。还请记住，在测试之前必须从fb中注销。这是登录FB并授权测试FB应用程序后的结果：
他们在那里，两个回应真是棒极了！
谢谢