Using XFBML login button asks user to authenticate twice

Question

I am simply trying to setup Facebook Connect to allow the choice on my already established site to register with the registration form, or to register with Facebook Connect (this really should be easier than it is, the outdated docs are driving me insane). When the user clicks the button, it opens the popup and asks to allow the things that I asked correctly. However, when they click Allow, it asks to allow again (but just the basic profile info). This is obviously triggered from the default action of clicking the fb:login-button, even though they have already logged in and allowed the app to access their data.

<fb:login-button size="medium" length="long" v="2" onclick="fb_login()"></fb:login-button>
<div id="fb-root"></div>
<script src="http://static.ak.fbcdn.net/connect/en_US/core.js"></script>
<script>
    FB.init({appId: '<app_id>', status: true, cookie: true, xfbml: true});

    function fb_login() {
        FB.login(function(response) {
            if (response.session) {
                if (response.perms) {
                    // they have allowed the app, continue with registration
                }
            }
        }, {perms:'email,user_birthday'});
    }
</script>

Answer 1

Apparently you can just assign the permissions in the FBML and can bypass calling FB.login altogether. It would would be great if Facebook would mention that in their docs (rant).

<fb:login-button size="medium" length="long" v="2" perms="email,user_birthday" onlogin="fb_login()"></fb:login-button>
<div id="fb-root"></div>
<script src="http://static.ak.fbcdn.net/connect/en_US/core.js"></script>
<script>
    FB.init({appId: '<app_id>', status: true, cookie: true, xfbml: true});

    function fb_login() {
           // they have allowed the app, continue with registration
    }
</script>