Apr 28, 2011

Loading pictures from Facebook

I ran into flash security problem when as3 application tried to load users profile picture. It seems started after Flash Player 10.2 update today.

If you get error like this:

SecurityError: Error #2122: Security sandbox violation: LoaderInfo.content: http://mydomain.com/my.swf cannot access https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/1234_1424341323_7322_s.jpg. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.

You need to load policy file from facebook by

Security.loadPolicyFile("https://fbcdn-profile-a.akamaihd.net/crossdomain.xml");

Before today it was enough to load it from here
Security.loadPolicyFile("http://profile.ak.fbcdn.net/crossdomain.xml");

Waiting for news from Facebook or Adobe about these changes.

Apr 7, 2011

Facebook apps OAuth 2.0 authorization

As you know Facebook implemented OAuth 2.0 authorization for the applications. I recommend you to start learning about this method from http://developers.facebook.com/docs/guides/canvas/#auth.
Here, I want to describe authorization process for client-server Facebook Canvas application assuming that server part is written on Java (JSP / Servlets).

When user tries access your app first time he should be redirected to special dialog to authorize your app and allow it to access your facebook user account data. To show this OAuth dialog you need to redirect user here
https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGE

But how to detect if user is not authorize your app yet? We'll use base64url encoded parameter "signed_request" that is passed to you using HTTP POST method.
Please note: You need to enable "OAuth 2.0 for Canvas" parameter in your app settings on "Advanced" tab.

If user authorized your app then signed_request parameter will have user_id, oauth_token and other attributes. So we need to check if any of that attributes is present and redirect the browser to the dialogue otherwise.

Here is JSP page code example:

<head>
<%
    JSONObject signedRequest = FacebookProvider.decodeSignedRequest(request.getParameter("signed_request"));

    if(signedRequest.has("user_id") == false)
    {
%>
  //Redirect to OAuth dialog using javascript
  <script language="JavaScript" type="text/javascript">
   appId = "12345678"; //Change to your own
   appURL = "http://apps.facebook.com/exampleapp/"; //change to your own
   
   top.location.href = "https://www.facebook.com/dialog/oauth?client_id=" +
                     appId  + "&redirect_uri=" + appURL;
  </script>
  </head>

<%
    }
    else
    {
%>
</head>
 // You are athorized!
... here is your html text ...

<%
 }
%>

Apr 4, 2011

Facebook Graph API init problems

When we turn to the new Graph API for our facebook applications we were faced with the problem of actionscript API initialization on some web browsers like Internet Explorer and Opera. You can find actionscript Graph API here http://code.google.com/p/facebook-actionscript-api/

After detailed studying of source code of that library we discovered that the problem is in Facebook Javascript SDK events. It is due to actionscript library is actually based completely on javascript SDK.
If you'll look into "api\com\facebook\graph\core\FacebookJSBridge.as" file you'll see how FB.init() method implemented:

init: function( opts ) {
FB.init( FB.JSON.parse( opts ) );

FB.Event.subscribe( 'auth.sessionChange', function( response ) {
FBAS.updateSwfSession( response.session );
} );
}


Even if you use Javascript SDK you won't catch events you subscribed on.

Solution of this problem was found in Facebook app settings. 
You need to fill in both fields "Site URL" and "Site Domain" on "Web Site" tab in you app settings.

Very strange that this problem manifested itself only on the IE and Opera browsers.
Anyone knows why?