Question

I’m developing a Facebook Page Tab app where a user will be drawing on the page with HTML5 canvas. When the user submits their drawing (basically a form), I need to check if the user has granted my app the necessary permissions. If not, pop the Facebook dialog asking the user to authenticate with my app before submitting the form. Once the user is authenticated (or if they already were), submit the form.

In short, how can I submit a form only if the user has authenticated my app using Facebook Javascript SDK?

UPDATE:

I was able to solve this using FB.getLoginStatus and FB.Login per Shaun’s suggestion. Here’s an example:

$('#submit').on('click', function() {
        FB.getLoginStatus(function(response) {
                if (response.status === 'connected') {
                    // User authenticated, submit the form
                } else if (response.status === 'not_authorized') {
                    // the user is logged in to Facebook,
                    // but has not authenticated your app
                    FB.login(function(response) {
                        // handle the response
                    }, {scope: 'email,'});
                } else {
                    // the user isn't logged in to Facebook.
                    FB.login(function(response) {
                        // handle the response
                    }, {scope: 'email,'});
                }
            });
        });

Answer 1

To answer briefly,

You will need to confirm FB.getLoginStatus to determine if the user has/has not authed your app

http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/

Then either ask them to FB.login and when successful submit form or if they have authed submit the form

http://developers.facebook.com/docs/reference/javascript/FB.login/