FB.login inside the FB.getLoginStatus popup is blocked

Question

I am trying to integrate Facebook login to my site using the JavaScript Javascript SDK. Following the step-by-step instructions provided in the 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> 

Sorry, due to the domain restriction of the website, I cannot accept this to play. But I tried in my domain, the Facebook login window appeared in Chrome and Firefox, but Safari blocked it. It's weird, is there something wrong with the code snippets provided by the Facebook Developer Document?

Answer 1

As we already discussed in the comments, FB.login must be called to interact with the user, the example in the documents is incorrect.

This should be a working example of how to log in correctly, copied from several articles in Facebook documents:

 <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 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> 

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