Facebook Account External Login Setup

Back to: ASP.NET Core Identity Tutorials

Facebook Account External Login Setup

In this article, I will discuss the Facebook Account External Login Setup. Please read our previous article discussing Integrating Microsoft External Authentication in ASP.NET Core MVC Application.

What is Facebook Account External Login?

Facebook Account External Login allows users to sign into other websites, mobile apps, and services using their account credentials. When users choose to log in with Facebook, they are redirected to a Facebook login page (if not already logged in). After logging in, Facebook asks the user to grant permission to access certain profile information to the third-party app. Upon permission granted, Facebook sends an authentication token to the third-party service, confirming the user’s identity.

Facebook Account External Login Setup

Let us proceed and understand the step-by-step process to integrate Facebook External Authentication into our application. First, you need to have a Facebook Developer account. You need to register as a developer to access Facebook’s developer tools. You can convert your existing Facebook account into a Developer Account by visiting the Facebook Developers Website.

If you don’t already have one, you need to sign up for a Facebook Developer account. This is different from your regular Facebook account. So, visit the URL https://developers.facebook.com/, which will open the following page, and click on the login button as shown in the image below.

Once you click on the Login button, the following page will open. Here, you need to select the Login with the Facebook option, as shown in the image below.

Once you click the Login with Facebook button, it will open the following login page, where you must enter your email address, phone number, and password. Then, you need to click the Login button, as shown in the image below.

Once you enter the credentials and click on the Log in, if credentials are valid, then it will create your Facebook Developers account and will display the following dashboard.

Create a New App:

Once logged into the Facebook Developer account, then you need to create a new app. This involves choosing a name for your app and specifying its purpose (e.g., gaming, business integration). To create a New App, click on the My Apps button as shown in the below image.

Once you click on the My Apps button, the following page will open. From this page, you need to click the Create App button to create a new app, as shown in the image below.

Once you click on the Create App, it will open the below screen where you need to provide the name of the application (I am giving Dot Net Tutorials; you can give any name) and the App contact email and click on the Next button as shown in the below image:

From the next screen, please select the Other Radio Button and then click on the Next button, as shown in the image below.

From the next screen, please select the Consumer Radio Button and click on the Next button, as shown in the image below.

From the next screen, provide the app name (I am giving the name as Dot Net Tutorials) and the app contact email; by default, it will be your login email ID, and then click on the Create app button as shown in the below image.

Once you click on the Create app button, the following Add products will open on your app screen. From here, please click on the Facebook Login Setup button, as shown in the below image.

Once you click on the Facebook Login Setup button, it will open the following window, asking you to select the platform where you want the Facebook Login Functionality. Please click on the Web option as shown in the below image.

Once you click on the Web, it will ask you to enter the base URL of your website. As my application is running on the https://localhost:7080 URL, so I am giving this URL and clicking on the Save button as shown in the image below.

Note: To get this URL on your localhost, right-click on the project name in Solution Explorer in Visual Studio and select Properties. On the Debug tab, click on the open debug launch profiles UI, and you will find the app URL. You will get both HTTP (https://localhost:7056) and HTTPS (http://localhost:5217) URLs, and you can give any URL here using which you access your application.

Then, from this screen, you can ignore the rest of the steps as we do not require the JavaScript SDK. Next, click on Settings under the Facebook Login section, as shown in the image below.

Once you click on the Settings button, the following page will open. Here, you need to provide the OAuth redirect URIs. These are the URLs to which Facebook will redirect users after being authenticated. This is the URI at which your application is hosted. To this URI, append that path segment to https://localhost:7080/signin-facebook. Once you provide the Valid OAuth Redirect URIs, click the Save Changes button, as shown in the image below.

Get App ID and App Secret:

Your application will be assigned an App ID and App Secret. These are important credentials you will use in your app’s code to interact with Facebook APIs. To get the App ID and App Secret, click on the App Settings => Basic link in the top-left position, as shown in the image below.

This will open the following screen. Just copy the App ID and Secret, which we will use when integrating Facebook Authentication in our ASP.NET Core MVC Application.

In the next article, I will discuss Integrating Facebook External Authentication in ASP.NET Core MVC Application. In this article, I explain the Facebook Account External Login Setup. I hope you enjoy this article, Facebook Account External Login Setup.