Forgot your password?

Home > About Us > Modern Signal Blog >Overview of "Login with Facebook"

Overview of "Login with Facebook"

I recently worked on integrating "Login with Facebook" functionality into our Lighthouse.Net CMS.  This feature enables users to login to a third-party website using their Facebook credentials.  As such, the user does not need to create and remember a username and password for your site.  Their Facebook credentials are used instead.

While I found a lot of information online about this integration, I was unable to find a great resource that fully explained how to get from the user successfully logging in using their Facebook credentials (which occurs in the browser using Facebook's Client-Side Javascript SDK) to securely logging the user into our site.  Here are the questions I had and how I addressed them:

Question 1:
What data do we need to store in our Users database table to support Facebook integration?

Answer 1:
We added a column for FacebookID.  This is an integer value generated by Facebook that serves as the primary key for each user.


Question 2:
When a user logs in using the "Login with Facebook" button (which happens in the browser using the Javascript SDK), what data do we need to pass from the browser to our server to log the user in to our app.

Answer 2:
When a user successfully logs in using Facebook's Client-Side Javascript SDK, an OAuth 2 access token is exposed to your Javascript code (accessible as response.authResponse.accessToken).  This token is a temporary token which can be used to retreive data for this user using Facebook's Social Graph API.  Here is the login flow our software follows:

  1. Send the accesss token to your server (e.g. https://www.site.com/FBLogin?accessToken=123456).  Note that the actual access token is much more complex, consisting of roughly 112 random characters.
  2. In your server code, make a request to Facebook's Social Graph API using the access token(e.g. https://graph.facebook.com/me?access_token=123456).  This call returns a JSON object which contains the user's FacebookID (the "id" field in the JSON object).
  3. Since we now know the user's FacebookID, we can find the appropriate record in our Users table and log the user in as though they submitted a form on our site with their username and password.

This logic relies on the fact that the access token generated by Facebook is complex, temporary, and unique.  If an access code can successfully be used to retrieve a FacebookID from the Social Graph, we can trust that the FacebookID we receive back is associated with correct user.  This takes the place of a user entering their username and password into a web form.

Here is the HTML and Javascript code required to add the Login with Facebook button to your site.

<script src=https://connect.facebook.net/en_US/all.js type="text/javascript"></script>
<script>
 $("document").ready(function () {
  // Initialize the SDK upon load
  FB.init({
   appId: 'YOUR_FACEBOOK_APPID', // App ID
   channelUrl: '', // Path to your Channel File
   scope: '', // This to get the user details back from Facebook
   status: true, // check login status
   cookie: true, // enable cookies to allow the server to access the session
   xfbml: true  // parse XFBML
  });
  // listen for and handle auth.statusChange events
  FB.Event.subscribe('auth.login', OnLogin);
 });

 // This method will be called after the user login into facebook.
 function OnLogin(response) {
  if (response.authResponse) {
   window.location = "/FacebookLogOn?accessToken=" + response.authResponse.accessToken;
  }
 }
</script>

<div id="fb-root"></div> <!-- This initializes the FB controls-->  
<div class="fb-login-button" autologoutlink="true" scope="" >Login with Facebook</div> <!-- FB Login Button -->  
<br /><br />

Comments

ram's Globally Recognized Avatar i have using your code i have error :Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.can you slove this error.

Posted on June 4, 2015 12:59:34 AM EDT by ram

Adam Polon's Globally Recognized Avatar Hi ram,

I just googled this and came across the following which should help you solve this error: https://www.facebook.com/help/community/question/?id=542958419109491.

The error is a configuration issue and not a code issue.

HTH,
Adam

Posted on June 4, 2015 8:43:44 AM EDT by Adam Polon

Leave this field empty

Testimonials

  • I love working with Modern Signal! Their CMS is very easy to use and they are incredibly responsive to questions or challenges I bring them.

    - NALP

  • Modern Signal understands our business - from future needs to current limitations - so their solutions are always scalable, solid, and service-oriented.

    - National Association of Home Builders

  • Modern Signal has a professional staff that was very responsive to our needs during all phases - scoping, developing, implementing and maintaining - of our project.  We have been pleased with their ability to deliver quality work on time and on budget. If given the opportunity, I would work with them again.

    - The National Center for Safe Routes to School

  • Modern Signal worked with us to understand our needs and figure out what solution would work best for us. Our Lighthouse CMS is perfectly suited to our website goals. When we later needed to modify the CMS, they again took the time to understand exactly what was  needed and then built that functionality rather than delivering a cookie cutter solution.   

    - Ecosystem Investment Partners

  • I felt as if my company was their only client. They responded to my needs quickly and efficiently despite short turn around time and intense demands.

    - Teaching Strategies, Inc.

  • We wouldn’t have gotten where we are today without your support over the years.  Modern Signal has always been a great partner to us.

    - Kirk Gillis, Managing Director at Zoom Tanzania

  • Modern Signal has been a great partner for us for over the past 10 years.  As our business grew and our needs changed, Modern Signal was able to work with us to adjust our website platform in the ever-changing online world.  Their service and response level has been second to none, and we've been never been happier with our relationship with them.

    - Charm City Run

  • Modern Signal significantly enhanced our site to be more efficient and user-friendly. They provide excellent customer service with timely and cost-effective solutions.

    - Center for Medicare Education

  • This was by far the smoothest website redevelopment I have ever experienced. Modern Signal was a wonderful company to work with and we greatly value our working relationship. 

    - National Association of Student Financial Aid Administrators