Facebook Login with ASP.NET Web Forms

Join my mailing list!

01/04/18 - Facebook Login should now be implemented using the new 'Facebook Solution Framework (FSF) NuGet Package for .NET'.   Documentation for the NuGet Package can be found at:
http://www.modernappz.com/products/fsf/nuget/

 

02/28/15 - One of the core functions of any modern app is the ability to leverage Social Authentication (also known as Social Login).  Social login is a form of single sign-on using existing login information from an identity provider such as Facebook, Twitter, Google or Microsoft to sign into a third party website or app in lieu of creating a new login account specifically for that app.  The mechanism is designed to simplify logins for end users as well as provide more reliable demographic information to developers.

Under the covers, Social login is actually powered by OAuth.  OAuth is an open standard for authorization.  OAuth provides client applications 'secure delegated access’ to server resources on behalf of a resource owner. It specifies a process for resource owners to authorize third-party access to their server resources without sharing their credentials. Designed specifically to work with Hypertext Transfer Protocol (HTTP), OAuth essentially allows access tokens to be issued to third-party clients by an authorization server, with the approval of the resource owner, or end-user. The client then uses the access token to access the protected resources hosted by the resource server.  OAuth is commonly used as a way for web surfers to log into third party web sites using their Facebook, Twitter, Google or Microsoft accounts, without worrying about their access credentials being compromised.

Years ago, when I first began working with Social Login and OAuth, I found the concept to be somewhat complicated and difficult to implement from scratch.  I attempted using third party libraries such as the Facebook SDK for .NET however it did not assist me in truly understanding the underlying concept.  After much research on the topic I discovered the following graphic which I found to be quite helpful:

The more I worked to understand it, the more I realized that it is simply just a series of calls to various endpoints (URIs) which in sequence gets me to the expected result.

As I went about deciding which identity provider to use it was initially obvious that the one with the largest number of users would make the most sense.  If I’m building an app for the masses, then I want to make sure that I provide users with the easiest way for them to login to my app.  Therefore the obvious choice was Facebook which currently has approximately 1.3 billion active users.

According to identity management platform Gigya, for the first time since 2011, Facebook has surpassed the 60 percent mark and powered 61 percent of all social logins on Gigya’s network in the last quarter of 2014 (up from 58 percent in the previous quarter and up 10 percent from a year ago).

This made the decision to implement Social Login with Facebook a no-brainer.  Once this decision was made I set out to find any code samples online that used ASP.net and even more specifically Web Forms.  I quickly discovered that a simple, straight forward example simply did not exist.  As of Visual Studio 2013 the option to create a new ASP.net Web Application project using ‘individual user accounts’ from social identity providers became available however, again, this did not lend to the level of control I was looking for.

Without searching much further I took on the task of doing this myself and have now also created a sample project which you can download and incorporate into your app.

The sample project does the following:

  1. Authenticates the user via Facebook
  2. Makes a requests to Facebook for the user’s public profile information
  3. Display the user’s information

Before you use the following sample you must create a Facebook application. To do so navigate to https://developers.facebook.com/apps and click the '+ Add a New App' button. Follow the steps to create an app and record your AppId and AppSecret.

Once you have your AppId and AppSecret all you need to do is following:

  1. Download the project from GitHub
  2. Open the project in Visual Studio
  3. Open the Web.config and add your AppId and AppSecret in the <appSettings> section
  4. Run the project.

This is the result you should get:

The following is the core logic:

And there you have it.  Please let me know in the comments if you have any issue with concept or with the sample project… would be happy to help.

In upcoming blog posts I will discuss how to:

  • Request additional information from facebook that requires user permissions such as ‘email address’ and ‘location’.
  • Submit posts back to facebook on behalf of the user

Download the full source code on GitHub:
https://github.com/nickpinheiro/FacebookLoginASPnetWebForms

Additional Resources:

Other posts in the Facebook Development series:

Don’t miss a thing…

Join my mailing list!