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>
FB.logincan 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 executeFB.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.