• About Us
    • News
    • Blog
    • Mission
    • Values
    • B Corp
    • Awards
    • Partners
    • Contact Us
  • Specializations
    • Agile Application & Web Development
    • Federal Shared Services
    • Budget Formulation & Execution
    • Health Research Support & Analytics
  • Capabilities
    • Data Analysis, Analytics & Dashboards
    • Cybersecurity, Authentication & Policy
    • Systems Architecture & Design
    • Cloud
    • Database Architecture & Data Management
    • Operations & Maintenance
    • Program Management
  • Our Work
  • Contracts
    • CIO-SP3 Small Business
    • DHS Eagle II
    • DOT SWES
    • FAA eFAST
    • GSA Alliant
    • GSA Alliant Small Business
    • GSA IT Schedule 70
    • GSA Professional Services Schedule
    • Human Capital & Training Solutions (HCaTS)
    • International Monetary Fund (IMF)
    • SEC QRADS2
    • Treasury BFS OSSS
  • Careers
    • Open Positions
    • Awards
    • The TCG Experience
    • Employee Happiness
    • Testimonials
    • Benefits & Perqs
  • Contact Us
  • 202–986-5533

TCG

  • About Us
    • News
    • Blog
    • Mission
    • Values
    • B Corp
    • Awards
    • Partners
    • Contact Us
  • Specializations
    • Agile Application & Web Development
    • Federal Shared Services
    • Budget Formulation & Execution
    • Health Research Support & Analytics
  • Capabilities
    • Data Analysis, Analytics & Dashboards
    • Cybersecurity, Authentication & Policy
    • Systems Architecture & Design
    • Cloud
    • Database Architecture & Data Management
    • Operations & Maintenance
    • Program Management
  • Our Work
  • Contracts
    • CIO-SP3 Small Business
    • DHS Eagle II
    • DOT SWES
    • FAA eFAST
    • GSA Alliant
    • GSA Alliant Small Business
    • GSA IT Schedule 70
    • GSA Professional Services Schedule
    • Human Capital & Training Solutions (HCaTS)
    • International Monetary Fund (IMF)
    • SEC QRADS2
    • Treasury BFS OSSS
  • Careers
    • Open Positions
    • Awards
    • The TCG Experience
    • Employee Happiness
    • Testimonials
    • Benefits & Perqs

Project: Facebook Data Liberation — Part 3 — Authentication

Back in Part 1 I explained why I’m making this HTML5 application. The condensed version of what I’m making is a web/mobile app that can read a running/fitness Facebook group feed. In the Part 2 I explained how I was going to process the group feed once I got it.  In this part I will show you how to authenticate with Facebook and download the data into your web app.

There are a few ways to work with the Facebook API in a HTML5 application.  You can use their JavaScript SDK, you can do the integration on the server side, or you can make direct calls with your own JavaScript functions.  I’m going to use that last technique.

The basic process works like this:

  1. The user loads your web page
  2. JavaScript on the page checks for a Facebook authentication token.
  3. If the token isn’t found, JavaScript will redirect your user to the Facebook login URL, (https://www.facebook.com/dialog/oauth) with certain GET parameters
  4. The user logs in  and Facebook redirects them back to your application with the authenticaion token included in the URL
  5. JavaScript in the application examines the URL and finds the auth token indicating a successful login

I mentioned in step 3 that there are parameters you pass into the Facebook auth system.  Here are the ones I use:

  • redirect_uri — this is the URL that Facebook will use to send the user back to your application
  • response_type — this can be set to a value of “token” or “code”.  A value of code is used for server side authentication.  Since we are building a stand alone HTML5 app, we will use token.  When Facebook redirects the user back to your page, it will append a #access_token=XXXXXX to the URL so you can read the token from the location.
  • scope — This is how you request certain privileges for your token.  Since our app needs to see group information, we will request “user_groups”.  If you need to get more privileges, use a comma separated list.  Facebook docs have the complet list of privileges you can request.

The documentation lists the other parameters you can use, but that’s all we need for this application.

That’s the outline, here is the code I am using:

var appID = ‘YOUR-APP-ID’;
if (window.location.hash.length == 0) {   
    var path = ‘https://www.facebook.com/dialog/oauth?’;   
    var queryParams = [‘client_id=’ + appID,     ‘redirect_uri=’ + window.location,     ‘response_type=token’, ‘scope=user_groups’];
    var query = queryParams.join(‘&’);
    var url = path + query;
    window.location = url;
} 

Using this code as-is will automatically send the user to the login page.  A good UI would have some kind of warning or login button to press before that.  Every app will want to do that differently, so pick the method that is right for you.

If you look at the code above, you see that an application ID is needed.  You can get this by registering your application on the Facebook developer app: http://developers.facebook.com/setup/

One important note, when you register you have to list the Website URL of your application.  When you try to use the Facebook API, your referring URL (or at least the domain) will be checked against the value you put in there.  If things don’t match up, you will see the message “An error occurred.  Please try again later.”  on the Facebook login screen.  Clearly not very helpful to a developer, but I guess it’s better for your end users to see that than something like “The developer of the web app you are trusting with your personal Facebook data isn’t smart enough to code it properly and here is what he/she did wrong: XYZ”

The name restriction makes local development a little trickier than most HTML5 applications.  This means you can either do your development on a public web server or setup and match a DNS entry for you local system with the URL you register with Facebook.  

This is a bit annoying for me as my local system is a Windows 7 box without a web server installed. I could do my coding on my Linux server I have on Amazon’s EC2, but I really like Visual Studio as an editor.  My solution was to use Server2Go as my local web server and register my home router’s public name as my website URL with Facebook.  When I’m ready to deploy my app to the world, I will update my URL with Facebook.

In the next part, I will talk about pulling the feed pragmatically and parsing the data.

Share this:

Share this...
Share on Facebook
Facebook
Pin on Pinterest
Pinterest
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Categories:

Technology We value our families

Tags:

authentication. Facebook API javascript login

One response to “Project: Facebook Data Liberation — Part 3 — Authentication”

  1. EmaMarco says:
    May 12, 2012 at 8:14 pm

    Well done article that. I’ll make sure to use it wsiely.

Comments are closed.
TCG 7348 Georgia Avenue NW
Washington, DC 20012

talktous@tcg.com
202-986-5533
Facebook LinkedIn Twitter

Positively Distinct

Our President ROARed a business fable. View

Copyright ©2023 TCG, Inc. All rights reserved.

TCG and the TCG logo are registered trademarks of TCG.

  • About Us
  • Specializations
  • Capabilities
  • Our Work
  • Contracts
  • Careers
  • Contact Us
  • Privacy Policy
  • CMMI DEV/3
  • CMMI SVC/2
  • ISO 9001:2015 Certified
  • ISO 20000-1 Certified
  • ISO 20000-1 Certified
  • B Corp Certified