Writing a Facebook Application using GWT

Posted by: admin in Facebook on February 7th, 2009

GWT (Google Web Toolkit) is a really cool tool to develop rich and effective web based software. It is especially useful, if you hate coding in javascript and don’t want to deal with HTML. On the other hand, it comes with it’s own handicaps.  It might be a little bit complicated to integrate it to the other tools and libraries, as well as writing a Facebook Application.

Here are the steps you need to follow to develop a Facebook application using GWT. Please note, all these also applies the libraries like GWT-Ext or GXT that built on top of GWT.

Use iFrame as Rendering Method

To use GWT to develop a Facebook application, you need to put it in an iFrame. To do so, choose “IFrame” as “Render Method” from the Canvas->Canvas Settings while creating a Facebook application. By doing this, you are choosing not to use FBML and rather use HTML and show all of your contents in an IFrame.

Security & Authentication 

If a user comes to your application through Facebook, Facebook servers actually make a request to your application, and not the users themselves. Also, Facebook servers put some URLParameters to that request to tell you which user is trying to connect and give you some additional information. If these parameters don’t exist in a request, that means it is not coming from Facebook servers and you should show some other content like a redirection to Facebook login page to that requester. 

 So, BEWARE and DONT FORGET ! Anyone can try to use your application by putting these URLParameters manually into their request to fool your application and try to make it believe that the request is coming from Facebook Servers. So, you have to be very careful and check if the parameters are valid. The parameters sent to you from Facebook will include a special parameter named fb_sig.  This parameter carries a MD5 value for you to make a validity check. If this value is valid, you can “theoretically” be sure, the request is coming from Facebook servers and it is valid. That way, you can understand if someone is trying to attack to your GWT application. I will explain how to do this later.

Grabbing URLParameters

The Parameters sent by Facebook servers to your application are:

  • fb_sig_in_iframe 
  • fb_sig_locale 
  • fb_sig_in_new_facebook 
  • fb_sig_time 
  • fb_sig_added 
  • fb_sig_profile_update_time 
  • fb_sig_expires 
  • fb_sig_user 
  • fb_sig_session_key 
  • fb_sig_ss 
  • fb_sig_api_key 
  • fb_sig_app_id 
  • fb_sig

    •  

To get the values of these parameters, you can use GWT’s Window.Location class. Here is an example;

import com.google.gwt.user.client.Window.Location;
 
String fb_sig_user = Location.getParameter("fb_sig_user");
String fb_sig_session_key = Location.getParameter("fb_sig_session_key");

 
tip: the values of these parameters will be “undefined” if someone is trying to connect your application through Facebook, but they aren’t logged in.

 
Detect If Users are Coming Through Facebook and If They Logged in Or not? 

As I mentioned earlier, you need to verify if the user comes through Facebook. You can do this by using your applications back-end parts that implements business logic. If you are using PHP on the back-end, here how you can do it. Let’s assume name of the php file you are gonna call is “fb.php”

 1. First, get the query string that comes from Facebook servers.

import com.google.gwt.user.client.Window.Location;
 
String queryString = Location.getQueryString();
if(queryString.charAt(0) == '?')
queryString = queryString.substring(1);
// We are getting rid of the ? in front of the string.
String url = "php/fb.php?action=validate&" + queryString;

 
2. Make an AJAX call to this URL you just created. 

If you are not familiar how to do an AJAX call using GWT, please refer to GWT documentation. 

3. Take the request from PHP file & validate.

In your php file, you need to have a similar content;

$appsecret = '{YOUR APPLICATION SECRET KEY HERE}';
if($_REQUEST['action'] == "validate") {
$sig = '';
ksort($_REQUEST);
foreach($_REQUEST as $key => $val) {
if(substr($key, 0, 7) == 'fb_sig_') {
$sig .= substr($key, 7) . "=" . $val;
}
}
 
$sig .= $appsecret;
$verify = md5($sig);
if($verify != $_REQUEST['fb_sig']) {
// Request is not valid;
} else {
// Request is valid;
}
} 

Making a Request to Facebook (Using PHP)

Once you obtained the necessary URLParameter values from Facebook and you validate them, you can make queries using fb_sig_session_key value as in the following example;

Send your own parameters to your PHP files besides the parameters Facebook sent by making an AJAX call. Let’s say your php file’s name is fb.php, make a call to it as in the following example that gets the users name.

String url = "fb.php?action=getName&" + queryString;

 
In your php file (fb.php) you need to have content similar the following;

require_once 'facebook.php';
require_once 'facebookapi_php5_restlib.php';
$appapikey = '{YOUR API KEY HERE}';
$appsecret = '{YOUR APPLICATION SECRET KEY HERE}';

// do these, after validation

$userid = $_REQUEST['fb_sig_user'];
$sKey   = $_REQUEST['fb_sig_session_key'];

if($_REQUEST['action'] == "getName") {
    try {
$fbClient = new FacebookRestClient($appapikey, $appsecret, $sKey);
    } catch(FacebookRestClientException $ex) {
// Handle Exception
    }
$fql = "SELECT name FROM user WHERE uid=$userid";
    $userInfo = $fbClient->fql_query($fql);
   $userName = $userInfo[0]['name'];
// $userName now contains user's name.
}

To see, what kind of data you can request from Facebook using FQL, please refer Facebook Developers page.

Ozgur Demir

Share/Save

, , , , , , , , ,

13 Comments




SetPageWidth