Facebook Login Setup In .Net Core(2.0) - Step By Step Guide

Neel Bhatt
7y
41.7k
0
11

Article

.Net Core

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 yours .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),

.Net Core

Provide the details as requested to create your App,

.Net Core

After setting up, the below landing page will appear,

.Net Core

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),

.Net Core

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,

.Net Core

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),

.Net Core

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,

.Net Core

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
.Net Core

That is it.

Run the application

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

.Net Core

Click on Facebook and provide your Facebook credentials,

.Net Core

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

.Net Core

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 will be Logged In,

.Net Core