This blog post revolves around an OAuth 2.0 based Facebook application that I have developed. This application aims at providing users of Facebook, an idea of their own profile(Few interesting things that they themselves wouldn’t know about their profile 🙂 ).

In order to build this Application, I have made use of the following technologies.

Amazon Web Services for hosting, Java, JSP, Servlets, maven, apache tomcat, oauth 2, IntelliJ Idea IDE Ultimate, Facebook Graph API and Restfb Library

Before getting to the technical details of this Web App, let us dive into the functionality and the use case of this application.

General oauth 2 Functionality

Initially when you enter the URL or click on the link that leads you to the webapp, you land in this page.

Here, when you click on the Generate Results button, you will be redirected to the Facebook user consent page where you need to allow the app to access your resources and then it will prompt you to grant permissions for the app to post on behalf of you. (In my case I have already done it, hence I can proceed without visiting the user consent page).

Now it will process the request and since it needs to go through the entire timeline of the user it will take some time. (In my case about 30 seconds max).

Then as shown above, the results are generated. Notice that there is no “Share in Facebook” button below the generated content unlike in many other similar applications. That is because this has been automatically shared to the user’s wall (if he/she chose to allow Likatite to post to Facebook only).  By sharing those details seen above Likatite allows users to show off their popularity in social media. Sadly I got ratings of ‘Kids’ in my own Application 🙁 .

The screenshot above shows how the application posts to Facebook. (I changed the audience to only me, soon as I posted so that no one would see.)

PS : The tomcat server that I’ve used in aws is not stable. It doesn’t stay in the running state for too long (Maybe because I’m using the free tier in aws). So I can’t guarantee that the site will be online by the time you are visiting.

Graph API based oauth 2 methods called by the Application

1. Initially when the user lands on the index page and clicks on the ‘Get Started’ button, a function is fired and it sends the response type, client id, redirection URI and scope to the authorization endpoint. Authorization endpoint is basically the location to which we send the query parameters. Client ID refers to the App ID that we got when registering the App. Redirection URI is the location to which Facebook will send responses to. Scope refers to which types of resources that the application needs from Facebook.
2. Now Facebook sends us the response to our redirection URI, which in our case is, http://<domain name + port>/facebookapp/callback. We have mapped callback to refer to the class, OAuthCallbackListner.java. Therefore the response is sent to this class and it extracts the authorization code sent by Facebook. The obtained authorization code is then sent by this class along with the App ID, App secret  Redirection URI and grant type. Then again Facebook sends back an access token, which can be used to access user resources. The obtained Access token is stored securely in memory by this class.
3. Now that the access token is obtained it could be used to obtain all the user resources specified. Using the library I’ve used, restfb we need to pass the access token and create a connection. Afterwards we can obtain all the resources using get methods such as getLikes() and getId()

How to Set up the Sample

1. Clone this repository. git clone https://github.com/ihsanizwer/Likatite.git
2. Change permissions of the repository files. chmod -r 755 Likatite
3. Go to https://developers.facebook.com create a new App by the name, Likatite. Associate facebook Log In for the App. Provide the redirection URI at the setting section under login and obtain the App ID and App Secret. (For more on set up of the application on the developers site, please visit http://www.securityinternal.com/2017/04/retrieving-user-resources-from-facebook.html)
4. Open the source code (preferably, using IntelliJ Idea) with an IDE, open the class OAuthCallbackListner.java and the jsp page, index.jsp and change all the occurances of App ID, App Secret with the ones you got by registering the App in the facebook developers website.
5. Navigate to the app directory using the terminal to where the pom.xml could be found and type “mvn clean install”
6. Go to the target directory and locate the facebookapp.war file. Copy this war file to the webapps directory of tomcat.
7. Start tomcat by typing: ./catalina.sh run . Now go to the browser and type in the URL to the app with the relavent port number.
8. Log In with Facebook through the App. Accept to share resources through Facebook and generate the results.