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.
Related
I have created a Facebook Application which will be used as a Facebook Tab Page. My problem is that I am unable to get the page id.
I want to use this single application for multiple Facebook Page Tabs but the content will vary based on the Page Id.
The code I am trying to use to get the signed_request is using the JavaScript SDK.
FB.getLoginStatus(function(response) {
console.log(response);
})
This can be done with the signed_request parameter, which is passed on to your URL.
The easiest solution is to use the PHP SDK. It offers a function called "getSignedRequest": https://developers.facebook.com/docs/reference/php/facebook-getSignedRequest
Those are the fields of the signed_request parameter: https://developers.facebook.com/docs/reference/login/signed-request
If you don´t want to use the PHP, you need to parse the parameter on your own. Check out this link for more information and search for "Parsing the Signed Request": https://developers.facebook.com/docs/facebook-login/using-login-with-games
Edit: you will not get the correct signed_request using the JavaScript SDK. Use PHP (or your server language) for this.
The mistake was that the URL added in the Facebook page tab settings was getting redirected as it did not have a "/"; there was a redirect for SEO added and the URL in the Facebook APP sittings did not have the "/".
So as it was getting redirected Facebook sent the POST variable but we have not handled it. Now it is fixed.
Special thanks to #luschn and #Fran Barbero for all your efforts in this.
I have googled and googled around for this and found the blog post from Facebook about remove app profile pages etc. I also found that you can go to this link:
https://www.facebook.com/dialog/pagetab?app_id=[ID NUMBER HERE]&display=popup&next=[URL OF YOUR DOMAIN]
The problem is what do i put in URL OF YOUR DOMAIN. I cant put a site url in the app settings because its not a web site application, its a page tab application. Any combo of URL's i try, it just errors with "URL not owned by application"
Any ideas or experiences with this?
Use FB.ui method of JS-SDK with method pagetab as shown in example of Add Page Tab Dialog documentation this will automatically provide needed info to dialog.
FB.ui({method: 'pagetab'}, function(){
// User either closed dialog or added tab, you can call Graph API to check...
});
You have to register the URL first with Facebook and then use it. First go to http://developers.facebook.com. Then go to your app and hit [Edit App]. At the Basic Info section, you'll find a textbox requesting you to enter the APP Domain. Once you save it will work fine.
I simply entered www.my-domain.com, no http, no slashes.
Having some issues with the feed dialog when attempting to post to a event or fan page. In my application I am using the JS API and FB.ui using the method feed.
But for a demonstration you can do it using the feed url too for example:
http://www.facebook.com/dialog/feed?app_id=131727613511269&to=287203454659917&redirect_uri=http://www.timeanddate.com/
After clicking share you get the:
Sorry, something went wrong.
We're working on getting this fixed as soon as we can.
Where:
app_id = your app
to = a event / fan page
redirect_uri = a url you are allowed to redirect to
note that the app has publish_stream permissions. (it also has manage_pages for fan pages)
The app in question by the way is: http://apps.facebook.com/tndcountdown/
Thanks,
Andy
EDIT:
An Example taken straight from the documentation:
http://www.facebook.com/dialog/feed?app_id=123050457758183&link=http://developers.facebook.com/docs/reference/dialogs/&picture=http://fbrell.com/f8.jpg&name=Facebook%20Dialogs&caption=Reference%20Documentation&description=Using%20Dialogs%20to%20interact%20with%20users.&message=Facebook%20Dialogs%20are%20so%20easy!&redirect_uri=http://www.example.com/response&to=287203454659917
just replace to=287203454659917 with an event.. (make a test one like it did there)
A few issues I've run into will dialog is that Facebook tries to fill in any missing data. So if you don't provide a description and caption, Facebook will try to scrape the page to get that content. Depending on how the page responds to the "scraping" Facebook will error out. I always make sure I include at least a space for those fields.
It seems the feed url you provided is similar to what is in the documentation. But the demo in the documentation has extra parameters.
I'm about to add page support to my Facebook app, which does the same thing as yours.
http://apps.facebook.com/countdown-timer/
As I posted here - Facebook Send Button - 'Sorry, something went wrong.'...
I had the same problem & worked out that this was due to linking to a Facebook page that did not have a vanity URL set up (i.e. http://www.facebook.com/CubicMushroom rather than http://www.facebook.com/profile.php?id=261963707177053). If you set up a vanity URL for the page it seems to work OK (providing you link to the vanity URL version of the page URL).
To claim a vanity URL, once you have a certain no of like (it used to be 25, but think it's a little lower now) visit https://www.facebook.com/username/
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.
I am using an IFrame application with XFBML and the new Javascript API.
I'd like to have a facebook application with multiple entry points. These will most likely represent different links coming from a fan page tab.
I can do this quite easily if the pages don't require authentication - for instance I can create several pages under the app and if a new user comes I can send them to any page:
http://apps.facebook.com/myapp/offers
http://apps.facebook.com/myapp/game
http://apps.facebook.com/myapp/products
The problem is that if I need to have authentication then once the user is authenticated they get redirected to my default post-authorization url.
Is there a way for a user that comes to /game to stay on /game after they are authenticated without redirecting.
I thought I could do it with the AJAX login form - but I cannot find out how to do that in a Facebook IFrame application.
I think the example using requirelogin only works for FBML.
<a href="http://apps.facebook.com/mysmiley" requirelogin=1> Welcome to my app</a>.
Is there a way to accomplish this with Facebook APIs - or will I have to do some kind of clever cookie handling?
You can use the facebook connect JS library inside of an iframe app and then redirect them to the appropriate url in javascript if they click allow. Best to go to the Facebook dev docs on the Javascript SDK on Fb:login here: http://developers.facebook.com/docs/reference/javascript/
Basically if the login is successful, you will get a callback where you should redirect them in javascript by using window.top.location = 'yoururlhere';