Authentication Using LinkedIn In ASP.NET Core 2.0

Introduction

Sometimes, we want the users to log in using their existing credentials of third-party applications, such as Facebook, Twitter, Google, LinkedIn etc. into our application. In this article, we are going to look into the authentication of ASP.NET Core app using a LinkedIn account.

Prerequisites

Install .NET Core 2.0.0 or above SDK from here.
Install the latest version of Visual Studio 2017 Community Edition from here.

Create MVC Web Application

Open Visual Studio and select File >> New >> Project. After selecting the project, a "New Project" dialog will open.

Select .NET Core inside Visual C# menu from the left panel. Then, select “ASP.NET Core Web Application” from available project types.

Put the name of the project as LinkdinAuth and press OK.

After clicking on OK, a new dialog will open asking to select the project template. You can observe two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.0” from these dropdowns.

Then, select “Web application(Model-View-Controller)” template.

Click on Change Authentication button; a "Change Authentication" dialog box will open.

Select “Individual User Account” and click OK. Now click OK again to create our web app.

Before running the application, we need to apply migrations to our app.

Navigate to Tools >> Nuget Package Manager >> Package Manager Console.

It will open the Package Manager Console. Put in Update-Database command and hit enter. This will update the database using Entity Framework Code First Migrations.

Press F5 to run the application. You can see a Home page as shown below.

Note the URL from the browser address bar. In this case, the URL is http://localhost:52676/. We need this URL to configure our LinkedIn app which we will be doing in our next section.

Create LinkedIn app

Navigate to https://www.linkedin.com/developer/apps and sign in using your LinkedIn account. If you do not have a LinkedIn account, you need to create one. You cannot proceed without a LinkedIn account. Once you have logged in, you will be redirected to My Applications page similar to the one shown below.

Click on Create Application button to navigate to Create a New Application page. Here you need to fill in the details to create a new LinkedIn application.

Company Name: - Give an appropriate name. Here we are using the name DemoCompany.
Application Name: - This is the name of your LinkedIn application. Give a proper name of your choice.

Important Note

Do not use the word " LinkedIn " in your product name. You will be prompted with an error "The application name cannot contain LinkedIn" and you won't be allowed to create the app. This means "LinkedinAuthDemo" is an invalid name. Refer to the below image.

Application Description: - Give a proper description of your application.
Application Logo: - you need to upload a logo for your application. If you do not have a logo just upload any image. Please provide your application's logo image, in PNG or JPEG format. The image must be square and at least 80 x 80 pixels, and no larger than 5 MB in size.
Application Use: - Select an appropriate value from the drop-down.
Website URL: - Provide the URL for your public website. For this tutorial, we will use a dummy URL http://demopage.com.

Important Note
If you use the URL format as www.demopage.com, you will get an error “Please enter a valid URL.” Always use URL format as http://demopage.com. Refer to the image below.

Business Email: - Give your email id. If you do not want to provide your personal email id then you can also use any dummy email id such as [email protected]
Business Phone: - Provide your contact number. For this tutorial, I am using a dummy phone number 123456789.

Do keep in mind that all the fields of this form are required so you need to provide appropriate value to all of them. Once you have furnished all the details click on Submit button. If there is no error in the form, your LinkedIn app will be created successfully and you will be redirected to the application homepage.

Here you see the Client ID and Client Secret fields in Authentication Keys section. Take a note of these values as we will need them to configure LinkedIn authentication in our web app. In the Authorized Redirect URLs fields provide the base URL of your application with /signin-linkedin appended to it. For this tutorial, the URL will be http://localhost:52676/signin-linkedin. After entering the URL Press on Add button adjacent to it to add the value. Refer to the image below

Configure Web App to use LinkedIn authentication

We will be using a third party Nuget package AspNet.Security.OAuth.LinkedIn to implement LinkedIn authentication in our Web app. Open NuGet package manager (Tools >> NuGet Package Manager >> Package Manager Console) and put in the following command. Hit enter to install it.

Install-Package AspNet.Security.OAuth.LinkedIn -Version 2.0.0-rc2-final

This NuGet package is maintained by aspnet-contrib. You can read more about this package here.

We need to store Client ID and Client Secret field values in our application. We will use Secret Manager tool for this purpose. The Secret Manager tool is a project tool that can be used to store secrets such as password, API Key etc. for a .NET Core project during the development process. With the Secret Manager tool, we can associate app secrets with a specific project and can share them across multiple projects.

Open our web application once again and Right-click the project in Solution Explorer and select "Manage User Secrets" from the context menu.

A secrets.json file will open. Put the following code in it.

{
"Authentication:LinkedIn:ClientId": "Your ClientId here",
"Authentication:LinkedIn:ClientSecret": "Your ClientSecret here"
}

Now, open Startup.cs file and put the following code into ConfigureServices method.

services.AddAuthentication().AddLinkedIn(options =>
{
options.ClientId = Configuration["Authentication:LinkedIn:ClientId"];
options.ClientSecret = Configuration["Authentication:LinkedIn:ClientSecret"];
});

In this code section, we are reading Client ID and Client Secret values from secrets.json file for the authentication purpose.

So finally, Startup.cs will look like this.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using LinkdinAuth.Data;
using LinkdinAuth.Models;
using LinkdinAuth.Services;
namespace LinkdinAuth
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
services.AddIdentity<ApplicationUser, IdentityRole>()
.AddEntityFrameworkStores<ApplicationDbContext>()
.AddDefaultTokenProviders();
services.AddAuthentication().AddLinkedIn(options =>
{
options.ClientId = Configuration["Authentication:LinkedIn:ClientId"];
options.ClientSecret = Configuration["Authentication:LinkedIn:ClientSecret"];
});
// Add application services.
services.AddTransient<IEmailSender, EmailSender>();
services.AddMvc();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseBrowserLink();
app.UseDeveloperExceptionPage();
app.UseDatabaseErrorPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseAuthentication();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}
}
}

And with this, our application is ready.

Launch the application and click Login in the top right corner of the homepage.

You will be redirected to http://localhost:52676/Account/Login page, where you can see the option to login using LinkedIn on the right side of page.

Clicking on LinkedIn button will take you to LinkedIn authorization page where you will be asked to fill in your LinkedIn credentials and authorize the LinkedIn app to use your LinkedIn account

Put in your LinkedIn credentials and click on Allow access button. The application will take few moments to authenticate your LinkedIn account and upon successful authentication with LinkedIn, you will be redirected to a registration page inside our application where you need to fill in an email id to tag with your account.

Give an email id and click register, you will be redirected to the homepage again but this time you can also see your registered email id at the top right corner. Hence, we have successfully logged in to our ASP .NET Core application using LinkedIn.

See Also

Conclusion

We have successfully created a LinkedIn app and used it to authenticate our ASP.NET Core application. I have attached the source code for your reference. Please note that secrets.json file contains dummy values. Hence replace the values with the keys of your LinkedIn app before executing it.

Please let me know of your valuable feedback in the comment section below.

13 Comments

Join the conversation! Your thoughts help the community grow.

Supreeth J4y ago
In Permission its says , name, photo & email is used, am able to get name and email, how to get profile photo?
neeraj sharma6y ago
Got error - Exception: invalid_3request;Description=You need to pass the "scope" parameter
- Raheel Ahmad6y ago
  Are you able to resolve the above issue?? I am also stuck here.
Uttam Chaturvedi8y ago
Nice Artice.. Thanks for sharing
John Arundell8y ago
Brilliant - simple - thank you. Is there a method to associate a user who logs in from an external source with an existing account created via the local register function?
Rafael Sánchez8y ago
Hi, Ankit, i have another question. How can I keep the session in LinkedIn? I would like the user must not to log in again during 60 minutes. Thank you in advance.
- Ankit Sharma8y ago
  You need to use session management techniques to maintain session after login. Its same with any kind of login.
Rafael Sánchez8y ago
Thank you Sir, the article is very interesting. But i have found an issue. What happened if the user deny the access? I see the next error:An unhandled exception occurred while processing the request.Exception: access_denied;Description=the user denied your request Microsoft.AspNetCore.Authentication.RemoteAuthenticationHandler+<HandleRequestAsync>d__12.MoveNext() and the url is http://localhost:59201/signin-linkedin?error=access_denied&error_description=the+user+denied+your+request&state=CfDJ8BATC6yBnDRJmHt2Tbt73yipegUIr1B_G7ZEyHg4o6L4Hw_wxFqPLt5CCSGspS8BjfxpC8eJLSHyJoywFCtYBnmcBE8tEzVdn1B1CVMZngdD1YRkCN4okwKKxibhxKzza2THqN-sSptemdr533nDvq3jAUaIkKiHUGkP12Ubh5ifuTjFre3Uj6q2F5UiJ7QTIhFpgK-yciZN7mqQVInExwVEXoPXrn0ZktmKKQDR29MgPLhesbKHO4aHPzDLo2Cthu8nRmkNDjQxI1PjD6vdpII#!
- Ankit Sharma8y ago
  Thanks for reading my article. This is a great question that you ask.Please update your code as below services.AddAuthentication().AddLinkedIn(options => { options.ClientId = Configuration["Authentication:LinkedIn:ClientId"]; options.ClientSecret = Configuration["Authentication:LinkedIn:ClientSecret"]; options.Events= new OAuthEvents() { OnRemoteFailure = loginFailureHandler => { var authProperties = options.StateDataFormat.Unprotect(loginFailureHandler.Request.Query["state"]); loginFailureHandler.Response.Redirect("/Account/login"); loginFailureHandler.HandleResponse(); return Task.FromResult(0); } }; });
- Ankit Sharma8y ago
  We are handling this event of "OnRemoteFailure" ourselves in this code section. Please refer to (https://github.com/IdentityServer/IdentityServer4/issues/1087) for more details. Hope this clears your doubt
Md Nawaz8y ago
Nice article sir. thank you.
Sagar Pandurang Kap8y ago
Very nice.thanks for sharing...
Manav Pandya8y ago
Nice share sir .........