Facebook Canvas, Unable to login from facebook on mobile devices

Question

I have a canvas facebook application which has both a web page and a designated mobile page. The web page works fine and also when simulating the browser to mobile with the console everything works fine.

But, when I try to run the app from the facebook mobile app the canvas app loads (which is correct), but it does not login.

I am using the FB.login function.

login: function () {
        var deferred = $q.defer();
        FB.login(function (response) {
            if (!response || response.error) {
                deferred.reject('Error occured');
            } else {
                deferred.resolve(response);
            }
        }, {
            scope: 'email, user_friends'
        });
        return deferred.promise;
    },

and in the settings > advanced - I have the: Client OAuth Login,Web OAuth Login, Embedded Browser OAuth Login,Valid OAuth redirect URIs and Login from Devices filled correctly.

but still from the facebook mobile app the canvas app does not preform the login.

I have been trying to get this to work all day. and I cant find a solution anywhere. I also cant debug the mobile facebook app.

any ideas how to approach this issue?

EDIT

Also looked at my Node server logs and I see that the FB.login is not even called.

EDIT 2

I ended up replacing the login with getLoginStatus which poses no problem to me since its a facebook canvas app... but the question still remains on how to do the login.

EDIT 3 11/26/2015

well so getLoginStatus did not completely solve my issue since it does not in fact log the user in so for the canvas games you probably need to login for the first entry if you need permissions... my solution was to add the login if the getLoginStatus returns not_autorized like so:

        /**
     * [getLoginStatus get the FB login status]
     * @return {[type]} [description]
     */
    getLoginStatus: function () {
        var deferred = $q.defer();
        FB.getLoginStatus(function (response) {
            if (response.status === 'connected') {
                deferred.resolve(response);
            } else if (response.status === 'not_authorized') {
                _fbFactory.login().then(function (fbLoginResponse) {
                    deferred.resolve(fbLoginResponse);
                });
            } else {
                deferred.reject('Error occured');
            }
        });
        return deferred.promise;
    },

But wait, there is more... the FB.login function will not work well on mobile canvas games (not sure if its just not triggered or the browsers blog the popups or both). anyway you need to actively call it via button... so for mobile canvas games I had to add a start playing button and then the login does work..

EDIT 4 (Final)

eventually I noticed that FB.login() does not get triggered unless its an external event that triggers it, so I had to make a change for Mobile canvas where if the getLoginStatus doesnt return connected then I show a login button which does the login... the rest stayed the same. what I did for mobile was similar to the accepted answer only to suit my needs...

I hope this helps someone besides me...

Answer 1

Make sure you're calling FB.login() with an event triggered by the user, such as an onclick on a button, as browsers can block potentially unsafe/dangerous javascript that's called directly. This is an extra layer of security for the end-user. There's 2 ways to create a login button:

1. Generate a login button with facebooks login button generator: https://developers.facebook.com/docs/facebook-login/web/login-button

The generated login button will look similar to this:

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

2. Create your own html and use an onclick event to call FB.init():

   <button onclick="FB.init()">Login</button>
   

Notes from the Facebook developers website:

As noted in the reference docs for this function, it results in a popup window showing the Login dialog, and therefore should only be invoked as a result of someone clicking an HTML button (so that the popup isn't blocked by browsers).

https://developers.facebook.com/docs/facebook-login/web

Also, FB.getLoginStatus is the correct first step in logging in to check whether your user is logged into facebook and into your app.

There are a few steps that you will need to follow to integrate Facebook Login into your web application, most of which are included in the quickstart example at the top of this page. At a high level those are:

1. Checking the login status to see if someone's already logged into your app. During this step, you also should check to see if someone has previously logged into your app, but is not currently logged in.
2. If they are not logged in, invoke the login dialog and ask for a set of data permissions.
3. Verify their identity.
4. Store the resulting access token.
5. Make API calls.
6. Log out.

I see that your game doesn't require a login anymore, but maybe others will find this answer useful. :)