Authorizing Iframe Facebook Applications For Graph API
This article continues my exploration of best facebook graph api integration into your flash app. Before continue reading, make sure you understand the previous article. Due to huge interest, I am adding codes that makes your flash app working with graph api within facebook iframe. Try this app live on http://apps.facebook.com/blogoauthgraph/, notice once you get there, you are redirected to grant permissions (if not authorized or granted already) and then redirected back to the app, where you are connected and ready to use graph api.
What I did was changing one line of ActionScript, I added autoConnect() methods that sends app flashvars directly into FacebookOAuthGraph object.
var facebook:FacebookOAuthGraph = new FacebookOAuthGraph(); ... facebook.autoConnect(parameters); // passing flashvars
See full ActionScript code for details.
Now there is a different html wrapper for facebook iframe – facebook.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-language" content="cs" />
<title>FacebookOAuthGraphTest</title>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
//<![CDATA[
function allRequestParameters()
{
var data = {};
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ) {
var strQueryString = strHref.substr(strHref.indexOf("?")+1);
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ) {
var aParam = aQueryString[iParam].split("=");
data[aParam[0]] = aParam[1];
}
}
return data;
}
function generateFlash()
{
var flashvars = allRequestParameters();
flashvars.session = '{"access_token":"' + signed_request.oauth_token + '"}';
var params = {
allowScriptAccess: "sameDomain"
};
var attributes = {
id: "FacebookOAuthGraphTest",
name: "FacebookOAuthGraphTest"
};
swfobject.embedSWF("FacebookOAuthGraphTest.swf?v=2", "alternative", "100%", "100%", "10.0.0",
"expressInstall.swf", flashvars, params, attributes);
}
<?php
$signed_request = $_REQUEST["signed_request"];
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
$data = base64_decode(strtr($payload, '-_', '+/'));
echo "var signed_request=" . $data . ";";
?>
if(!signed_request.oauth_token){
window.top.location = "https://www.facebook.com/dialog/oauth"
+ "?client_id=" + '268718683475'
+ "&redirect_uri=" + 'http://apps.facebook.com/blogoauthgraph/'
+ "&scope=publish_stream,user_photos,user_photo_video_tags"
+ "&response_type=token";
}else{
generateFlash();
}
//]]>
</script>
<style>
body {margin:0px;overflow:hidden}
html, body, object, embed {width:100%;height:100%;outline:none;}
</style>
</head>
<body style="text-align:center;">
<div id="alternative">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
</body>
</html>
There are few lines of code to be mentioned:
getRequestParameter(name) – returns GET parameter from iframe url, you can use your own functions- allRequestParameters() – returns object consisting of all iframe GET parameters, used to pass flashvars into our flash
- php code to define javascript signed_request variable containing valid token
- window.top.location – if there is no token parameter found (not authorized yet), you are redirected to the facebook authorization. Do not forget to change client_id and redirect_uri when using for your app.
Facebook settings:
App ID: 268718683475 Site URL: http://blog.yoz.sk/examples/FacebookOAuthGraph/ Site Domain: yoz.sk Canvas Page: http://apps.facebook.com/blogoauthgraph/ Canvas URL: http://blog.yoz.sk/examples/FacebookOAuthGraph/facebook.php?a=b Canvas FBML/iframe: iframe Disable Deprecated Auth Methods: Enabled Stream post URL security: Disabled OAuth 2.0 for Canvas: Enabled POST for Canvas: Enabled Canvas Session Parameter (Deprecated): Disabled November 2010 Rollup: Enabled Timezone-less events: Enabled Upgrade to Requests 2.0: Enabled JSON Encoding Empty Arrays: Enabled
Here is the final facebook app http://apps.facebook.com/blogoauthgraph/
updated Jul 21, 2010: Quickfix for late facebook changes:
updated Jul 22, 2010: Facebook rollbacked the change and added “Canvas Session Parameter” parameter in facebook app settings / Migrations tab. With this setting enabled, your apps should work normally as they previously did.
updated Mar 16, 2011: Catching token from POST parameter.
[...] Please read article Authorizing Iframe Facebook Applications For Graph API [...]
Hey,
Thanks for the article. Maybe you can help me with an issue?
I was having problems in some browsers with my authentication method, and decided to try yours. Only changed the url to my page and the permissions to “offline_access” and “user_location”. But my problem continues.
The authentication itself works, I get the permission screen and the access_token in flash just fine. But after receiving the access_token, whenever I try to call a method from the Graph API such as ‘/me?’, I get Error #2032 in flash. This only happens on IE and some versions of Firefox.
Then I tried to paste the request directly in the browser, using the access_token I get after authentication. Same thing, works fine in Firefox 3.6.2 and Chrome, fails in IE and an older Firefox version.
My only guess is that there’s something wrong with my access_token. Any ideas?
@Carol confirmed. I have tried IE 8 / vista and it throws Error #2048, the problem is the setting Internet Protected Mode – I can see this setting in bottom right panel of IE. I do not know what the fuck is that setting good for but after turning it off everything works just fine. I am not even able to update flash player with IE now, it crashes. I will take a closer look at it tomorow, anyway IE is dead for me.
@Carol I was able to get rid of the error by following:
1. navigate your IE to https://graph.facebook.com/crossdomain.xml , make sure you see secure=”false” in the showed xml, if not refresh (ctrl+f5)
2. go to http://apps.facebook.com/blogoauthgraph/ and now it works… It may be caching issue hmm?
Good to know there’s also this caching issue, I’ll make sure I use a cachebuster code when calling the crossdomain policy file.
But I think the problem I’m getting is not related to that.
https://graph.facebook.com/crossdomain.xml shows secure=”false” here, and I still get that darn 2032 error in my app. Your example app works fine, though, even in IE8.
I’m not calling the Graph API methods through your FacebookOAuthGraph class, only the authentication part. Maybe the error is occurring in some browsers because I didn’t decode/encode the access_token properly before using it to fetch the facebook object through URLLoader. I used JSON.decode() like you did, but I’m not using ExternalInterface for the calls, so I might be missing something… Will try to figure that out tomorrow.
Here’s my test app, by the way: http://apps.facebook.com/carolices/
Let me know if you have any ideas.
Thanks!
@Carol , I have just tested your app with IE 8, FP 10,1,51,66, Win XP and it works fine, however with granting permission step IE asked me to allow unsecured data. So you say ma apps works fine for your IE? Why do not you use whole FacebookOAuthGraph class then? I am not using ExternalInterface for the calls, just for authorization callback. What version of browser, fp, os you use?
I’m not sure why, but if you copy the access token I display in my test application an do a request directly from the browser, I get the same problem.
Here’s an example of request. It works of Firefox 3.6.2 and doesn’t work on IE8 and Firefox 3.6.3(!), all in Windows XP 32 / FP 10,0,45,2
https://graph.facebook.com/me?access_token=113837561976018|5ee38422cc5103eb7ecf9ce8-560663869|ERqBBKStc6v7ks7enJ91FQc-WMw.
I’m kinda lost now.
Yes, your app example works fine here. My ‘test app’ also works, but when I moved on to develop the real application I got the error and realized the problem happens also outside of flash.
I didn’t use your as class cause I prefer to understand everything from scratch, that’s how I learn
But I’m using it as a reference.
Oops, the request example above got cut somehow. Trying again:
https://graph.facebook.com/me?access_token=113837561976018|5ee38422cc5103eb7ecf9ce8-560663869|ERqBBKStc6v7ks7enJ91FQc-WMw.
Hey, here I am again.
In your application, I get a ‘Security Sandbox violation’ when the user did not upload a profile image and I try to load it from your app.
It can’t load data from http://static.ak.fbcdn.net/rsrc.php/z5HB7/hash/ecyu2wwn.gif cause the crossdomain.xml file on this server won’t allow it.
Any idea on how to resolve this?
Oh, never mind the question above… =P
I solved the problem by copying the image to my own server and adding this code to the ‘loaderComplete’ EventHandler:
if(event.target.url.toString().indexOf(“static.ak.fbcdn.net”)>-1){
//if the picture wasn’t uploaded by the user, get the generic image from my own server
var req:URLRequest = new URLRequest(myserverurl+”/img/noimg.gif”);
imgLoader.load(req);
}else{
//do whatever I like with the pic when it’s loaded
}
I promise not to bother you with that kind of stuff again
Another developer had the 2032 error on IE and filed a bug in Facebook’s Bug Tracker. Here:
http://bugs.developers.facebook.com/show_bug.cgi?id=10631
If anyone verified the issue please vote so that we can have a fix for it soon.
Hi Carol, I can not confirm that, it works for me in IE 8/win xp
Hi Jozef,
great series of articles. Again!
Unfortunately I cannot get this step to work.
Somehow I end up being prompted to install the Flash Player Plugin.
Do you accidentally happen to know why this is?
thanks a lot.
Hi Mira,
do you have problems using my app or your own app? If you see the install logo/button, it means swfobject did not get executed, if you could debug javascript I can help you to work it out
Hi Jozef,
the problems only occur with my own app.
Your app works just fine.
I see the install logo/button and I just installed FireBug to get some info on why this might be happening. Have to admit though that I am not very experienced in debugging JS.
Could you please help me and tell me what information you need to sort this out?
I have a Script Part that says:
//
and a Console part that says:
GET /ajax/presence/reconnect.php?__a=1&reason=3&iframe…true&post_form_id=d560e8a84bb3493941310615c2410dc1
for (;;);{“error”:0,”errorSummary”:”",”errorDescription”:”",”errorIsWarning”:false,”silentError”:0,”payload”:{“user_channel”:”p_1216338833″,”seq”:0,”retry_interval”:0,”
Is this any sort of help?
Thank you so much!!!
Regards, Mira
Hi Jozef,
if you would bother to take a look you could try to load my app:
http://apps.facebook.com/shoutfox/
thank you very much for any sort of hint.
mira
Hi Mira,
At the begining, I had the same pb… It was a pb of FaceBook appication configuration. In your Facebook Developper profil, you need select “New Data Permissions” and “New SDKs” in Migration tab
Garcimore.
Hi Jozef,
First, thx for your posts about Facebook OAuth : I’m really impress by the quality of your work !!!
I use your code and it’s work very well on FireFox and Chrome. I just used your code example (no addition), but I don’t anderstand why it doesn’t work on Internet Explorer…
In fact, your http://apps.facebook.com/blogoauthgraph/ is working with Internet Explorer, but when I just copy your code and I run it, it doesn’t work with IE… (In autoconnect() function flash get an Error #2032: Erreur de flux. URL: https://graph.facebook.com/me?access%5Ftoken=126919464014311%7C2%2E……..)
Do you have integrated something in addition (/http://apps.facebook.com/blogoauthgraph/)? Can I have access on your zip archive of your project ? Or could you peek in my zip archive code (on http://guillaume.lefebvre9.free.fr/FacebookOAuthGraph/test_facebook_OAuth.zip) : it’s just your code.
Thank You in advance.
Garcimore
Hi Garcimore, I do not use anything additional, its just the code you see… No idea why is that, but it seems like facebook bug http://bugs.developers.facebook.com/show_bug.cgi?format=multiple&id=10631
Jozef, You are completely right : it’s the same pb…
And now I know why your application is working and not mine… You compiled your application for v10.0.0 of the flash pluggin…
I just add -target-player=10.0.0 in the additional compiler arguments, and now it’s working !
Thx for the link.
Bye
@Garcimore cool, thanx for discovering
Hi Jozef,
I am afraid I have two more very simple questions.
1. That one line you add is actually already inserted in your updated blog post here, http://blog.yoz.sk/2010/05/facebook-graph-api-and-oauth-2-and-flash/comment-page-4/#comment-2319, so there is nothing really to change there, right?
2. You do use the facebook.html wrapper insteadOf or inAdditionTo the index.html wrapper mentioned in your previous post?
Thanks you a lot for your help with all of this!!!!!
hi Mira,
1. I have somehow lost the context, can you ask a whole question? or what do you need to do?
2. yes, I do have different html files for iframe app and standalone one:
view-source:http://blog.yoz.sk/examples/FacebookOAuthGraph/facebook.html
view-source:http://blog.yoz.sk/examples/FacebookOAuthGraph/index.html
Hi Jozef,
thanks for helping me out.
1. Done. Thanks.
2. What I wanted to know is if you use an index.html AND a facebook.html or facebook.html INSTEADOF index.html. Because as I understand facebook only looks for an index.html file within the folder that you specify and if I use both I cannot get my app to show something different than the “Get Flash Player Logo”.
But as I understand you the index.html file shown in your previous article is no longer necessary with the iframe app, right?
@Mira,
sure facebook allows for iframe any file you want… e.g. in my case:
Canvas Callback URL
http://blog.yoz.sk/examples/FacebookOAuthGraph/facebook.html?
if your app is just iframed, and you dont need it to work also standalone, you can use the index.html file
Sorry Jozef.
Everything was my fault and it is ok now.
Just had to change the path of swfobject.js.
Thank you for your great support!
Ok. I just read you last post.
That was exactly the information I was looking for.
Thank you again!
Hey,
Great article – something on facebook seems to have changed this morning, my app was always working fine but checked it a moment ago and just a blank page appears and nothing authenticates… It looks like your example FB app is doing the same thing. I think it may be something to do the ‘signed_request’ variable, was wondering if you new a way round to fix it?
Many thanks
Adam
Hi Jozef,
I would like to let you know that it seems facebook has changed the returning parameters and there is no more ‘session’, therefor you will be redirecting forever…
Hello,
Same for me. Can’t find the soltution.
Why do FB always change things like this.
Please if you have any idea it would be welcome as my app is out of order.
Thanks
Etienne.
[...] Now its time to grab the access_token and use it in your app. This change has direct impact on Authorizing Iframe Facebook Applications For Graph API article. What I suggest is to wait a few days (if facebook changes are final) and do proper fixes. [...]
@Adam, @David, @Etienne, yes, there have been some changes, please read:
http://blog.yoz.sk/2010/07/neverending-facebook-api-change/
thank you for noticing the changes
Hi I need to setup application authorize, now it’s deleted so i can’t post example of my application. My problem is to redirect users to authorize link. Can you explain step by step application setup. Thank You
Hey Jozef,
You’re a life saver. I was all set to make my first Facebook app with the Rest AS api when OAuth came threw me for a loop. You’re class saved the day.
I seem to have one problem, though. This code:
if(!getRequestParameter(“session”)){
window.top.location = “https://graph.facebook.com/oauth/authorize”
+ “?client_id=” + ’268718683475′
+ “&redirect_uri=” + ‘http://apps.facebook.com/blogoauthgraph/‘
+ “&scope=publish_stream,user_photos,user_photo_video_tags”
}else{
generateFlash();
}
is causing my app on facebook.com to loop or keep refreshing itself. I want to make sure the clients URL redirects. What do you think I’m missing here?
WL
hi Bill, thnx
you are missing “session” parameter in your iframe. make sure to setup “Canvas Session Parameter” parameter in facebook app settings / Migrations tab
hi Hadis,
this may help http://blog.yoz.sk/examples/FacebookOAuthGraph/settings.png
DOH!
Thanks man.
http://apps.facebook.com/sambazon_warrior_up
WL
First of all, thanks for publishing such a helpful tutorial and code. The documentation on this stuff is sparse at best.
I have created an iFrame app that seems to be working pretty well, but its just the basic stuff from your example. My question is regarding the “connect” button. It doesn’t seem necessary since the connection gets made automatically, but the one in your example app still functions correctly. Mine does not. I get a OAuthException that says “Invalid redirect_uri: The Facebook Connect cross-domain receiver URL (http://www.mydomain.com/fb/facebook.html) must have the application’s Connect URL () as a prefix.”
I have tried to set the connect callback in the application control panel on Facebook, but I can’t seem to get it right. Any idea whats going on here?
@Brian hi, you are right, you do not need connect button in iframe (you need it in standalone app to open facebook popup). I guess the “Invalid redirect uri” issue has to do with facebook app settings. make sure to use following setup http://blog.yoz.sk/examples/FacebookOAuthGraph/settings.png
Jozef, that is a huge help. Thank you!
I can’t make this work, it’s always showing me “Get Flash” button. Any ideia what might be?
@PVieira, I think you are missing type=user_agent
I changed that and still the same result. I’ve tryed to change Canvas URL to your application (http://blog.yoz.sk/examples/FacebookOAuthGraph/facebook.html?) and works, can it be some problem with my swf?
@PVieira, you said its html/javascript problem, and you are not using .swf yet. try copy my html/javascript code from targeting url and use it
Worked! Thanks a lot! You save my life!
[...] Authorizing Iframe Facebook Applications For Graph API [...]
Thank you very much for your hard work in getting this library together! The autoConnect() method is also incredibly useful when deploying the app in a page tab, where no Javascript interaction is possible.
I made a small change to the verifyToken method, in order to catch the ERROR event, thought this might be useful to you and others:
loader.addEventListener( FacebookOAuthGraphEvent.ERROR,
function(event:FacebookOAuthGraphEvent):void
{
_authorized = false;
_me = null;
_token = null;
EventDispatcher(event.currentTarget).removeEventListener(event.type, arguments.callee);
var type:String = FacebookOAuthGraphEvent.UNAUTHORIZED;
dispatchEvent(new FacebookOAuthGraphEvent(type));
});
[...] order to catch the ERROR event with verifyToken() method Nils suggested the [...]
@Nils, very good, I have added your solution into the article http://blog.yoz.sk/2010/06/extending-facebookoauthgraph-class/ … I did it by heart, could you please confirm the code is ok?
Cool stuff.
I am struggling with the wrapper html. The JS function getRequestParameter(name) seems to fail to find the access_token, and when my authorization with FB returns, there is no session parameter in the query string.
However, access_token is present. Using firebug, I can see the access_token in window.location.href, but the line “regex.exec(window.location.href);” always returns null.
Any ideas? This is done in localhost testing environment. I see elsewhere that you recommend copy/pasting the access_token into the flex files… do I need to paste it into the wrapper as well?
Thanks.
Hi @Joe,
please read section “updated Jul 21, 2010: Quickfix for late facebook changes:”
or set “Canvas session parameter” to enabled in facebook settings:
http://blog.yoz.sk/examples/FacebookOAuthGraph/settings.png
While testing it locally, I recommend to use advanced callback:
http://blog.yoz.sk/2010/06/extending-facebookoauthgraph-class/
Thanks for taking the time to write this up, and for your quick replies to all the comments so far. I’m getting a script error in your app page, as well as mine that I was hoping you could shed some light on.
Permission denied for (document.domain has not been set) to call method Location.toString on (document.domain=).
Line 0
I seem to get this error anytime I use (or access any other app that is using) flash in an iframe, any idea on where this is coming from and how we can make it go away?
Using Firefox w/ firebug to trace the error
Thanks!
@Nathan , I am unable to reproduce your issue but it seems like browser related thing and more people is having your problem… based on http://willperone.net/Code/as3error.php article I have updated my crossdomain.xml file to :
<cross-domain-policy>
<site-control permitted-cross-domain-policies="all"/>
<allow-access-from domain="*" />
<allow-http-request-headers-from domain="*" headers="*"/>
</cross-domain-policy>
please clear your cache and try again and let me know if that works for you now
thank you
Hello Jozef
I wanted to ask how I can do to make the window where
allow user gives to accept the application is smaller in
size and not take on the entire screen.
MauroX,
it should work again without having “&type=user_agent” in your redirect url
Man, you are the best thank you, it worked perfectly.
Thanks Josef
I’m very new to this but after a few hours I managed to get it working.
After referencing all my code against yours I saw that the code inside the .js file that was generated by Flex was nowhere near the same as yours.
There was a .js but it seems it is only a “// Flash Player Version Detection – Rev 1.6″
No swfojects.js file was generated by Flex as I said. Why is that?
You’ve done a great job keeping up with the facebook’s api.
However, the articles are a little confusing.
And it does take some back and forth. Phew!
Alan
@Alan glad you made it work. if something not generated in bin folder, try clearing the project, that usuealy helps.
Hi Josef, thanks for posting all this, it’s been a great help to me!
I just have a quick, hopefully simple question, I have a Flex App that I am embedding using your example. The integration with the Graph API works great, however my application is 972 pixels wide and is getting cut off on the right hand side. There must be a simple way to set it up so that facebook allows the whole application to be rendered. I tried to replace the 100% width in the swfObject.embedSWF function to 972, but it didn’t seem to make any difference. I’m sure there is a simple explanation,
Can you help?
Hmmm never mind, it looks like the maximum iFrame width allowed is around 760 pixels, looks like I will have to resize my app!
Cheers,
Ben.
Hi Ben, yes, max width for facebook iframe is 760px
Your tutorials here are amazing and have gotten me further with the API changes than the official docs did
I can’t immediately see the differences between my code and yours but when the authorisation redirect happens I just end up with a page that says ‘You may now close this window’ and yet yours redirects back to the actual app. Is there some setting I am missing?
Byron, I like to hear you like the tutorials.
There were few issues with callback proces, we were able to fix them all, please go through comments in FacebookOAuthGraph articles:
http://blog.yoz.sk/2010/05/facebook-graph-api-and-oauth-2-and-flash/#comment-3462
http://blog.yoz.sk/2010/05/facebook-graph-api-and-oauth-2-and-flash/#comment-3470
http://blog.yoz.sk/2010/06/extending-facebookoauthgraph-class/#comment-2870
http://blog.yoz.sk/2010/06/extending-facebookoauthgraph-class/#comment-3240
I hope you can find your answer there. If not leave let me know
Complete Tutorial on how to create Iframe FaceBook Application Using flash AS3 and graph API in an easy way:
http://as3flashcs5.blogspot.com/
thx Abed, I hope people will not get confused, because I use my own library called FacebookOAuthGraph not the official one from adobe
greate blogg, but it take me along long time to make the connection happend and i wanted to share with you
Jozef,
I’ve been working to add extended permissions to an application that already has a user base. The redirect code you’ve got works great for new users who don’t have a session variable set, but doesn’t look like it will trigger the extended permissions page for existing users. Also doesn’t look like there’s a way in the JS API to check extended permissions. You can test this by going to http://www.facebook.com/settings/?tab=applications and removing extended permissions for one of your applications. The redirect code doesn’t fire. Also, since anyone can remove extended permissions, it would make sense to have checks against these before calling things like method/stream.publish.
Looking at your FacebookOAuthGraph class, I’m using autoconnect once inside Flash. Again, this won’t test against a user’s extended permissions. While I’m still combing through this class, do you have any suggestions?
Jason,
you can use users.hasAppPermission rest API method ( http://developers.facebook.com/docs/reference/rest/users.hasAppPermission ) to test user permissions. If you need user to grant more permissions for your app, you have to request permissions manualy via http://developers.facebook.com/docs/authentication/#requesting-extended-permissions .
Jozef,
Thanks for the heads up. Gave that a try and it works great. I ran into an issue trying to launch the url in a Fancybox iframe. Looks like facebook won’t allow the OAuth page to launch within a frame so I had to settle for the popup functionality built into your connect() call.
Check out the app if you get a few minutes. I’ll be pushing this stuff through to the live version sometime tomorrow.
http://apps.facebook.com/flixfling
Jason, looks good, ready to go out
Hello,
First of all, thanks for the great work you have done with this tutorial. It’s the only one that I’ve found useful.
I’m desperate and I maybe you can help me. I’m got stuck in a problem for more than 3 weeks and I’m not able to solve
The problem is that I’ve found Facebook have deprecated the “session” functionality by “signed_request” functionality. I don’t know how to adapt your perfectly working code to the new thing.
Here is the small game I’ve done (it’s a personal project, no big company behind it):
http://apps.facebook.com/toweroffriends/
You can ask me whatever you want, if you want to appear in the credits section, you will be there. Tell us if you have an email address to make donation, I will be willing to donate.
Please, help.
Hi Esteban
I can see here http://developers.facebook.com/roadmap#migrations that “We will remove the ability for new applications to use our old authentication mechanism, but will continue to support existing applications using our old method.” so you do not have to deal with new mechanism. You do not have to enable signed_request (developer / app / advanced) for your canvas for now. I am not familiar with this new mechanism, if there is some time I will post an article. feel free to make any donations from here http://blog.yoz.sk/facebookoauthgraph/
thank you
Hi Jozef! i am having a little problem. When my apps starts refresh itself… what can i doing wrong?
This is the test:
http://apps.facebook.com/templateappbook/
Thank you!!
your are the best!
marc
p.s. sorry for my english, i am from Argentina
I found the solution… was the parameter of “iframe size”
My question now is.. do you know how can i make bigger my iframe? Because with your html i cant make it bigger than 800 of height.
http://apps.facebook.com/templateappbook/
Thanks again!
Works great, had a little problem with the application jumping, read your other post on the changes http://blog.yoz.sk/2010/07/neverending-facebook-api-change/, and also comments, with the settings of Canvas Session Parameter set to active in Facebook settings. But my application still started to jump around, I did a little recap and found out that I had to deactivate POST for Canvas for the function to read the parameters from facebooks window location and not my iframed page.
Cheers
Hi Marco,
do I understand this correctly that setting IFrame size parameter fixed your issue with redirect loop? You can control the size of iframe wrapping your app if you set IFrame size parameter to auto-resize and use FB.Canvas.setAutoResize in your javascripts
@Per, did you enabled “POST for Canvas” parameter? The redirect is done by your javascript, check out the condition. Facebook changes the name of parameter it sends into iframe (session, token etc.) All the parameters your iframe page receives are traceable via charles proxy ( http://www.charlesproxy.com/ )
@Jozef: Thanks for this great framework!
Problem is, I can’t keep my iFrame canvas app from looping between the app page and the auth page. The suggested solution doesn’t work because it’s deprecated (Canvas session parameter = Enabled doesnt solve it). I’m using your facebook.html to load the swf from this location:
https://secured.fitzroy.nl/benjerrys_facebook/canvas/coconut/
This is the call:
http://www.facebook.com/connect/uiserver.php?app_id=134110136654742&method=permissions.request&display=page&next=http%3A%2F%2Fapps.facebook.com%2Fcoconut_test%2F&response_type=code&canvas=1&perms=publish_stream%2Cuser_photos%2Cuser_photo_video_tags
This is the response:
/* <![CDATA[ */if (top != self) { try { if (parent != top) { throw 1; } var disallowed = ["apps.facebook.com","\/pages\/","apps.beta.facebook.com"]; href = top.location.href.toLowerCase(); for (var i = 0; i = 0) { throw 1; } } } catch (e) {setTimeout(function() {var fb_cj_img = new Image(); fb_cj_img.src = “http:\/\/error.facebook.com\/common\/scribe_endpoint.php?c=si_clickjacking&m=on\u002509&t=8126″;}, 5000); window.document.write(“\u003cstyle>body * { display:none !important; }\u003c\/style>\u003ca href=\”#\” onclick=\”top.location.href=window.location.href\” style=\”display: block !important; padding: 10px\”>\u003ci class=\”img sp_8dfqpl sx_d67a9a\” style=\”display:block !important\”>\u003c\/i>Go to Facebook.com\u003c\/a>”);/* GwcEJwbW */ }}/* ]]> */window.location.replace(“http:\/\/apps.facebook.com\/coconut_test\/?code=2.lk1lJdjHq9fKwrPADvfrTg__.86400.1298124000-100001939192799\u00257CsxKMLBZOgGZYfNmCFfBSQKSV8Wg”);
Oh yeah, and this is the app test URL:
http://apps.facebook.com/coconut_test/
@Zukzuk, yeah facebook changes rules every day… I can see there is a request to your page:
GET /coconut_test/?code=2.**********.3600.***********-******* HTTP/1.1
Host: apps.facebook.com
use code parameter to get your access_token:
cliendId + “|” + code;
so it results in something like this:
2227470867|2.**********.3600.***********-*******
push this into flashvars:
flashvars.session = ‘{“access_token”:”2227470867|2.**********.3600.***********-*******”}’;
and you should be good to go
Damn! Nice one figuring that out! thnx a bunch.
i got the page refreshing problem but previous comment is solved my problem thanks bossssssssss thank you very much
comment : February 18, 2011 17:58
While using above comment techniques i got invalid access_token signature please reply i m on fire
thanks
Sameer, I am not sure now, does this work for you or not? Where is your app located? Can you debug the request?
I found a solution to create an iframe application without being a facebook developer . It’s very powerful:
http://www.facebook.com/iframe.apps
@Jozef:
Well I figured out some kinks in my code. The following solutions worked for me…
In the index.html (your facebook.html) to stop looping between app and auth page. Instead of checking for the ‘session’ querystring, I checked for the ‘code’ querystring. It couldn’t find the session, hence it kept reffering to the auth page.
New code:
if(!getRequestParameter(“code”)){
window.top.location = “https://graph.facebook.com/oauth/authorize”
+ “?client_id=” + ’199012180118043′
+ “&redirect_uri=” + ‘http://apps.facebook.com/oauth_testt/‘
+ “&scope=publish_stream,user_photos,user_photo_video_tags”
}else{
generateFlash();
}
One thing I can’t figure out now:
Why is it that when I enable autoconnect(), I get the FB popup to allow, but my flash won’t upload the generated image in Main.as function onAuthorized(event:FacebookOAuthGraphEvent):void
But when I click the red button which triggers connect(), the image is uploaded via Main.as function onAuthorized(event:FacebookOAuthGraphEvent):void
Thanx again!
http://www.facebook.com/settings/?tab=applications
BTW that bottom link is a handy dandy link to remove apps from your FB…
http://www.facebook.com/settings/?tab=applications
And my working oauth test page with autoconect is:
http://apps.facebook.com/oauth_testt
@Zukzuk
you should debug your callback.html… does it close itself? does it communicate with your flash?
Will do, I’ll check back if I have an update.
Could you please offer the code for your example app?
Hi Jozef,
My applications were working fine, but today they stopped working suffering the “authentication loop” so I’ve fixed them with the solution found here, and they are not longer refreshing, but inside the applications I make some requests to graph API and get this error:
{“error”:{“type”:”OAuthException”,”message”:”Invalid access token signature.”}}
I’m pretty sure I’ve build my access_token as you suggested so I don’t know what’s wrong with it.
Could you please help me?
Thanx
Juanele.
PS. My Application URL is: http://apps.facebook.com/referidos_tropical/
@Fabian, @Juan authorization process has been slightly changed, read http://developers.facebook.com/docs/authentication/ section “Client-side Flow”
1. request is made to
https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&response_type=token
2. fb redirects you to your url containing valid access token in uri fragment
http://YOUR_URL#access_token=166942940015970%7C2.sa0&expires_in=64090
today it’s not working somethig changes in background
Hi Jozef
I think http://apps.facebook.com/blogoauthgraph/ app has the same problem with Juans
Do you have any solution?
Could you please help?
thanks
selman
Hi Jozef, thanks again for your help! I followed the steps but the problem I’m having is that when the authorization dialog redirects to my app it calls my URL like you say: http://your_url/#access_token=166942940015970%7C2.sa0&expires_in=64090 the problem with that is that my iframe doesn’t receive those parameters.
If I manually change the # with ? then it works as expected.
Do you know what am I missing?
Thank you.
Hi Jozef
I have the same problem like Juan.
Maybe we should change change app settings I dont know
please help!!
thanks
selman
Hi Juan
I think i solved the problem with some PHP coding
<?
$app_id = YOUR_APP_ID;
$app_secret = "YOUR_APP_SECRET";
$my_url = "YOUR_URL";
$code = $_REQUEST["code"];
if(empty($code)) {
/*$dialog_url = "http://www.facebook.com/dialog/oauth?client_id="
. $app_id . "&redirect_uri=" . urlencode($my_url);
echo(" top.location.href=’” . $dialog_url . “‘”);
*/
}else{
$token_url = “https://graph.facebook.com/oauth/access_token?client_id=”
. $app_id . “&redirect_uri=” . urlencode($my_url) . “&client_secret=”
. $app_secret . “&code=” . $code;
$token = file_get_contents($token_url);
$access_token = substr($token, 13);
?>
In JavaScript I updated
flashvars.session = ‘{“access_token”:”"}’;
Maybe Jozef offer more easy way.
Anyway my app working fine now!
Thank you
ali, Selman, Juan I have made some changes to facebook.php (formely facebook.html) and to facebook settings, flash remains the same… see the article for changes
Jozef, thanks for quick response.we are working with .net platform on server side, so we need to convert php codes but it’s ok.how you track this facebook changes, hope that facebook explain this unexpected changes in somewhere ?
ali,
the main source of changes for me is:
1. facebook Developer application and its articles http://www.facebook.com/developers/
2. Developer Roadmap http://developers.facebook.com/roadmap/
3. visitors of my blog
main knowledge source is Graph API documentation http://developers.facebook.com/docs/reference/api/
please solve issue
http://www.adobe.com/devnet/facebook/samples.html
at sample3
issue:- album length showing 0
please let me know how to connect facebook and access its album in flex give me example with source code
I Jozef,
you will say that I have always problem with Internet Explorer… But when I test http://apps.facebook.com/blogoauthgraph/ on IE, there is a flash error in autoConnect(…) function : “var session:Object = JSON.decode(parameters.session);” doesn’t work ==> it’s impossible to get the value of parameters.session
Do you have an idea why the flashvar in .js is correctly get in Firefox and Chrome but not with IE ?
Thanks in advance.
Garcimore
I Jozef,
Sorry for my last comment, in fact it’s not a problem of flashvars getting with IE… but a problem of flashvars encoding in the javascript code.
I suggest that you update your facebook.php :
– in the generateFlash() function : flashvars.session = encodeURIComponent(‘{“access_token”:”‘ + signed_request.oauth_token + ‘”}’);
With this change the autoconnect will work with IE,
Best regards.
Garcimore.
thank you for solution Garcimore
Right now this is my favorite page on the internet. Thank you all!!
I can’t get this new auth to work. I don’t understand how I’m supposed to extract the top.location access_token hash when the app is inside an iframe. Also, I tried the PHP $signed_request method and it always comes up empty. I have “Oauth 2 for Canvas” and “POST for Canvas” enabled. No matter what I try, I can’t get to the access_token. What am I missing here?
hi Bill.
- you do not extract nothing from top.location, you pass there url to get authorized
- if you have correct facebook setting (see the ones from me) you should get some authorization info in POST variables. make sure yor server support _POST variable
Hi Jozef,
My client’s server accepts _POST vars because when I use FB’s technique:
<?php
$app_id = YOUR_APP_ID;
$app_secret = "YOUR_APP_SECRET";
$my_url = "YOUR_URL";
$code = $_REQUEST["code"];
if(empty($code)) {
$dialog_url = "http://www.facebook.com/dialog/oauth?client_id="
. $app_id . "&redirect_uri=" . urlencode($my_url);
echo(" top.location.href=’” . $dialog_url . “‘”);
}
$token_url = “https://graph.facebook.com/oauth/access_token?client_id=”
. $app_id . “&redirect_uri=” . urlencode($my_url) . “&client_secret=”
. $app_secret . “&code=” . $code;
$access_token = file_get_contents($token_url);
$graph_url = “https://graph.facebook.com/me?” . $access_token;
$user = json_decode(file_get_contents($graph_url));
echo(“Hello ” . $user->name);
?>
I am able to get $code, but unable to get file_get_contents($token_url); to work because (I’m assuming) the $token_url is secure.
However, when I use your technique I am never able to get $signed_request either with $_REQUEST["signed_request"] or $_POST["signed_request"]. So, I’m stuck with a looping app.
Also, I don’t understand how your post “neverending facebook changes…” applies to this. They seem like 2 different techniques.
I greatly appreciate any light you can shed on this.
Thx,
WL
http://apps.facebook.com/sambazon_warrior_up
request to http://apps.facebook.com/sambazon_warrior_up :
POST /fbapp/ HTTP/1.1
Host: sambazon.com
Referer: http://apps.facebook.com/sambazon_warrior_up/
signed_request=N7GgX95r…
asi you can see, there surely is post parameter available!
Now I’m even more perplexed. I can now see the signed_request variable and am able to parse the oauth_token out of it, but I’m still seeing the page constantly refresh itself… even if I remove the generateFlash() function. On Chrome it just repeats. On Firefox it throws up “Object Moved”. Here is my PHP:
BTW: I am not able to create the signed_request var like your example. The initial var signed_request=; throws up an error in my JS console.
Sorry, guess the PHP got consumed:
$app_uri = “http://apps.facebook.com/sambazon_warrior_up/”;
$auth_uri = “https://www.facebook.com/dialog/oauth”;
$client_id = “[my id]“;
$scope = “publish_stream,user_photos,user_photo_video_tags”;
$signed_request = $_POST["signed_request"];
list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);
$data = base64_decode(strtr($payload, ‘-_’, ‘+/’));
if(empty($signed_request)){
echo ( “window.top.location = ‘” . $auth_uri .
“?client_id=” . $client_id .
“&redirect_uri=” . urlencode($app_uri) .
“&scope=” . $scope .
“&response_type=token’;”);
}else{
echo “var signed_request=” . $data . “;”;
echo “generateFlash();”;
}
Yikes! Sorry for all the frustration. The root problem was that I hadn’t included the www in the site’s app url. The client redirects when it is missing. The redirect then caused the POST data to disappear.
Thanks for all your help!
Hi Jozef,
I discover something strange…
Concerning as3 graph api iframe embeding exemples from facebook-actionscript-api google code (wich are working fine) :
On firefox 3.6.12 and previous, the auto init (auto connect) is not working. The app will work outside of FB but not in the canvas.
But if you set a setTimeout (even with no delay) before the embed swf function….. it works !!
I know that doesn’t concern your own embeding solution but the facebook-actionscript-api one.
However, perhaps yours have the same kind of issue on on 3.6.12 and previous.
hi Etienne,
glad you made it work. its really interesting that it does not work correctly with ff. it may be due to flash app is not completely prepared. not sure what may case the issue:
- missing flashvars?
- shared object not ready?
- stage and urlloader not ready?