谷歌镀铬块弹出Facebook登录

Question

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 1

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.