Menu
Per documentation, the html attribute 'onlogin' can be used to run a callback function after a login is complete
However we're consistently getting the supplied function run twice, causing problems when it does actual work.
While we can catch this with a counter of how many times its run I'd rather have an understanding of why this happens and fix it than apply a workaround. The entirety of the code is below (won't run in snippet):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>facebook login test</title>
<script src="/Vendors/jQuery/jquery-3.2.1.min.js"></script>
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'foobar123456', // see https://developers.facebook.com/apps/
cookie : true,
xfbml : true,
version : 'v2.11' // see https://developers.facebook.com/docs/javascript/quickstart
});
FB.AppEvents.logPageView();
};
(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'));
</script>
<!-- LOGIN BUTTON scope at: https://developers.facebook.com/docs/facebook-login/permissions/ -->
<div class="fb-login-button" data-width="250" data-max-rows="1" data-size="large" onlogin="fbLoginHandler" data-scope="public_profile,email" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="true"></div>
<script>
console.log("reached script tag");
var timesfbLoginHandlerFired = 0;
var fbLoginHandler = ()=>{
timesfbLoginHandlerFired++;
console.log("fbLoginHandler fired ["+timesfbLoginHandlerFired+"] times");
};
</script>
</body>
</html>And the console:
Navigated to https://fbtest.dev/fblogin <- on page load
reached script tag <- on page load
XHR finished loading: POST "https://www.facebook.com/ajax/bz". <- on page load
XHR finished loading: POST "https://www.facebook.com/ajax/bz". <- on facebook login prompt window opening
fbLoginHandler fired [1] times <- on login complete
fbLoginHandler fired [2] times <- on login complete
926
My Faster workaround was as following:
I just set a variable called fblogin_done
fblogin_done = 0;
And in the function that is being executed twice i put a counter and a blocker with a timer
function CheckLoginState() {
if (fblogin_done == 1) return; // avoid twice executions
fblogin_done = 1;
window.setTimeout(function(){
fblogin_done = 0; // wait 1 second after a second execution
}, 1000);
}
A second was enough to me to avoid more than 1 execution,
93
It seems to have to do with the data-auto-logout-link set to true.
Setting that to false, stops the button from firing the onlogin function twice.
Without seeing how the SDK handles it, my best guess is that when the button changes to become a logout button, it must be checking for login and triggering the onlogin function a second time.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
