Refused to display document because display forbidden by X-Frame-Options - javascript

I'm building a Facebook app and I have noticed that when attempting to get the login status of the user using their Javascript API, I sometimes get the error:
"Refused to display document because display forbidden by X-Frame-Options."
I've been able to reproduce this every time I hit the "check login status" page of the app only while using Facebook as a page, rather than my user account. This is easy enough to avoid now that I know this causes the problem, but obviously my users may not know this.
Is there a way to determine whether or not the user is using Facebook as a Page or not? Since that seems to pretty much ruin my entire app.

I had this problem too, fixed it with:
The app was redirecting the user to a login screen from Facebook (auth dialog box), while the user was already logged in.
So I changed the code to redirect either to the success page if logged in, or to the dialog box if not logged in.

This is a problem when facebook redirects to your app from a web browser and then you redirect to the facebook authorization sign in. You have to make sure that the form replaces the page and does not load into the facebook canvas as it does not like it.
So you have to do a clean redirect like so -this is node example
res.send("<script> top.location.href='"+ "https://www.facebook.com/dialog/oauth?
client_id=*********&redirect_uri=http://apps.facebook.com/myapp" + "'</script>");
Look at this facebook dev page and its in step 3
https://developers.facebook.com/docs/howtos/login/server-side-login/
Does not seem to be a problem with mobile apps just desktop

Does this javascript work?
document.write(isFacebookPage()?"YES, I'm in a Facebook Page!":"No, not a Facebook Page");
function isFacebookPage(){
return (document.location.href.indexOf('/pages/')>0);
}

Related

Facebook JS API: User does not stay connected

I have a simple web app where users can login via Facebook to CRUD objects (and show them on a map).
I successfully implemented the login and logout functions using the full example code from Facebook documentation, but the user doesn't stay logged in.
When I log in, I'm able to display the my Facebook Surname and Name, but when I refresh or go to the next page of my app, the Facebook API tells me that I'm not connected (anymore) and thus I have to reconnect.
The same happens with the full example code. On page refresh: you have to login again.
Am I missing something here ?
That was pretty dumb but my browser (chrome) was blocking cookies from facebook.com on my website, so I couldn't stay logged.
Resolved the problem by authorizing facebook.com cookies on my website.

Facebook's PHP SDK with custom login page instead of redirecting?

Is it possible to create a custom login page to use with facebook's PHP/JavaScript SDK? I'm developing a web app and it doesn't seem very user-friendly to redirect the user to the facebook page to login. For example, once you hit login it doesn't even let the user know its loading, just sits there until it logs in.
I was wondering if it's possible to use ajax or cURL to log the user into facebook through a form within my app.
No this is not possible, you have to use Facebook's OAuth protocol.
Have you tried their javascript solution? This does not take the user away from the page, but instead opens a popup which is less of an intrusion on the page.
The facebook api is just for you to obtain access credentials from their system. I do not know and until then I never saw no way to get credentials and log into facebook without the facebook api.

Using Facebook Dialog in Windows 8 HTML5/JavaScript App

I am following the dialog documentation to try to display dialog in a Windows 8 Store app (html5/javascript).
https://developers.facebook.com/docs/reference/dialogs/
In a Windows 8 Store app, we have to use iframe to display another web page. Here is an example of what I did:
<iframe src="https://www.facebook.com/dialog/feed?app_id=145634995501895&redirect_uri=http://www.facebook.com&show_error=true&display=iframe&access_token={access_token}"></iframe>
Since it is an iframe, I specify display=iframe and access_token={access_token}.
If you want to try it, please remember to change access_token.
I get the following errors:
API Error Code: 110
API Error Description: Invalid user id
Error Message: Missing user cookie (to validate session user)
I guess this may be caused by the fact that user has not login yet. In the documentation (https://developers.facebook.com/docs/reference/dialogs/), it said "If the user is not already logged in, Facebook will prompt them to login before showing the the Dialog you invoked." I am wondering how to prompt the user to login? Did I miss a parameter to prompt user to login? I looked through the parameters, I did not seem to find anything.
Appreciate your help.
I am seeing different behavior from you which I'll document here, even though it may not be "your answer".
I obtained my own access token, and when I use your IFRAME, I do see the attempt to redirect to Facebook.com to login; however, that's followed by a security error in the JavaScript console - including the following:
APPHOST9613: The app couldn’t navigate to
https://www.facebook.com/login.php?api_key=177388709024886&skip_api_login=1...
because of this error: FORBIDFRAMING.
A request to the login.php script generates a response with the X-FRAME-OPTIONS header to DENY. This would indeed prevent the login page from Facebook from appearing in the IFRAME within the app - hence FORBIDFRAMING.
There is some discussion on an MSDN Forum thread as well and it's slightly dated, but am not aware of any changes since then.
I have not tried Facebook logins directly with Window 8 applications using Windows Azure Mobile Services, but it may be something to try. Azure Mobile Services is VERY simple to set up, so you'll know very quickly whether or not there is still an issue within a HTML5/JS Windows Store app.

How to logout users after they have liked a page with the Facebook Like plugin?

I am building a very small webpage to use in a kiosk stand. The goal is to let people "Like" a facebook page on location with a touchscreen.
Users have to login first to like a page, so Facebook will come up with their regular Login popup, which works like a charm. When the user logged in, the page is liked (since they clicked the "Like"-button) and the user should be logged out again (since no-one wants to be logged in on a public computer). The page should reload after that.
Now this is possible with the Javascript API from Facebook. They have an event listener that calls a function when a user likes a page. I just have to call FB.logout() when that event triggers :) .
Unfortunatly, it isn't working for me. I could be very dumb, or the Facebook API is bugged.
My code:
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create', function(response) {
FB.logout(function(response) {
window.location.reload();
});
});
}
But this doesn't work, and I think the problem lies in the Login part from Facebook.
Does anyone has any experience with this? It should be very simple, but I can't get it to work...
Some things I have tried:
Prompt a normal login - Possible, but it says that my app needs access to some information. Really the only thing I want to do is get users to like a page.
setTimeout loop - Tried this, but the Facebook Login seems to stop Javascript as a whole on my page?
EDIT: I know that it is a bad idea for people to insert their credentials into a public computer, but the customer wants it this way. There is also a QR-code which links to the Facebook page, but that doesn't solve my problem :) .
TL;DR: Facebook Javascript callback from the "Like"-button works when a user is Logged in, but fails when a user has to log-in via the Facebook pop-up.
Unfortunatly, it isn't working for me. I could be very dumb, or the Facebook API is bugged.
Nope. The problem lies in your approach, resp. the concept.
FB.logout only works with an active access token (since otherwise, any site I visit on the net could log me out of Facebook, and that would be hugely annoying).
But since the user does not connect to your app, you don’t have an access token.
Prompt a normal login - Possible, but it says that my app needs access to some information.
That is the only way you will get an access token, and since the only way you can use FB.logout.
(And if the user logs in to Facebook, but then denies connecting to your app, again you will not have an access token, so you can’t log them out in that case either.)

Facebook API - OAUTH login screen retains user email address

I have a public-facing web app that will be in a kiosk-like environment. The app requires users to log in with Facebook in order to interact with the app. I am not requiring users to register or to sign up for the site, but rather just log in so the app will have access to their basic info.
This works perfectly, but the issue is when a user logs out and the app is ready for the next user to log in, the previous user's email address is in the OAUTH form.
Is there any way to keep this from being persistant?
EDIT:
To log in, users are being redirected to the Facebook OAuth Dialog page. Once the user logs in it redirects back to the app. It's not really "authenticating" for the app, I am just using Javascript to show the app content once the Facebook JS API detects that a user is logged-in.
Edit
some reason I cannot log in with my account "kevinj". Anyway, I should have been more specific in regard to the setting of this app. It is an iPad web app and the tablet device will be handed out to users for interaction and gathering data.
I have "fixed" this issue by forcing FB to use the desktop browser based OAUTH dialog instead of the Touch version. This allows the user to un-check the "keep me logged in" option and clear out their info after log out.
Thanks for the suggestions and input. I wish I could close this question out but can't log in to my account.
Sine you are on a Kiosk-like environment, I suppose you have access to the browser's options?
If that's the case then I think turning of form history will do the trick. (Firefox example)
Have you tried adding "autocomplete="off"" to the HTML field?

Categories