Configure Facebook As Login Provider In ASP.NET Core

Today, we will be building an ASP.NET Core Application that enables users to log in from different external authentication providers, like Google, Facebook, Twitter, Github and many others.

It's better to allow users to login and signup using their existing credentials than forcing them to sign up and create new login credentials for them in our application.

Enabling users to Sign-In with their existing credentials (Facebook, Google, Microsoft , GitHub, Twitter and many others) is easy and convenient for users. This also allows us  to shift many of the complexities of managing the sign-in process onto a third party Login Providers like Facebook, Google and Microsoft.

We have been noticing we see options to login with Facebook, Twitter Google and Microsoft in many of the sites today. This is an additional feature for the users so that they don’t need to waste their time signing up and confirming login details and remembering login credentials on each site. Just remember login details of one site like Facebook.

In this article we will learn how to enable login with Facebook. If you need to set up other Login Providers like Microsoft, Google, Twitter, you can do this too. For now we will be using Facebook as a Login Provider for our ASP.NET Web Application.

A few things to know before setting up.

• Enable SSL on Application.
• Get Call Back URL of Application.
• Create App in Developer Portal of Login Provider.
• Get Client ID and Client Secret ID of the app.
• Configure Service to enable Login with Login Provider.

Create ASP.NET Application

I assume you know how to create a simple ASP.NET Core Web Application. If you still need help for creating ASP.NET Core App, please refer to my old blogs and articles.

Enable SSL

• In Solution Explorer, right-click the project and select Properties.
• On the left pane, tap Debug.
• Check Enable SSL.
• Copy the SSL URL and paste it into the App URL:

Create App on Facebook

Step1

Navigate to the Facebook for Developers page. You need to sign in to Facebook to get access to this page.

Step 2

Tap the + Add a New App button in the upper right corner to create a new App ID.

Step 3

Provide Display Name and Contact Email as shown in picture. Click Create App ID

The Product Setup page is displayed, letting you select the features for your new app.

Step 4

Click "Get Started" on Facebook Login.

Step5

Now, you need to choose platform. For now, please select Web.

Now, Facebook App will ask to enter URL of Website. In this case, please paste the URL of Web App(copy URL of App when launched in Browser.)

Now, get App ID and AppSecret Id from App Dashboard.

Now, we are done with Facebook App.

Configuring Facebook as Login Provider in ASP.NET Core.

Install Microsoft.AspNetCore.Authentication.Facebook

Step 1

Right click on Project and select "Manage Nuget Packages".

Step 2

Browse Microsoft.AspNetCore.Authentication.Facebook and Install. After Installation, you will be able to see Microsoft.AspNetCore.Authentication.Facebook as in figure.

Configure required services in startup.cs file under ConfigureServices

Replace services.AddMvc() with following

services.AddMvc(options => {
    options.SslPort = 44300;
    options.Filters.Add(new RequireHttpsAttribute());
});

This is required to reject all requests that are not coming over https.

Now, add the following lines of codes at Configure method.

app.UseFacebookAuthentication(new FacebookOptions() {
    AppId = "198XX312013XXXXX",
        AppSecret = "0XXXXXX52081a3c2f8b6eb986cXXXX74",
});

Now, we are done. Just rebuild your app and run on Browser.

You will notice that your app will prompt a Security message "Your Connection is not Private" the first time.

Once you proceed, you will be able to see the app running with https:// at URL.

Now, navigate to Login page and you will notice Facebook button added, as in figure.

Now, let's login with Facebook.

Once we click Facebook button, we will be redirected to the Facebook Login page.

Provide login credentials to login and now Facebook will prompt.

As we continue, we will be successfully redirected to our application like below.

After clicking "Register", we are successfully registered to our ASP .NET Core application using Facebook.

Summary

So far, we learned how to

1. Create new App on Facebook.
2. How to Enable SSL in ASP.NET Core Application.
3. How to configure Facebook as Login Provider in ASP.NET Core.