Funny Frontend Funny Frontend - 5 months ago 52
PHP Question

Google chrome block pop-up facebook login

I launch a FB.login() in my laravel php app, but Chrome blocks the popup:

<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{{config('services.facebook.client_id')}}',
xfbml : true,
version : 'v2.5'
});
};

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

function facebookLogin(e){

isLoggedIntoFacebook(function(isLoggedIn) {
if (isLoggedIn) {
window.location.href = '{{ route('social.redirect', ['provider' => 'facebook']) }}'
} else {
FB.login(function(response) {
loginUserIntoRegalosPersonales();
}, { scope: ['email', 'user_birthday'] });

FB.Event.subscribe('auth.login', function () {
window.location.href = '{{ route('social.redirect', ['provider' => 'facebook']) }}'
});
}
});
}

function isLoggedIntoFacebook(callbackFunction) {
FB.getLoginStatus(function(response) {
var isLoggedIn = (response.status === 'connected');

if (typeof (callbackFunction) == "function") {
callbackFunction(isLoggedIn, response);
}
});
}
</script>


Sorry, because of the restriction of website domain, I can't take this to fiddle.

whats is the problem?

Answer

Those things are important:

  • Use FB.getLoginStatus on page load only
  • Use FB.login directly on user interaction (mouse click), not in an (asynchronous) callback function

Example: http://www.devils-heaven.com/facebook-javascript-sdk-login/

Do NOT expect the user to change his browser settings, that would be a very bad solution. Fix your code and everything will be fine.