Need email perms and user prompted to login despite me not asking? - facebook

Question

I am using the js sdk and getting the basic information such as name, location, id. Great but I need just one more thing and that is email. So I read here that email requires extended permissions. I also read here using fb.login how to ask for extended perms.
In my code from this tutorial here I don't call fb.login yet the visitor gets prompted to login and grant app permissions if they aren't. How is that done? The register button (modified slightly from tutorial) is a div with a class that styles it.
<div class="fb-login-button" data-show-faces="false" data-width="400" data-max-rows="1">Register</div>
Well I inspected the "register" button and found it rendered quite transformed but I never found an onclick or some clue as to how a user clicking on the button event is handled. My GUESS is that the iframe that comes from the styling has a src and the event must be on fb side.
So going back to my script I thought perhaps fb.login was with fb.init and I could add my perm request there but there is no fb.login?? I thought maybe to put it in the else branch below but nothing is there now and it works...minus extended perms for email?
window.fbAsyncInit = function ()
{
FB.init({...removed for concise....});
//If user authorizes using fb account info:
FB.Event.subscribe('auth.authResponseChange', function (response)
{
if (response.status === 'connected')
{
...removed for concise code...
}
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.
//**HERE IS WHERE I WOULD HAVE THOUGHT TO PUT FB.Login**
}
});
};
So what is eluding me is how the pieces fit together in the puzzle. I KNOW I need to ask for extended permissions to get the json to include email but not sure where to make the perm. request at???
This code here is the actual code in the page so you can see my entire sdk implementation.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function ()
{
FB.init({
appId: 12324, // App ID
status: true, // check login status
cookie: true, // enable cookies
xfbml: true // parse XFBML
});
//If user authorizes using fb account info:
FB.Event.subscribe('auth.authResponseChange', 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;
// send access token to server so we can fill in fields
var form = document.createElement("form");
form.setAttribute("method", 'post');
form.setAttribute("action", '/mypage');
var field = document.createElement("input");
field.setAttribute("type", "hidden");
field.setAttribute("name", 'accessToken');
field.setAttribute("value", accessToken);
form.appendChild(field);
document.body.appendChild(form);
form.submit();
} 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.
}
});
};
// 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>

Answer 1

Since you are not using the SDK itself to login, but the login button, you have to request the permission via the scope parameter, set as data-scope="…" on the button itself, see https://developers.facebook.com/docs/reference/plugins/login/
The other alternative would be to remove the button, and call FB.login onclick on a button/link of your own making.