Integrating Facebook Authentication In ASP.NET MVC Application | ASP.NET MVC Programming

Objective Achieving Facebook Authentication for ASP.NET MVC Web Application
DotNetOpenAuth, is an open source library that was integrated with ASP.NET MVC adds OAuth and OID Authentication capabilities to an ASP.NET appliation. With the help of DotNetOpenAuth open source library, we can integrate Facebook authentication to ASP.NET MVC application. DotNetOpenAuth will authenticate the user by using OAuth tokens.

Registering as a Facebook Developer

You need to have a verified Facebook account to create and register your Facebook app. You can verify your account by either providing your Credit Card or Telephone Number, which will receive an SMS and that’s needs to be entered to complete the verification process.

1. Navigate to https://developers.facebook.com/ and log in with your Facebook account
   
2. You may be asked to verify your account on login to the Facebook developers website. If you choose to verify the account using Phone number, you will receive an SMS with verification code

Registering a Facebook App

We are logged in as a Facebook developer, now let’s setup a Facebook App so that we can control it in our own Web Site.

1. Click on Apps in the toolbar, Facebook will take you to the dashboard listing the type of apps you can build for it
   
2. Now selecting the Websites option will popup ‘Create a New App’
   
3. Type in an Facebook app Name and a Namespace. You can leave the Web Hosting unchecked. Click Continue and you will be taken to the Facebook app configuration page
   
   
   • The shaded in red will have the Facebook App ID and a Secret key for the Facebook App created. These tokens will be configured in the website that is going to integrate Facebook Authentication.
   • The other fields will be configured once the website has been setup and ready for communication.

Now we have the Facebook App ID and a Secret key ready, let’s start preparing the ASP.NET MVC Application and connect it to Facebook App for authentication.

Creating a ASP.NET MVC4 Application and connecting it with Facebook App Created

1. Create new MVC4 project in Visual Studio and name it as MVC4FacebookAuthentication
2. Add two keys to the section in Web.config. These are appId and appSecret and set the values from the Facebook App Settings Page
3. Then open the AuthConfig.cs file under App_Start folder and uncomment the statement regarding RegisterFacebookClient. Add code to set Facebook app id and secret key from appsettings in Web.Config using the ConfigurationManager. This configuration will help your web application to connect to Facebook App.

   public static class AuthConfig
   {
   public static void RegisterAuth()
   {
     // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
     // you must update this site. For more information visit http://go.microsoft.com/fwlink/?LinkID=252166
     //OAuthWebSecurity.RegisterMicrosoftClient(
     //    clientId: "",
     //    clientSecret: "");
     //OAuthWebSecurity.RegisterTwitterClient(
     //    consumerKey: "",
     //    consumerSecret: "");
     OAuthWebSecurity.RegisterFacebookClient(
      appId: ConfigurationManager.AppSettings["AppId"],
      appSecret: ConfigurationManager.AppSettings["AppSecret"]);
     //OAuthWebSecurity.RegisterGoogleClient();
   }
   }
   

4. Run the ASP.NET web application and copy the home page URL
5. Go back to the Facebook App Settings page and update the “Site URL” with the copied URL of ASP.NET MVC web application. Save the settings
6. Once the Facebook settings are saved wait for few seconds for the settings to propagate to all Facebook servers, then switch back to the ASP.NET web application and click on Login. You will notice a Facebook button in the right pane to login with another service into your ASP.NET MVC application
7. Click on the ‘Facebook’ login button. It will navigate you to the Facebook login page
8. When you login for the first time, Facebook displays a confirmation message that you are using Facebook account with ‘DNCWebTest’ (the Facebook app created). 
   Note that the DNCWebTest app by default has only access to basic info and email address of the user who is logging in. Once the user clicks “Go to App” button, Facebook re-directs back to ASP.NET MVC web application. When the user logging in for the first time, the Membership provider will register the new user information and requests the user to provide a User name. As we can see below, it uses the email ID provided by Facebook by default
9. The user clicks on Register to link their User name with the Facebook Id. This Registration page does not come up again. Once the Registration information has been saved, user will be redirected back to the home page where they are now authenticated using Facebook

Working of SimpleMemberShipProvider

1. The logged in user information is maintained in the UserProfile table as shown below. These tables are created by SimpleMemberShipProvider after the first run.
2. Right click on the UserProfile table and select Show Table Data. As you can see the, UserName registered by the user is stored in the UserProfile table.
3. Next select the webpage_OAuthMembership table, right click on it and select Show Data. This shows the ProviderName and an ID value returned by Facebook that is unique for each user who authenticates. This is tied back to the UserProfile table using the UserId Foreign Key reference.
4. This is the basic amount of data that SimpleMembershipProvider stores when authenticating with one of the external services using OAuth

Benefit of Integrating Facebook Authentication in ASP.NET MVC application