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.html:
<!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 getRequestParameter(name)
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
var results = regex.exec(window.location.href);
return results == null ? "" : results[1];
}
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();
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);
}
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();
}
//]]>
</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
- window.top.location – if there is no session 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.
Now some facebook settings:
Canvas - Canvas Callback URL: http://blog.yoz.sk/examples/FacebookOAuthGraph/facebook.html? Migrations - New SDKs: Enabled
Here is the final facebook app http://apps.facebook.com/blogoauthgraph/
updated Jul 21, 2010: Quickfix for late facebook changes:
// line 36:
var flashvars = allRequestParameters();
if(!flashvars.session && flashvars.access_token)
flashvars.session = '{"access_token":"' + flashvars.access_token + '"}';
// line 51:
if(!getRequestParameter("session") && !getRequestParameter("access_token")){
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"
+ "&type=user_agent";
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.
[...] 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 [...]