Facebook Login setup in .Net Core(2.0) : Step by step guide

Note – You can find the source code of my sample application here.

In my previous post of Authentication, I explained how to add Login functionality to your .Net Core 2.0 application using .Net Core Identity which you can find here. If you want to look at all .Net Core posts then you can find it here.

In this post, we will see how to add Facebook Login in your .Net Core project.

Let us start.

Facebook Developer Application Registration

If you are going to use Facebook for Developers portal for the first time, you need to register first.

Go to https://developers.facebook.com/apps/

Click on Register Now(make sure you are logged in on Facebook):

Provide the details as requested to create your App:

After setting up, below landing page will appear:

Click on Facebook Login -> Set up

Once the Set Up is completed, click on Dashboard and take a note of App Id and App Secret(click on Show):

 

Changes in Core application

For this, we will use the same project which we have used in this blog post.

Let us first add Facebook App Id and App Secret into the application using Secret Manager.

What is Secret Manager?

The Secret Manager tool stores sensitive data for development work outside of your project tree. The Secret Manager tool is a project tool that can be used to store secrets for a .NET Core project during development. With the Secret Manager tool, you can associate app secrets with a specific project and share them across multiple projects.

To add the user secrets, right click on the application and click on Manage User Secrets:

In the json file, add Authentication:Facebook:AppId (App Id which you have noted above) and Authentication:Facebook:AppSecret (App Secret which you have noted above) as shown below(masked the keys due to security purpose):

Once the keys are added, open Startup.cs class and add below lines:

services.AddIdentity<ApplicationUser, IdentityRole>()
.AddEntityFrameworkStores<ApplicationDbContext>()
.AddDefaultTokenProviders();

services.AddAuthentication().AddFacebook(facebookOptions =>
{
facebookOptions.AppId = Configuration["Authentication:Facebook:AppId"];
facebookOptions.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
});

Once this is done, go back to Facebook Developer portal and open settings as shown below:

It will open Client OAuth Settings, here you can set the stuff as per your need.

Let us add our development URL into the Valid OAuth redirect URIs as below(as the URL of our application would be https://localhost:44316) :

https://localhost:44316/signin-facebook

That is it.

Run the application

Now run the application and click on Login, it will show Login with the Facebook option:

Click on Facebook and provide your Facebook credentials:

Once you Login, the user will be authenticated using Facebook as shown below:

Once you click on Register, the user will be registered and would be added to the AspNetUsers table of your Identity database and the user would be Logged In:

Note – You can find the source code of my sample application here.

Hope it helps.