Facebook Authorization redirecting to "The page you requested was not found" on mobile devices - facebook

I've been building out a social gifting platform, and have had an application running for a few months now at: http://egift.me/promos/venue/facebookconnect
There is a simple user flow for the app. Click the Login/Connect facebook button, login &/or authorize the application, and you're redirected to a 'thank you/confirmation' style page.
If I step through this on a standard browser, I have no problems. If I step through this on mobile, I ultimately get the lovely "The page you requested was not found" page.
I don't have a Mobile Web url configured, I'm simply using Website with Facebook Login. Even when I have tried adding a mobile web url (it's the same base URL, I'm using View Switching to serve up a desktop vs mobile optimized view), I get the same issue.
Anyone have any idea what's going on? Is there any additional information I can provide?
[UPDATE]
This works (be sure to change your scope):
//instead of onClick could just as easily use something like jQuery event binding
<button onClick="loginUser();">Login</button>
<script type="text/javascript">
function loginUser() {
FB.login(function (response) { }, { scope: 'YOUR_SCOPE_HERE' });
}
FB.getLoginStatus(function (response) {
FB.Event.subscribe('auth.authResponseChange', handleResponse);
});
handleResponse = function (response) {
document.body.className = response.authResponse ? 'connected' : 'not_connected';
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
} else if (response.status === 'not_authorized') {
// the user is logged in to FB, but has not yet authenticated your app
} else {
// the user is not logged in to FB
}
};
</script>

For mobile web apps, I'd recommend to use FB.login via the SDK itself rather than through the use of the login button. If nothing else it gives you greater programmatic control of the user flow & experience.
The canonical "simplest ever social app" snippet is:
FB.login(function(response) {
if (response.authResponse) {
console.log('Fetching user info');
FB.api('/me', function(response) {
console.log('Hello ' + response.name + '!');
});
} else {
console.log('User cancelled login or did not fully authorize');
}
});
Also you're including the JS SDK for the plugin anyway, so there's no payload overhead. More details on FB.login here: https://developers.facebook.com/docs/reference/javascript/FB.login/

Related

Initiate login for custom stories

I have created a custom story to be posted on facebook timeline when user clicks on a share button.
While i was logged into facebook, I could successfully post on timeline using the following code
function postLike() {
FB.api(
'https://graph.facebook.com/me/og_pricepan:compared',
'post',
{ product: objectToLike,
privacy: { 'value': 'SELF'}
},
function (response) {
if (!response) {
alert('Error occurred.');
} else if (response.error) {
document.getElementById('result').innerHTML =
'Error: ' + response.error.message;
} else {
document.getElementById('result').innerHTML =
'<a href=\"https://www.facebook.com/me/activity/' +
response.id + '\">' +
'Story created. ID is ' +
response.id + '</a>';
}
}
);
Now, when the user is not logged into facebook, I get the following error:
Error: An active access token must be used to query information about the current user.
Shouldn't the login window get open by itself asking the user to login into facebook or I need to do something on my end to handle this situation?
Also, do i need to submit my application for review before users can create custom stories from my website to their timeline?
Shouldn't the login window get open by itself asking the user to login into facebook or I need to do something on my end to handle this situation?
No. You need to explicitly login the user by following the Facebook Login Flow to request an access token
Also, do i need to submit my application for review before users can create custom stories from my website to their timeline?
Yes and No. No, because it's not like you will have someone from Facebook Support Team going through your app to make sure your app ticks all the boxes. Yes, because you will need to register your app with Facebook. So, technically all you need to do is register with Facebook as a developer and register your app in order to get an app secret and API key. You can have your app in "Sandbox mode", create test users and test your integration with Facebook before you publish it live. There's few requirements you need to meet before publishing it, such as providing set of logos of a specific size, etc. Here's a blog explaining part of the process, but really, the process is very straight-forward and you should be able to get through easily by yourself.
Now, the error you are getting says it all. There's no user logged in to facebook. The endpoint you are trying to post to, requires a active valid access token, if it doesn't exist then there's no context, no user authenticated and you need to explicitly authenticate the user by invoking the login dialog...
FB.login(function(response) {
if (response.authResponse) {
// The person logged into your app
} else {
// The person cancelled the login dialog
}
});
If you need to know whether a user is logged in or not, you can follow to simple approaches:
1.By invoking the FB.getLoginStatus function
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
}
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.
}
});
2.Or, by subscribing to the auth.authResponseChange event when initializing the framework and setting the status option to true
There's a full-legged tutorial on Facebook Developers Site for Javascript SDK explaining both approaches.
Hope it makes sense

how to determine if a user has confirmed or canceled signin via facebook javascript sdk

I am logging users into a web site via facebook's Javascript SDK. After the user clicks the "log in through fb" button, I would like to generate different responses depending on whether the user click "ok" or "cancel" in facebook's confirmation. Here is the code I use when they click the fb button.
$("#fb").click(function() {
FB.login(function(response){
FB.api('/me',function(response){
// I believe the test to see if they are logged in or not should go here
});//FB.api
},{scope:'publish_actions, email, user_likes, user_location'});
});
Any advice is appreciated. Thanks!
According to facebook's documentation:
FB.getLoginStatus(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
alert('a');
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
alert('b');
} else {
// the user isn't logged in to Facebook.
alert('c');
}
});
It worked for me. Hope it helps someone else.

Login with facebook not working, cases refresh loop

On one of my websites, we have implemented the Login with facebook script. It was working fine till yesterday but suddenly there seems to be a problem with the script. If I am already logged in facebook, my website's page keeps on refreshing. If I log out of facebook then the refresh stops.
If this is facebook's script problem then I think there would be many other people who are facing this problem. Is any one here also facing this problem ?
please share and provide the solution if there is any.
Thanks
Ishan
We had the same issue and we started using Fb.getLoginStatus instead of FB.Login and redirected the users based on their status to the login page manually.
FB.getLoginStatus(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
FB.api('/me', function (userDetails) {
LoadRegForm(userDetails);
});
} else if (response.status === 'not_authorized') {
Rediret to facebook oauth page
top.location.href = 'https://www.facebook.com/dialog/oauth?client_id=<%= ConfigurationManager.AppSettings["fbappid"] %>&redirect_uri=<%= ConfigurationManager.AppSettings["fbcanvasurl"] %>&scope=email,user_birthday,user_education_history';
} else {
// the user isn't logged in to Facebook.
top.location.href = 'https://www.facebook.com/dialog/oauth?client_id=<%= ConfigurationManager.AppSettings["fbappid"] %>&redirect_uri=<%= ConfigurationManager.AppSettings["fbcanvasurl"] %>&scope=email,user_birthday,user_education_history';
}
You can even call the FB.Login function in the two else blocks instead of the redirect.

User permission dialog doesn't pop-up for tab application

I have a strange behavior for an application that I have implemented and that captures the user's info when accessed.
The application, if accessed from outside Facebook URL, pops-up correctly a JavaScript permission dialog.
But when I inserted this application as a tab application into a Facebook page the permission request dialog doesn't pop-up anymore. Moreover, I have also placed in an FB.getLoginStatus() implementation the detection of the user's current login status in Facebook, with a JavaScript alert pop-up window if the user is not logged in. When the application is called from 'outside' the alert is triggered. When the application is on a Facebook page tab it doesn't.
Is this the correct behavior? If so, how can I enable the permission request in a Facebook tab application. I'm using both JS and PHP Facebook SDKs.
Edit 1 (following CBroe comment):
I'm using the following calls in the application's content.php markup (executed on page load):
<!-- Facebook JS SDK initialization -->
<div id="fb-root"></div>
<script>initFacebookJSSDK();</script>
<!-- End of Facebook JS initialization -->
<script>checkAccessPermission();</script>
<?php include_once 'sites/www.mysite.com/custom_code/custom_index.php';?> // I'm doing
custom code under Drupal
The JavaScript functions are implemented in the custom.js file, as following:
function initFacebookJSSDK() {
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxxxxx', // Application's ID
channelUrl : 'www.appsite.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true // enable OAuth
});
.........
});
.........
}
function getPerms() {
FB.login(function(response) {
if (!response.authResponse) {
//user refused to grant permissions, redirect to the 'index' page
window.location = "/index";
}
}, {scope:"email"}); // I request the permission to get the email address
}
function checkAccessPermission() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//user has granted permissions to the application
var uid = response.authResponse.userID; // not used
var accessToken = response.authResponse.accessToken; // not used
}
else if (response.status === 'not_authorized')
// user is logged into Facebook but didn't grand permissions to the app
getPerms();
else {
//user has not granted permissions, redirect to the 'index' page
alert('Please connect with your Facebook account');
window.location = "/index";
}
});
}
The PHP script - file 'custom_index.php' contains the following snippets:
$config = array();
$config["appId"] = FB_APP_ID;
$config["secret"] = FB_SECRET_ID;
$config["cookie"] = true;
$facebook = new Facebook($config);
// get user UID
$fb_user_id = $facebook->getUser();
// user's first visit, force the permission request window
if ($fb_user_id == 0) {
$location = $facebook->getLoginUrl(array('scope' => 'email'));
..........
}
// user already gave permission, get the profile and process
if ($fb_user_id != 0) {
$access_token = $facebook->getAccessToken();
$user_profile = $facebook->api('/me', array('access_token'=>$access_token));
..........
}
Again, it works very well when the user visits the site outside Facebook, but the permission request pop-up window doesn't show-up when it runs as Facebook tab application (frame inside Facebook). To note that, concerning my previous posting, now the JavaScript statement:
alert('Please connect with your Facebook account');
is executed in both cases, including when the application is run as tab app inside Facebook (I had just to clear the browser's cache).
Here is the solution.
All the code above is correct and stays in place.
I just added a jQuery function on the link that pulls-up the 'content.php' page, as following (the class '.open-content-page' is on the parent page of 'content.php'):
$(document).ready(function () {
$(".open-content-page").click(function() {
checkAccessPermission();
});
});
})(jQuery);
You’re calling your JS function without any user interaction – have you made sure it’s not just your browser’s popup blocker that keeps the dialog from coming up? (Maybe it distinguishes between popups called from a „simple” page vs popups from pages embedded in iframes on other domains.)
Since you can’t rely on your site’s users having their popup blockers set very liberal, it’s generally a better idea to call facebook dialogs on user interaction, f.e. when the user clicks a link/button. Popups called on user interaction are less likely to get blocked than popups that want to open all by themselves.

Display app Canvas page before authorization popup

I'm developping a facebook canvas app with the new Auth Dialog : https://apps.facebook.com/evaway_us/
My problem is that users always have to authorize the application before seeing anything and I have a terrible conversion rate.
How can I make my canvas app display a page prior to any user action requiring authorization ?
Like this : http://apps.facebook.com/tradablebits/
I finally found the solution :
I had "Authenticated Referrals" activated in the new Auth Dialog Menu.
As soon as I unchecked this option, I was able to render my canvas page before the authorization popup.
Using Javascript SDK, use the FB.getLoginStatus() function to determine what page the user should see. See http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/ for more information on how to use that function.
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and connected to 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;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
//but not connected to the app
} else {
// the user isn't even logged in to Facebook.
}
});