Welcome to SolamenteNiel!

In Facebook Authentication - Overview (Post #5) I gave an overview of Facebook authentication. In this post I’m going to show exactly how to implement this using Skyway Builder CE, and I will be augmenting the project that I started to create in Facebook application using Spring Framework (Post #4).  At the end of this post there’s a link to download this Eclipse Project for Skyway Builder CE.

When you register a new application in Facebook, your assigned two keys. The API Key is used to identify the application when making calls to the Facebook API. The Secret Key is used for authenticating the application with Facebook. Even if someone inadvertently gets accesses to the API Key and tries to make a Facebook API call using it, Facebook will prohibit any API requests if the secret key doesn’t match. Needless to say…you should not share these keys with anyone else, particularly the secret key.

Application Properties

The Facebook application will need these keys, and I think the best place to store it is in a project properties file. If you need to update the keys at any time, then you have only one place to update it. You could have specified the keys as a project constant, however changes to the keys would then require a code change. By using a properties file, you have the flexibility to change the keys at anytime…even while the application is deployed.

Add a resources.properties files to the WebContents/WEB-INF/classes folder. This can be done from the Skyway Navigator by right-clicking on the WebContents/WEB-INF folder and creating a classes folder. Next highlight the WebContents/WEB-INF/classes and create a new File (File Menu–>New–File) called resources.properties. Add the following two lines to the properties file. These two lines are your api key and secret.

facebook.apikey=<COPY YOUR FACEBOOK API KEY HERE>
facebook.secret=<COPY YOUR FACEBOOK SESSION KEY HERE>

facebook-java-api

The Facebook API is implemented as REST services. While REST services can be universally leveraged by all web-aware development platforms, they aren’t accessible in a way that’s natural to any specific platform. That’s why their exists various client libraries that wrap-up the functionality of the Facebook REST services in an API that is more easy to consume from a respective development platform. For example there is a PHP client library that is mantained by Facebook. Facebook also used to maintain a Java client library, however it wasn’t actively maintained by Facebook. The official Facebook version was subsequently abandoned in favor of third-party client libraries that are much better maintained.

I could use the REST services directly from Skyway Builder. However for the reasons I mentioned in the previous paragraph, I decided to use the client library from the facebook-java-api project on Google Code. This purpose of this project is to “to maintain, support, and extend the abandoned codebase to provide a high-quality, up to date version of the Facebook API client for Java developers, and to keep the Java client up to date as the Facebook Platform API changes and evolves“.

Using this library consists of adding the respective jar files to the project. I downloaded the following jar files from the Quick Start section of facebook-java-api project, and I copied them to the lib folder of my Eclipse project (i.e. C:\java\Skyway Visual Perspectives CE\workspace\myfacebookapp\lib).

* http://facebook-java-api.googlecode.com/files/facebook-java-api-1.8-final.jar
* http://facebook-java-api.googlecode.com/files/facebook-util-1.8-final.jar
* http://facebook-java-api.googlecode.com/files/json-1.0.jar
* http://facebook-java-api.googlecode.com/files/jaxb-api-2.1.jar
* http://facebook-java-api.googlecode.com/files/jaxb-impl-2.1.jar
* http://facebook-java-api.googlecode.com/files/jsr173-api-1.0.jar

From the Java Perspective in Eclipse I refreshed the project (Project right-click–>Refresh) and added the jar files to the Libraries tab of the Java Build Path (Project right-click–>Properties–>Java Build Path). Since I copied the jars to the project, I could see all the jar files using the “Add Jars” button.

Now that I have the client library, I’m ready to start making calls to the Facebook Api.

Project Structure

Next I’m going to implement the Skyway Project. This post isn’t intended to describe all the Skyway artifacts. Suffice it to say I’m going to follow that standard approach for building web applications using Skyway Builder. If you are new to Skyway Builder, I recommend the Skyway Builder Tutorial that is available in PDF and Video format.

I’m going to create a Skway Web Controller called “fbController”, a Skyway Web Conversation called “fbConversation’ and an Skyway Action called “starthere”.

- myfacebookapp
   - fbController

      - fbConversation
         - starthere

The starthere Action that will handle the server-side logic for getting a session key for the current user.

Project and Conversation Variables

For this application we’re going to need the following variables:

Project Variables (myfacebookapp)

1. page (Text) - for specifying the View (JSP) that should render the response

Conversation Variables (fbConversation)

1. fbAppApiKey - for storing the application api key (that is read from properties file)
2. fbAppSecret - for storing the application secret key (that is read from properties file)
3. fbSessionKey - for storing the session key (this is what we’re trying to get so that we can access facebook data)
4. fbAuthToken - for storing the auth token that is passed by facebook as a url request parameter

Implementing the Action

As described in the previous post, to access any Facebook user data using the Facebook API I’m going to need a session key. The session key is derived from the authentication token (provided by Facebook) and the API Key and Secret Key.

The following diagram shows the actual implementation of the starthere action, and a description of the diagram follows:

The action starts by first checking to see if a session key already exists by evaluating the fbSessionKey variable using a Decision Step (Session Exist?). This may not be the first time the end-user is accessing this application during a browser session. If the session key already exists, there’s no need to get it again.

If the session key exists (Yes Branch), then I redirect the user to the front page of the application (frontpage.jsp). This is accomplished by using a Variable Editor Step (Redirect to frontpage) to assign “/frontpage.jsp” to the project.page variable.

If the session key doesn’t exist (No Branch), then I load the api key and secret key from the properties file. Skyway doesn’t have a dedicated step for reading properties files, so I’m going to code this part of the implementation. I love the fact that I can blend modeling and coding with Skyway Builder. There are several ways to integrate custom code with a Skyway Builder project, and in this case I’m going to use the Groovy. The Groovy Step (Get Properties) will read the facebook.apikey and facebook.secret properties and store them in the fbAppApiKey and fbAppSecret variables respectively. Here’s the snippet of code for the Groovy Step:

ResourceBundle bundle = ResourceBundle.getBundle ( "resources");
fbAppApiKey = bundle.getString("facebook.apikey");
fbAppSecret = bundle.getString("facebook.secret");

After the properties are loaded, the next step is to check if the authentication token has been received from Facebook. If you recall in post #5, the authentication token is only received from Facebook after the application has been redirected to the Facebook Login URL. A Decision Step (Auth Token Exist?) will evaluate the fbAuthToken variable.

If the authentication token exists (Yes Branch), then the next step is to call the Facebook API to get the session. Since I added facebook-java-api to my project, it is available for me to use. I’m going to use the Groovy Step (Get Session) to call Facebook using facebook-java-api.

import com.facebook.api.FacebookRestClient;
import com.facebook.api.FacebookException;
FacebookRestClient client = new FacebookRestClient(fbAppApiKey,fbAppSecret);
client.setIsDesktop(false);
try {
fbSessionKey = client.auth_getSession(fbAuthToken);
} catch (FacebookException e) {
e.printStackTrace();
}

Once I have the session, I will redirect the end-user to the frontpage (/frontpage.jsp) of the application. In this case I’m using the same “Redirect to frontpage” step.

If the authentication token doesn’t exist (No Branch), then I’m going to redirect the end-user’s browser to the Facebook Login URL. This is done using a Variable Editor Step (Redirect to Facebook login) to assign the Facebook login url (http://www.facebook.com/login.php) plus an api_key url parameter to the project.page variable.

After the end-user is authenticated, Facebook will redirect the end-user to the Canvas URL which will embed the Callback URL…..which will invoke this Action all over again from the beginning. Except this time I’ll have an authentication token.

JSP Pages

Next we’ll add a new JSP called frontpage.jsp which will handle the application functionality after an end-user has an established session with the application. This post is focussed on authentication, so I won’t put anything special in the page. I will just show the application title and the session key.

The frontpage.jsp page is mostly boiler plate JSP/HTML code. The most relevant part of this page is between the <body> tags. I’m using a Skyway Label web control (JSP tag) for displaying the session key.

<%@ page language="java" isELIgnored="false" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.skywaysoftware.com/taglibs/core" prefix="skyway"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<skyway:javascript src="prototype.js"/>
<skyway:javascript src="skyway-internal.js"/>
<skyway:javascript src="skyway.js"/>
</head>
<body>
<h1>myfacebookapp</h1>
Session Key: <skyway:label value="${fbController.fbConversation.fbSessionKey}"/>
</body>
</html>

Per the configuration that I did in post #3, the index.jsp file is already specified as the callback URL. So I will reimplement index.jsp to forward to the starthere action that I just implemented. Furthermore it will take the auth_token parameter that is passed-in from Facebook and assign it to the fbAuthToken variable.

<%@ page language="java" isELIgnored="false" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:redirect url="/btbController/facebookConversation/getSession">
<c:param name="btbController.facebookConversation.fbAuthToken" value="${param.auth_token}" />
</c:redirect>

URL Action Mapping

When the starthere Action was added to fbConversation, a URL Action Mapping entry was automatically added to fbController. A URL Action Mapping maps URLs to Actions and subsequently to Views. In the case of this project, any requests to the “/fbController/fbConversation/starthere” URL will be handled by the “myfacebookapp.fbController.fbConversation.starthere” action.

When the action is complete, the configured View (which is blank by default) will handle rendering the response. The starthere action needs to dynamically set the View based on the results of the action. If you recall, I created a project variable (project.page) that is set by the action. The URL Action Mapping is configured to use this variable by specifying “redirect:${project.page}”.

Run the Facebook App

That’s it. If I deploy the application (see Post #4) and run it from Facebook, I should see the following page.

I have deployed this sample application to my host provider, so you can see it from Facebook by using the following Canvas URL: http://apps.facebook.com/nielfacebookapp/.

While it has taken several posts to get to this point, I now have a sample application that can integrate and authenticate with Facebook.  The application is using the Spring Framework and Spring MVC, however I didn’t need to do any Spring-based development.  The application was implemented with two JSP pages and one Skyway Action with six Skyway Steps. Of course….if I want….I can switch to the Java Perspective in Eclipse to see all the annotated Spring beans, Spring configuration files, etc…

You can download the Eclipse project for this example from here: myfacebookapp.zip.

In the next post I will add some additional functionality to the application to demonstrate the use of the Facebook API.

This post is one of a series of posts relating to developing Spring-based Facebook applications using Skyway Builder:

• Facebook Application Platform (Post #1)
• Overview of Facebook Application Development (Post #2)
• Setting up a Facebook Development Environment (Post #3)
• Facebook application using Spring Framework (Post #4)
• Facebook Authentication - Overview(Post #5)
• Implementing Facebook Authentication (Post #6)