FB.getLoginStatus弹出窗口中的FB.login被阻止 [英] FB.login inside FB.getLoginStatus popup window blocked

问题描述

我正在尝试使用Facebook Javascript SDK将Facebook登录信息集成到我的网站中.根据Facebook开发者文档此处提供的分步说明，这里是测试我写的代码:

I'm trying to integrate Facebook login into my website with Facebook Javascript SDK. According to the step by step instructions provided by Facebook Developer document here, here is the test code I wrote:

<script>
window.fbAsyncInit = function() {
    FB.init({
        appId      : '{$MY_APP_ID}',
        cookie     : true,  // enable cookies to allow the server to access the session
        xfbml      : true,  // parse social plugins on this page
        version    : 'v2.1', // use version 2.1
        status     : true,   // check FB login status
    });
};

function fblogin() {
    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
        alert('Logged in.');
      }
      else {
        FB.login();
      }
    }, true);
}
</script>
<button onclick="fblogin()">login</button>
<script src="//connect.facebook.net/en_US/sdk.js"></script>

对不起，由于网站域名的限制，我无法将其摆弄.但是我尝试了自己的域，在Chrome和Firefox中弹出了Facebook登录窗口，但被Safari阻止了.这有点奇怪，Facebook开发人员文档提供的代码段有什么问题吗?

Sorry, because of the restriction of website domain, I can't take this to fiddle. But I tried on my own domain, the Facebook login window popuped in Chrome and Firefox, but blocked by Safari. This is kind of weird, is there anything wrong for the code snippets provided by Facebook Developer Document?

推荐答案

正如我们在注释中已经讨论的那样，必须在用户交互时调用FB.login，文档中的示例不正确.

As we already discussed in the comments, FB.login must be called on user interaction, the example in the docs is not correct.

这应该是一个有效的示例，说明如何正确进行登录，并从Facebook文档中的几篇文章中一起复制了这些内容:

This should be a working example how to do a login correctly, copied together from several articles in the Facebook docs:

<script>
    //call this on user interaction (click)
    function doLogin() {
        FB.login(function(response) {
            if (response.authResponse) {
                console.log('Welcome!  Fetching your information.... ');
                FB.api('/me', function(response) {
                    console.log('Good to see you, ' + response.name + '.');
                });
            } else {
                console.log('User cancelled login or did not fully authorize.');
            }
        }, {scope: 'email,user_friends'});
    }

    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'your-app-id',
            xfbml      : true,
            version    : 'v2.1'
        });

        FB.getLoginStatus(function (response) {
            if (response.status === 'connected') {
                // the user is logged in and has authenticated your
                // app, and response.authResponse supplies
                // the user's ID, a valid access token, a signed
                // request, and the time the access token 
                // and signed request each expire
                var uid = response.authResponse.userID;
                var accessToken = response.authResponse.accessToken;
            } else if (response.status === 'not_authorized') {
                // the user is logged in to Facebook, 
                // but has not authenticated your app
            } else {
                // the user isn't logged in to Facebook.
            }
        });
    };

    (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'));
</script>
<button onclick="doLogin()">login</button>

更多说明: http://www.devils-heaven.com/facebook-javascript-sdk-login/

这篇关于FB.getLoginStatus弹出窗口中的FB.login被阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！