I am encountering an issue with my canvas Facebook application that has both a web page and a designated mobile page. The web page functions properly, and when I simulate the browser to mobile using the console, everything works fine. However, when I attempt to run the app from the Facebook mobile app, the canvas app loads correctly but fails to login. I am utilizing the FB.login function.
login: function () {
var deferred = $q.defer();
FB.login(function (response) {
if (!response || response.error) {
deferred.reject('Error occurred');
} else {
deferred.resolve(response);
}
}, {
scope: 'email, user_friends'
});
return deferred.promise;
},
In the settings > advanced section, I have Client OAuth Login, Web OAuth Login, Embedded Browser OAuth Login, Valid OAuth redirect URIs, and Login from Devices filled in accurately. Despite this, the canvas app still does not perform the login feature within the Facebook mobile app. I have been attempting to resolve this issue all day without success, and I am unable to debug the mobile Facebook app. Does anyone have any suggestions on how to address this problem?
EDIT
I also checked my Node server logs and noticed that the FB.login function is not being called.
EDIT 2
I opted to replace the login function with getLoginStatus, which poses no issues for me as it is a Facebook canvas app. However, I am still working on finding a solution for the login functionality.
EDIT 3 11/26/2015
After trying getLoginStatus, I realized that it did not completely resolve the issue as it does not log the user in. For canvas games, you may need to login initially for permissions. My workaround was to add the login if getLoginStatus returns "not_authorized" 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 occurred');
}
});
return deferred.promise;
},
Furthermore, the FB.login function may not work effectively on mobile canvas games, possibly due to pop-up blockers. You may need to manually trigger it through a button press. For mobile canvas games, I had to include a "start playing" button to initiate the login process.
EDIT 4 (Final)
I eventually discovered that FB.login() will not trigger unless prompted by an external event. Therefore, for mobile canvas, if getLoginStatus does not return "connected," I display a login button to facilitate the login process. This adjustment allowed me to maintain consistency across different platforms while ensuring the login functionality works as intended. My modifications for mobile were similar to the accepted answer provided here, tailored to meet my specific requirements.
I hope this information proves helpful to others facing similar challenges.