Display app Canvas page before authorization popup - facebook

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.
}
});

Related

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.

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

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/

FaceBook Javascript SDK OAuth authorization when user already logged in on FB

I'm trying to find solution for situation when user is logged out from my app, but still is logged in on facebook, and trying to log in via OAuth to my app again.
I'm checking authorization status by listening to 'auth.login' event.
When user in this situation clicks facebook-connect button, pop-up fires up, gets self-closed and then nothing happens(because user was already logged in on facebook, login event is not fired). If I add getLoginStatus() check, then user gets logged in automatically to my app, when opening the page, even if he didnt click facebook-connect button(thats what I dont want) Any ideas? Thanks!
Specify here your execution code when user already logged in this FB event.
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
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.
}
});

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.

Automatically log in user if they have already authoized offline access

I have everything working correctly including the log in using the Javascript SDK. When the user first goes onto my app they will click to log in to get the initial token and authorize for offline_access.
What I need is that when that user returns it will (in the controller) automatically log them into FB so that I can access their account again WITHOUT having them click the "LogIn to FB" button.
Thanks!
You will need to do this with the Facebook Javascript SDK. You call the method 'getLoginStatus' when the page loads and you can determine if the user has authorized your app. See: https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
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
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.
}
});