How to add Facebook login to Asp.Net Core 3.0 app using VS2019

In this tutorial, we are going to cover how to add Facebook login to Asp.Net Core 3.0 app using Visual Studio 2019. So, it will enable users to login with their Facebook account in Asp.Net Core 3.0 application. So, first-of-all, we will create an app in Facebook developer account and then we will create a new Asp.Net Core 3.0 application using Visual Studio 2019 and then we will configure the Facebook app with Asp.Net Core 3.0 app and then finally we will see how it works.

Previous Tutorials on Authentication

• Asp.Net Core 3.0 web api token based authentication example using JWT in Visual Studio 2019.
• How to add authentication to Angular 7 app using Asp.Net Core 3.0 in Visual Studio 2019
• how to add authentication and authorization to Angular 6 application using Asp.Net Core and Auth0.

How to add Facebook login to Asp.Net Core 3.0 app using visual studio 2019

Let’s start to learn how to add Facebook login to Asp.Net Core 3.0 app using Visual Studio 2019.

Step # 1: How to Create a Facebook developer App?

So, in this step, we will create a new app in Facebook developer Account in step by step. So, first-of-all, go to this  URL: https://developers.facebook.com/apps/

Note: – If you don’t already have a Facebook account, then click on the Sign up for Facebook link on the login page to create a new account.

Now, login with your Facebook credentials and then login to your Facebook account. Then you will see a new page with the name of facebook for developers. Now, click on “Add a New App” link. If you don’t find Add a new App link, then hover on the logo from upper right corner and then select Add a New App link.

Now, you will see a new popup window with the name of Create a New App ID. So, fill this form and then click on the Create App ID button.

Now, click on the PRODUCTS link from the right sidebar and then go to Facebook Login card and then click on the “Set Up” button.

Now, go to sidebar and then click on the Settings => Basic and then take a note of App ID and App Secret. We will use it later in Asp.Net Core 3.0 application.

Step # 2: How to create Asp.Net Core 3.0 application?

In this step, we will create a new Asp.Net Core 3.0 app with Microsoft Identity. So, open Visual Studio 2019, then click on the Create a new Project and then select Asp.Net Core Web Application and then click on the Next button. Then enter the project name (E.g. FBLoginwithAspNetCore3) in the project name field and then click on the Create button. Then select Asp.Net Core 3.0 framework from the upper dropdown and then select Web Application (Model-View-Controller) template from the template’s list.

Now, click on the Change link under the Authentication label from the right sidebar (as you see in the above screenshot) and then you will see a new popup with the name Change Authentication. Now, check the Individual User Accounts radio button and then click OK button.

After clicking on the OK button, now you will see again previous screen. Now, just click on the Create button. So, now it will create a new Asp.Net Core 3.0 application with Identity.

Step # 3: How to configure Facebook app with Asp.Net Core 3.0 Application?

Now, in this step, we will see how to configure Facebook app with Asp.Net Core 3.0 application in step by step.

1: Add Facebook App ID and App Secret

First-of-all, we will add Facebook App ID and App Secret (which we have noted above) into the application using the Secret Manager ( this tool is used to store secret data for application ). So, go to project folder structure and then right click on the Project Name and then select Manage User Secrets.

Now, it will open a new file with the name of secrets.json. Now, write the code as you see in the below file.

Now, go to project folder structure and then open Startup.cs file and then write the code in the ConfigureServices method as you see in the below file.

Now, you will get an error as you see in the below screenshot.

So, to overcome this error, you need to add a new package as you see in the below screenshot.

Now, we will run our project by pressing f5 and then copy the URL of our application. Now, go back to Facebook Developer Portal, and then go to Facebook Login => Settings from the sidebar and then paste the URL into the Valid OAuth Redirect URls field and append the URL with signin-facebook (E.g. https://localhost:44322/signin-facebook )and then click on the Save Changes button.

Note: – you can change different options according to your needs.

Now, go to your application output page and then click on login and then you will a login page with the Facebook button.

Now, click on the Facebook button, and then it will open Facebook login page. So, enter your facebook credentials and then click on the Log In button.

Now, it will open a new popup for confirmation. So, just click on the “Continue as ….” button.

Once you have done it, now you are redirected to your site where you can enter your email. And then finally, you are logged in using facebook credentials.

Thank you for reading. Please keep reading and visiting and sharing!