ASP.NET Identity with LinkedIN OAuth Step By Step

Introduction

In this article, we are going to Integrate LinkedIn OAuth with MVC 5 in step by step way.

The process of each OAuth provider is different as we saw on Facebook, the Facebook provide appId and appSecret and in same way Google provide ClientId and ClientSecret, Twitter provide ConsumerKey and ConsumerSecret provide but the way you need to register you application for using this services are totally different from each other, In this fast growing world most of application requires this kind of Authentication technology.

Let's start OAuth Integration with LinkedIn in step by step process.

Configuration Used

  1. Visual studio 2015
  2. SQL Server 2008 R2

Database part

We are going to create Database with Name "MVCDEMODB" in SQL Server 2008 R2

Create New Asp.Net MVC Application

From Visual studio 2015 IDE Start page click on "New Project" link.

After clicking on "New Project" link a new dialog will pop up.

In that we are going to select web templates from left pane after selecting web template, we find only one project template in it "ASP.NET Web Application" just select that.

After selecting this project template next we are going to name the project as "MVC5DEMO10" and clicking on the OK button a new dialog will pop up with Name "New ASP.NET Project" for selecting project Templates.

In this dialog, we are going to choose MVC project template and then we are going to choose Authentication type for doing that just click on Change Authentication button, a new dialog will pop up with name "Change Authentication" here we are going to choose Individual User Accounts .

Note: - Individual User Accounts

If you choose this option for Authentication of application then your application will be configured to use ASP.NET identity [ASP.NET Membership] where User register in the application and then sign in using credentials and also User sign in via social accounts such as Facebook, Twitter, Google, Microsoft and other providers. All user data will be stored in SQL server database.

After selecting Authentication type as Individual User Accounts click on OK Button.

It will show a progress bar while it is creating a project.

After creating a project it will show Readme HTML page with useful links on that page.

And in right part, you will see newly created project structure.

As we have chosen Individual User Accounts Authentication type we got ready made Membership Model added in Models folder as shown below.

Project structure

Complete Project structure after creating new project.

Models Folder View

After creating project successfully now let's add connection string to project.

Adding Connection String in Web.config file

<connectionStrings>
    <add name="DefaultConnection"
       connectionString="Data Source=sai-pc;Database=MVC5DEMODB;UID=sa;Password=Pass$123"
      providerName="System.Data.SqlClient" />
  </connectionStrings>

After adding Connection string next step just save current project and RUN.

Homepage View in browser after running application

After homepage appears just click on Register link, then Register page will appear.

After Register page appear enter details required for registration.

After filling data just click on Register button meanwhile Microsoft.AspNet.Identity will generate tables in the database as shown below.

Database View after registering User

Along with this, it will also save data in these tables.

Just have a look on below snapshot it is data which we have filled while we have registered in the application.

If you look out properly you will as see other tables in the database which stored data related to Role and Role.

Tables and its Details

AspNetRoles : - which stored data related to Role.

AspNetUserRoles: - which stored data related to Role assigns to User.

AspNetUsers: - which stored data related to User.

AspNetUserLogins: - which stored data related to Login Provider [Google, Facebook, Twitter] [ProviderKey, UserId].

After Completing with Database part let's move back to Application part.

Now you are logged into application if you want you can log out and retry to log in.

It is the traditional way to doing it.

Now let move toward Implementing External Authentication provider like LinkedIn.

Implementing External Authentication provider LinkedIn

In this part of implementation, we do not require to do any coding part it's all about configuration.

All configuration starts with Startup.Auth.cs

Startup.Auth file in Asp.Net MVC

This Class (Startup.Auth.cs) file is created by default when we create application and it is located inside App_Start as shown below

Now let's take a view on Startup.Auth.cs file and see what it contains.

The Startup.Auth.cs file contains all OAuth Clients comment by default.

We are going to implement an example of OAuth with LinkedIn but we are not able to see any LinkedIn Login provider by default right.

We need to add this provider from NuGet Package.

Adding Owin.Security.Providers.LinkedIn Package from NuGet Package

For install LinkedIn provider just right click on Project then select Manage NuGet Packages a new dialog will popup as show below.

Now click on Browse tab in search box type: - "Owin.Security.Providers.LinkedIn" then NuGet package will it appear in below search result. Just select that "Owin.Security.Providers.LinkedIn" package in Right it will show Install button.

After clicking on Install button below is snapshot after installing.

Adding Owin.Security.Providers.LinkedIn Package from Package Manager Console

Mean while if you want to install Owin.Security.Providers.LinkedIn Package from Package Manager Console below are step to do.

Just copy command "Install-Package Owin.Security.Providers.LinkedIn" and paste it in Package Manager Console and press enter it will start installing.

After adding LinkedIn Oauth package now next we use LinkedIn provider as shown below.

Register Application with LinkedIn

In this part we are going to register our application with LinkedIn but for doing this process we need to have account on LinkedIn if it is not there then we need to create account for this demo, if you already have LinkedIn than that good you are ready to take ride just login into your LinkedIn account .

Then past given URL in browser: - https://www.linkedin.com/developer/apps , below view, must appear after pasting URL.

After that to create an app we need to just click on Create Application button it will redirect it to create app page.

For Creating new application we need to fill this application form first, the first thing it is going to fill is "Company Name" here we going to enter "SAITECHWORLD" then it is asking Name [Application name] here we are going enter "MVC5DEMO10" after that next we need to enter Description here we are going enter "Demo Application" you can enter your own description here , then we need to upload company logo its mandatory ,after uploading logo the next thing to choose is Application Use here for education I am using that why I choose this option as "Education and Training Certification" you can choose other option which are there as per your requirement, Next website URL here we have entered local host port http://127.0.0.1/ then it asks for Business Email and Phone enter your Email ID and phone in given appropriate textboxes and finally Agree LinkedIn API Terms of Use checkbox and click on Submit button.

After click on Submit button it will create app and then it will redirect to Authentication page as show below.

This page contains your Client ID and Client Secret of LinkedIn.

Along with this we have to give Permission to Application right here if we want basic profile then we can choose r_basicprofile , then further if we want to Email with this then choose r_emailaddress , for basic demo we are going to choose both this options [r_basicprofile , r_emailaddress] .

Next thing we have to provide Authorize Redirect URLs.

To set URL which we are going add just right click on the MVC5DEMO10 project then select properties from the list which is at the bottom.

Just paste URL http://localhost:2436/ in Authorize Redirect URLs Textbox and along with that at end or URL just add [signin-linkedin] and click on add button to add.

After adding Authorize Redirect URLs finally click on Update button to update details.

Just copy and paste Client ID and Client Secret to Startup.Auth.cs class as shown below.

Then Save your application and run.

Below Login screen will appear with LinkedIn button.

After clicking on LinkedIn button it will take you to LinkedIn Login page and ask you to enter credentials for Sign in and allow access.

After entering credentials and clicked on Allow access button.

After Clicking on Allow access button it will authenticate your request after authentication, it will redirect to ExternalLoginCallback view and on that view you will see Email textbox which will be filled with Email ID from LinkedIn (saihacksoft@gmail.com).

After that just click on Register button and you are login into application. Along with that, it shows message.

"You've successfully authenticated with LinkedIn. Please enter a user name for this site below and click the Register button to finish logging in."

After clicking on Register button it will register you and along with that it also login into the application as shown below.

Now let's check out where this data is been added in (MVC5DEMODB) database tables.

First, we will look on AspNetUserLogins table.

AspNetUserLogins table

This table store data related to LoginProvider.

As you can see it is storing data of LinkedIn login.

AspNetUsers table

This table store data related to all Users from Oauth login as well as from Traditional.

If it contains PasswordHash then it is registered by Traditional Login and if it is PasswordHash is empty then it is done by OAuth login.

Finally, we completed understanding what OAuth is and how to use with asp.net MVC 5 applications and also had an example of OAuth integration with LinkedIn.

+91-22-66752917
+91 9967590707
questpond@questpond.com / questpond@yahoo.com