Search code examples
popupfacebook-javascript-sdkfacebook-loginfacebook-authorization

fb.login popup doesn't display additional requested permissions if popups are blocked

I am trying to request additional permissions at the time of a facebook login using Facebook's suggested Javascript SDK. I am using the scope parameter to make the additional request as a part of the FB.login(). My chrome browser has blocked popups. When I load the page containing the FB.login and the scope parameters into my browser, Chrome blocks the automatic popup. When I then click on an html button to perform the facebook login and authorization request, the only permissions that the fb popup shows is the one for basic info. However, if I allow popups, then when I load the page, a facebook authorization popup automatically displays without the need to click on the button to launch the fb login. When this automatic popup displays, it now shows the additional permissions I included in the scope parameters. How can I get the additional permissions to display in the fb login popup when popups are blocked?

Below is my code:

<!DOCTYPE html>
<html>
<head>

<div id="fb-root"></div>
<script>
  // Additional JS functions here
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'MY_APP_ID', // App ID
      channelUrl : 'channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional init code here
    FB.getLoginStatus(function(response) {
                if (response.status === 'connected') {
                        // connected
                } else if (response.status === 'not_authorized') {
                        // not_authorized
                                login();
                } else {
                        // not_logged_in
                                login();
                }
        });

  };
function login() {
        FB.login(
                function(response) {
                                if (response.authResponse) {
                                // connected
                                } else {
                                // cancelled
                                }
                },
                {scope: 'email, user_birthday'}
        );
}

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>
</head>

<body>
<button type="button" onclick="FB.login()">login</button>
</body>
</html>
Solution

  • FB.login can not be used outside of an event handler (user initiated) due to it creating a popup when used outside of Canvas. Instead, display a button that the user can click in order to execute FB.login.

    The reason why your button does not ask for permissions is simply because you havent added any to the function call - you use FB.login() - no perms there.