-3

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?

andyrandy
  • 72,880
  • 8
  • 113
  • 130
Funny Frontend
  • 3,807
  • 11
  • 37
  • 56
  • 1
    You need to call `FB.login` _directly_ on user interaction (such as a click on a link/button). Nesting it into any async stuff will make the popup blocker block it. – CBroe Jun 23 '16 at 09:56
  • chrome may block popups, you cant stop it. it's better to tell the user to allow any popups from UX perspective – astroanu Jun 23 '16 at 09:59
  • @astroanu Telling your users that they need to allow popups to continue sounds like a good way to send them packing. If you can't remove popups from your login flow, then consider a different login flow, such as doing a full redirect. – Eliezer Berlin Feb 13 '19 at 11:19

2 Answers2

6

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.

andyrandy
  • 72,880
  • 8
  • 113
  • 130
-3
Turn pop-ups on or off
1-Open Chrome.
2-In the top-right corner, click the icon you see: Menu or More .
3-Click Settings.
4-Click Show advanced settings.
5-Under "Privacy," click Content settings.
6-Under "Pop-ups," select Do not allow any site to show pop-ups (recommended) or Allow all sites to show pop-ups.
Gorakh Yadav
  • 304
  • 5
  • 19