Welcome to SolamenteNiel!
I know...I know...in the world of social networking like twitter, blogs just aren't cool anymore, right? Well every once and a while I want to share something that exceeds 144 characters, so I created SolamenteNiel, my blog. While I'm at it, I'm also going old school with a cheesy picture of myself on my blog. In this picture I'm pertending to be an IndyCar driver.
Archive for facebook tag (8)
0
Last year I did a series of posts related to developing a Spring-based Facebook applications using Skyway Builder. I also made the project (developed w/ Skyway Builder 6.0) available for download. With the availability of Skyway Builder 6.1, I thought it made sense to provide an updated version of the project, particularly since there have been many recent downloads of the original project.
For reference, here are the links to the original posts:
- 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)
There are a few changes to the new project, but nothing major. I don't plan on updating the original posts, but I will outline some of the changes (from memory):
- Conversations changed to Models
- A few URL mapping changes (hide implementation)
- Request parameters are read from groovy step in starthere action
- index.jsp goes away
- callback url is now http://127.0.0.1:8080/myfacebookapp-Web/fbController/fbModel/starthere
I'm almost done with my series of posts on developing a Spring-based Facebook application using Skyway Builder. I have one more post to go, but I'm already thinking about what's next. This Open Social things is similar to Facebook application development. Maybe I'll check it out next.
Reprinted from my Skyway Community Tech Blog posting:
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.
Read Full PostReprinted from my Skyway Community Tech Blog posting:
I indicated in post #4 that we would build a simple application that lists the birthday’s of your Facebook friend’s. When you are logged into Facebook as a Facebook user, you have access to information you’re friends have published about themselves, and you would access this data by navigating to their profiles.
A Facebook application can also access this information using the Facebook API. However a Facebook application doesn’t have unrestricted access to the data. A Facebook application only has access to data that has been granted to it on behalf of the end-user of the application. When you add a Facebook application, you will be prompted to grant the application access to your data, and the Facebook application can only access data related to you.
A Facebook application doesn’t automatically know who you are. Nor does Facebook for that matter. Hence the need for authentication, a way for an application to identify who you are. Fortunately Facebook does all the hard work. A Facebook application doesn’t need to implement it’s own authentication logic. Hurray!! However a Facebook application does need to know how to integrate with Facebook’s authentication system. Boo!!
It’s not really too bad. The first time you do it, it can be a bit confusing. However I will share with you what I learned and a sample Skyway implementation that you can re-use.
Building on my previous posts (see post #1, post #2, post #3, and post #4), here’s an overview of the authentication process from the moment someone tries to access your Facebook application.
- The end-user of the application makes a call to the Canvas Page URL for your application. The URL is a Facebook URL that, among other things, points to a Facebook server.
- The Facebook server generates and returns the HTML associated with the requested page. The page includes an IFRAME that has a URL pointing to the Facebook application’s Callback URL.
- The end-user’s browser makes another call to the Callback URL. This URL is pointing to your deployed Facebook web application wherever it may be hosted.
- Your application is looking for an authentication token (auth_token) in the request. Since the token doesn’t exist, your application application will send back a browser redirect to Facebook’s login URL and a URL parameter with you’re Facebook api key.
- The Facebook login URL will determine if the user is logged in.
- If the user is already logged into Facebook, Facebook will send a browser redirect to the Facebook Application’s Canvas Page URL. (Otherwise the user will be prompted to login). Facebook determines the canvas page for your application by evaluating the api key that you provided in step #4.
- Once again…The end-user’s browser makes a call to the Canvas Page URL for your application.
- Once again…The Facebook server generates and returns the HTML associated with the requested page. The page includes an IFRAME that has a URL pointing to the Facebook application’s Callback URL.
- The end-user’s browser makes another call to the Callback URL. However this time the request includes an authentication token (auth_token).
- Your Facebook application makes an API call to Facebook with the authentication token, application key and secret key to get the user’s session key. The session key is the key (pun intended) to accessing more Facebook data.
- Your Facebook application generates and returns the HTML associated with your application’s functionality, potentially with Facebook data. The HTML is embedded into the IFRAME section of Facebook page (from #8).
This whole sequence of steps is done to get the user’s session key. While it looks a bit crazy, the end-user isn’t aware of all this craziness. All the end-user knows is that they type in a URL (step #1) and get a Facebook page (step #8) with your Facebook application in the page (step #11). Now that you have end-user’s session key, you can access the user’s Facebook data….including their friends. We’re one step closer.
In the next post I will show you how to implement this in a Skyway Builder project.
This post is one of a series of posts relating to developing Spring-based Facebook applications using Skyway Builder:
Reprinted from my Skyway Community Tech Blog posting:
Okay….I think I’ve covered enough introductory content (see post #1, post #2 and post #3). Now it’s time to get down to some code.
I’m going to implement the sample Facebook application using Java. More specifically, the application is going to utilize the Spring Framework and Spring MVC. By leveraging Spring I can deploy the Facebook application to a variety of JEE configurations. I can deploy it to a JEE-lite environment that consists of Apache Tomcat, or I can deploy it to a full JEE application server utilizing both a web container and EJB3 container. For the sample Facebook application, I’m going to produce a JEE web application (war) for Tomcat. I’m not going to persist any data, so there won’t be a need for a database.
While the application is built on top of several Spring frameworks, I’m not going to really dig into Spring development. I’m going to use Skyway Builder CE, a domain-specific language (DSL) for generating Spring-based applications. Skyway Builder CE is open-source and runs inside of Eclipse. Skyway Builder will generate the Spring beans and wire them up into a Spring application.
Download Skyway Builder CE from here. I recommend downloading the RCP version of Skyway Builder. You will also need a sandbox, a runtime environment for testing the applications Skyway Builder generates. There is a sandbox setup guide that will guide you in setting up Tomcat and MySQL. However since I’m not using a database for this example, you can skip the database setup section of the guide.
Once you have Skyway Builder running and your sandbox ready to go, the following steps are for creating the most minimal application that will be integrated into Facebook. Let me warn you that this application won’t do much yet. At this point we’re only concerned with integrating something (anything!!!) with Facebook. In the next post we’ll cover building out some logic for accessing Facebook data.
- Right-click on the Skyway Navigator to create a new Skyway project. You can name it whatever you want, but I’m going to call it “myfacebookapp”.
- Right-click on the WebContents folder, and select New–>JSP. Name the JSP “index.jsp”. From the “Select JSP Template” wizard step, select “Skyway JSP File (html)”.
- From the Skyway Page Designer enter the text “Hello Facebook Users” between the body tags in the JSP page. Save the JSP.
We’re done with development. Now let’s deploy the application.
- From the Servers tab right-click on the “Tomcat v6.0 Server at localhost” and select “Add and Remove Projects”. Pick your project from the Available projects list and add to Configured projects list. Click Finish.
- Right-click on the “Tomcat v6.0 Server at localhost” and select Start.
We’re done deploying. There is now a war file located in Tomcat, and the application is initialized and ready to run. Now let’s run the application.
- Right-click on the index.jsp page and select Run As–>Run On Server. You should see browser window open up in Eclipse with “Hello Facebook Users”.
- Take note of the URL in the browser (http://localhost:8080/myfacebookapp/index.jsp). You will need this URL shortly. This URL will be your Facebook Callback URL.
We’re done. Now let’s integrate the application into Facebook.
- Assuming you already added the Facebook Developer application, select the “Setup New Application” option.
- From the New Application page, you must agree to the terms of the Facebook Platform and specify the following:
- Application Name: My Facebook App
- Developer Contact Email: your email address (should be prepopulated)
- User Support Email: your email address (should be prepopulated)
- Callback URL: the URL of your application (i.e. http://localhost:8080/myfacebookapp/index.jsp)
- Canvas Page URL: http://apps.facebook.com/nielfacebookapp/ (the url must be unique, so pick a url that isn’t already being used)
- Use FBML / Use iframe: Use iframe
Your Facebook should now be accessible from your Facebook application’s Canvas Page URL (i.e. http://apps.facebook.com/nielfacebookapp/). Copy the URL into your browser, and you should see the Facebook page, and your application embedded in the page.
Tada!! You have completed your Facebook application. So now what? Well…you probably want to do something just a bit more interesting. For example, let’s say that you want to list all of your Facebook friends birthdays. That’s what I’ll do over in the next few posts. I’ll cover Facebook authentication and the Facebook API.
This post is one of a series of posts relating to developing Spring-based Facebook applications using Skyway Builder:
