DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Data Engineering
  3. Databases
  4. OAuth2 Implicit Grant Flow - Example Using Facebook OAuth2 API

OAuth2 Implicit Grant Flow - Example Using Facebook OAuth2 API

This tutorial and sample application will teach you how to use the OAuth2 implicit grant flow in an untrusted client, such as a pure HTML or JavaScript application.

Aruna Karunarathna user avatar by
Aruna Karunarathna
·
Oct. 06, 17 · Tutorial
Like (4)
Save
Tweet
Share
18.88K Views

Join the DZone community and get the full member experience.

Join For Free

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.

Image title

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.

authentication API facebook security Flow (web browser) app application Travel

Published at DZone with permission of Aruna Karunarathna, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Upgrade Guide To Spring Data Elasticsearch 5.0
  • Express Hibernate Queries as Type-Safe Java Streams
  • ChatGPT: The Unexpected API Test Automation Help
  • AWS Cloud Migration: Best Practices and Pitfalls to Avoid

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: