i am trying to open facebook authentication page in IFRAME that i have created on my page
but the problem is once the page get loaded into iframe and i click on an iframe the facebook authentication page acquires the whole page in a full screen and iframe get vanish.
https://graph.facebook.com/oauth/authorize?client_id=<id>&type=user_agent&redirect_uri=http://localhost:3662/test.web/pages/z.aspx&display=popup
here is my url that i am setting in iframe src attribute
I just ran into this myself. The solution I used?
Javascript Authentication
And the rough steps
// trigger this any way you want
window.open(
'https://graph.facebook.com/oauth/authorize?client_id=CLIENT_ID&display=popup&scope=PERM_LIST&redirect_url=http://example.com/oauth_redirect'
, 'authorize'
, 'width=600,height=350'
);
This displays the authentication window in a popup. Now, the next bit what you do with the redirect url (in my example, http://example.com/oauth_redirect)
The access_token parameter in the URL holds the OAuth token - so retrieve that and do whatever you need to with it (store in a cookie, whatever). And then use JS to control what happens to the popup and opener
<script type="text/javascript">
// Perhaps load the next page?
window.opener.location = 'http://example.com/canvas'
// close the popup
window.close();
</script>
See this relevant forum thread as well.
Not sure about that, but I think the "popup" form factor is for real popups, you should try the "page" form factor here
This is a security mechanism; the user has little way to tell whether your IFRAME is really Facebook, or you presenting something that looks like Facebook. With a full URL at the top, this becomes much more transparent (yes, they should implement SSL with a valid cert to truly prove this, but hey).
Login in iframe is not allowed for security reasons. Use a popup instead. You can do what Peter suggested with window.open or use the JS SDK, for example: http://fbrell.com/auth/all-in-one.
Related
I developed a facebook fan page app with PHP SDK and am successfully running it. I have a Fan Gate implemented, that is, users have to like the page before they can use the app.
What I could not solve until yet is this: I would like to prevent my app from running outside of the Facebook iframe. As of now my app can run in a new browser tab or window, when a user copies and pastes the URL (of the iframe src). At this point I'd like to give an error message like "This app can only run in a Facebook tab".
I am catching the signed_request but as my app has subpages and routines, I have to store the signed_request in a session variable.
Any advices?
Ok, so what I usually do is provide data in the app_data field of signed_request to know which page to load. When POSTing, I redirect to the tab directly after processing the payload.
So, there are two methods a page, that is actually a facebook tab, may be requested: GET and POST.
GET
When using GET, the tab should always be requested using a facebook URL. For example: The tab's subpage "form" should have a URL like: http://www.facebook.com/pages/xXx/[page_id]?sk=app_[app_id]&app_data=form
In your server-side code you recognize the data in app_data after decoding the signed_request (see 1 and 2).
In your links to the form page, you also have to add the target="parent" attribute.
By this, facebook is reloaded and the tab feels slower than when you directly link the subpages. But you have URLs that identify a subpage, which is what we prefer.
Additionally, you can expect every GET request to have a signed_request. If it doesn't, it is not called via facebook and you can either show an error message or, what I suggest, redirect to you tab (sub-page).
POST
POSTs never have a signed_request. But usually, when surfing, browsers use GET requests. So you can assume, if you receive a POST request, it is either from your own form or a hacking attempt.
In both cases, you check the values of that request for validity.
If they are valid, you save them to your DB and redirect to a "success" page. E.g. if you are up for a contest, you should show a page that assures the user he/she has successfully participated.
If the data is not valid, you save your error messages into the session and redirect back to the form where you show them.
I always suggest you redirect after a POST request, no matter if you are in a facebook tab or not. But in a facebook tab, the redirect must be done using a javascript since it is within an IFRAME and you want the whole page to reload:
<script type="text/javascript">
parent.location.href = 'http://www.facebook.com/pages/xXx/[page_id]?sk=app_[app_id]&app_data=form';
</script>
Post scriptum 1: For me, forms always use POST requests.
Post scriptum 2: If you don't like the idea of the whole facebook "frame" to be reloaded every click, you can think of doing some AJAX magic where the requests are "spiced" with extra data for you to recognize them as "yours".
Im trying to put the facebook permissions dialog within an iframe, however not making much progress because of lack of Facebook documentation, and the undocumented hacks around web are not working any more.
news.yahoo.com does something that i would like to emulate.
When you click on a news article it says login with facebook. After the initial oauth dialog to authenticate the user ( which does not ask for permissions), yahoo pop's another dialog from a yahoo URL which included the Permissions dialog within as an IFrame.
Does anybody know what API's can be used to accomplish this?
The fiddler trace indicates that the yahoo URL is calling:
the uiserver.php endpoint with the permissions.request method.
https://www.facebook.com/connect/uiserver.php?method=permissions.request&app_id=194699337231859&display=iframe&redirect_uri=https%3A%2F%2Fopen.login.yahoo.com%2Fopenid%2Fyrp%2Fsc_check&cancel_url=https%3A%2F%2Fopen.login.yahoo.com%2Fopenid%2Fyrp%2Fsc_check&perms=user_birthday%2Cuser_likes%2Cemail%2Cpublish_actions&response_type=code&locale=en_US
When i try to do this using FB's javascript SDK:
FB.ui({
method: 'permissions_request',
perms: 'read_stream,publish_stream,user_photos',
display: 'iframe'
},
function(response){
alert("badfood");
alert(response);
});
It goes to a different endpoint: facebook.com/dialog/permissions_request? ...
And I get a 500 server error from facebook without useful debug info.
Thanks
some things.
1) first add the parameter show_error=true. This will tell you more about what's really causing the error.
2) Facebook has multiple ways it can display any dialog. In the fiddler request, note the display=iframe parameter. This is used for canvas applications mainly but can be useful for regular iFrame displays as well. It opens the auth dialog in a lightbox.
3) Try loading the SDK synchronously. Remove the Async references that Facebook tells you to include at the top of the page after the body tag and use the secondary method. Include the all.js and fb-root div tag and load FB.init just before your FB.ui call.
4) Check out the echo tool.
This tool can print out your GET params or your . It can also decode
the signed_request parameter as used in Canvas applications with the
OAuth 2.0 Beta migration enabled. This is very useful in debugging
Canvas Authentication.
http://developers.facebook.com/docs/reference/dialogs/
Loading the auth/permissions dialogs inside iframes are not permitted nor possible due to the risk of clickjacking. Sites where you see this being done have special agreements with Facebook that allows them to do this.
how can I embed my app in my facebook page in a way as here:
www.facebook.com/SzkolaSTRAMA?v=app_323694844330149
I have attached the app to my page using the magic url:
http://facebook.com/add.php?api_key=&pages=1&page=
and tried to open somehow the app within using the v parameter, but it seems it is not that. Can someone give me a clue? Thanks.
Now you can add an application to a page in a page tab by going to below mentioned url
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
You need to change "app_id" with your app_id, you can find it in app settings, "Your_url" should be replaced with your application complete url for e.g. "https://www.facebook.com/TestApplication?sk=app_389610254390000"
after changing values press enter, If you are admin of any Facebook page then you will be taken to a screen where you can select the page, after completion of this step your app will be added to page tab.
For further clarification go to this link
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
YOUR_URL should be replaced with your Canvas url.
(The page that is being loaded into iframe on facebook)
APP_ID with id of the Page Tab application.
Explained also here
https://stackoverflow.com/a/10535905/1520297
I've provided my canvas app with all required for publishing actions to Facebook. After I publish an action I have a message like "John made an action over {SomeObject}" in my timeline. Everything works OK but the {SomeObject} i click opens in a window, not in facebook iframe where my app usually works. The URL of this link is rendered like this:
https://www.facebook.com/connect/uiserver.php?app_id={my_app_id}&method=permissions.request&redirect_uri={my_object_url}&response_type=code&display=page&auth_referral=1&fb_private_mode_enc={some_text_string}
What should i do to make my clicked object open in facebook iframe, not window? Can i somehow change display=page to display=iframe in this URL?
Thanks!
I've been having this problem too - I'd like to be able to direct a user straight to my canvas app. Added to this, unless the meta in {my_object_url}'s HTML lines up with what Facebook expects to see, the link resolves to a "this app is having a problem" dialog.
A possible workaround for you, not so much a 100% answer: allow the redirect, but in the meta of the page being redirected to, do an HTML refresh back to the app canvas? This would redirect users back to the app.
If you needed to direct them to a specific page of the app, you could use an app_data signed request addition to the canvas-redirect URL.
Hope this helps. Not a silver bullet though.
PG
I am making a little Facebook app that includes an image browser at the bottom, when the user clicks on one of the images in the browser I want to redirect the user to edit the image but stay inside the Facebook frame. I am doing my redirect like this (I read on another page that this should work):
top.location.href = newUrl;
Sadly this just redirects to the newUrl outside of the Facebook frame, how can I make it do the redirect inside the Facebook frame? A solution using Javascript would be the best but if I needed to make the call from php that could work too.
Try using self.location.href instead.