OAuth2 Implicit Grant Flow - Example Using Facebook OAuth2 API

In this post, we are going to explore the OAuth2 implicit grant flow using a Facebook OAuth2 API example. In the OAuth2 client specification, the clients are categorized as trusted and untrusted.

Trusted OAuth2 clients are usually applications following the MVC architecture, where the application has the facility to store the keys securely. In a later post, we will explore more on trusted OAuth2 clients.

Pure HTML/JavaScript applications are considered untrusted OAuth2 clients. These applications typically don't have a way to securely store information. Typically, these applications need to initiate the authorization flow for each session.

Normal flow of an untrusted OAuth2 client.

The above example use case is for a Travel Buddy App, which needs the user's Facebook friend list to suggest travel buddies to the user.

1. The user requesting the Travel Buddy App to suggest more friends.
2. Travel Buddy App says, sure, I can do that, but first go to this URL and authorize me.
3. Travel Buddy App redirects to the Facebook Consent Page and presents an authorization confirmation page with a list of scopes.
4. When the user says yes, they are redirected to the Travel Buddy App with a token to use.
5. Travel Buddy App initiates a request to get the friend list from Facebook, presenting the token received in the previous step.
6. Travel Buddy App receives the friend list.

So, let's implement this.

I assume you have a Facebook account. First, you need to register this Travel Buddy App with Facebook. Then you'll receive a client_id for your application.

Facebook Settings

Log into Facebook and go to https://developers.facebook.com/.

Click on "Add a New App" and provide a display name and contact email. Click "Create App ID."

Then you’ll be redirected to the following dashboard with App Id and App Secret.

Now select "Add Product" and select "Facebook Login;" click "setup."

Choose platform web, fill out the details. and save.

Go to Products -> Facebook Login -> Settings, and add the valid OAuth redirect URIs. In our sample, it is http://travelbuddyapp.com:8080.

Now you're all set for Facebook settings.

Travel Buddy App Implementation

We need to create a simple web skeleton. You can use the following Maven archetype:

mvn archetype:generate -DgroupId=com.sample -DartifactId=travel-buddy-app -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

Remove the index.jsp file, since we are implementing a simple HTML JS application.

First, we have to write getting the token function. We have to make a GET request to the dialog/oauth endpoint with the following details:

var facebookAuthEndpoint = "https://www.facebook.com/v2.10/dialog/oauth";
var responseType = "token";
var clientId = "118592235486459";  
var redirectUrl = "http://travelbuddyapp.com:8080/callback.html";
var scope = "public_profile user_friends";

Since we want the application to redirect, we have to provide the redirectURL. The scope is the permission list we are requesting from the user. In this case, we need public_profile and user_friends.

Note that the permission list in the scope variable is given a space-separated list.

The calling URL will be similar to the following. Note that the URL parameters need to be encoded:

https://www.facebook.com/v2.10/dialog/oauth? response_type= token& client_id= 118592235486459& redirect_uri= http%3A%2F%2Ftravelbuddyapp.com%3A8080%2Fcallback.html& scope= public_profile%20user_friends

Then, after redirecting to the Facebook website, if the user is already logged in, he will be presented a user consent page, if not first redirected to the login page.

After the authorization of the user, will be redirected with the token appended to the browser URL. Process the browser URL and acquire the access_token.

var fragment = location.hash.replace('#', '');

Then we have to make two API calls to Facebook using this access token:

1. Make a call to get the profile details and extract the profile ID.

2. Make another call to get the suggested friend list using that profile ID.

var userEndpoint = "https://graph.facebook.com/v2.10/me?fields=name&access_token="
                                                                    + accessToken;

  var userId = "";
  //ajax GET call to get user ID
  $.get(userEndpoint, function(data, status){
    userId = data.id;
      var friendListEndpoint = "https://graph.facebook.com/v2.10/" + userId + 
"/friends?access_token=" + accessToken;

      $.get(friendListEndpoint, function(data, status){
            $("#response").html(JSON.stringify(data));
      });
  });

We just show the friend list appended to the HTML.

Now that's it, you have acquired the OAuth2 token using the implicit grant flow approach and used that to extract the friend list.

Testing the Application

1. Set the following host entry: 127.0.0.1 travelbuddyapp.com

2. Deploy the web app in Tomcat and access the following URL: http://travelbuddyapp.com:8080/

3. Click "Call Facebook."

4. You'll get the friends list data.

So we have covered the implicit grant flow and observed that it's pretty straightforward to implement. The negative point of this approach is that it's considered less secure since we are exposing the access token. This is a short term access methodology; since there is no way to securely store the keys, the authorization flow has to be reinitiated for later use. The sample code can be found here.