Facebook Account External Login Setup

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 refers to a feature allowing users to sign into other websites, mobile apps, and services using their account credentials. This feature is also known as “Facebook Login” or “Log in with Facebook”.

What It Is:
  • Facebook Account External Login is a system that allows users to log into third-party websites, apps, and services using their Facebook account credentials. This is part of a broader category of systems known as “social logins,” where logins are facilitated through social media accounts.
  • It’s a part of OAuth 2.0 authentication, a standard protocol for authorization.
How It Works:
  • User Experience: When users choose to log in with Facebook, they are redirected to a Facebook login page (if not already logged in).
  • Authentication: After logging in, Facebook asks the user to grant permission to access certain profile information to the third-party app.
  • Token Exchange: Upon permission granted, Facebook sends an authentication token to the third-party service, confirming the user’s identity.
Benefits
  • Convenience: Users don’t need to create new accounts for every website or app, making the login process quicker and more convenient.
  • Reduced Friction in Sign-Ups: It can lead to higher user acquisition for websites and apps as the barrier to sign-up is lowered.
  • Enhanced Security: Leveraging Facebook’s security protocols can be safer than creating multiple, potentially less secure, accounts.
Implementation
  • For Developers: Integration requires adding Facebook’s API to the website or app. Developers need to register their app with Facebook to obtain credentials for the integration.
  • Customization: Developers can choose what information to request from Facebook profiles within the boundaries of Facebook’s policies and user permissions.
Use Cases
  • E-Commerce: For faster checkouts and personalized recommendations.
  • Content Platforms: For personalized content delivery and social sharing options.
  • Online Forums and Communities: To simplify registration and encourage engagement.
Privacy and Compliance
  • User Consent: Users must consent to share their information with third-party services.
  • Data Usage: It’s crucial for third-party services to be transparent about how they use the data obtained from Facebook.
  • Compliance with Regulations: Services must comply with privacy laws like GDPR or CCPA, ensuring users’ data is handled responsibly.
  • Revoking Access: Users can manage or revoke permissions given to third-party apps through their Facebook settings.

Facebook Account External Login Setup

Setting up a Facebook external login for your website or application involves a few steps. Here’s a general guide on how to do it:

Create a Facebook Developer Account:

Before creating an app, you need to have a Facebook Developer account. 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 must 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 the login button, as shown in the image below.

Create a Facebook Developer Account

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

Facebook Account External Login Setup

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

Create a Facebook Developer Account

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

Create a Facebook Developer Account

Create a New App:

You can create a new app once logged into the Facebook Developer console. This involves choosing a name for your app and specifying its purpose (e.g., gaming, business integration). To create a New App, click the My Apps button, as shown in the image below.

Create a New App

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

Create a New App

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

Facebook Account External Login Setup

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

Facebook Account External Login Setup

From the next screen, provide the app name (I am giving the name 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 image below.

Facebook Account External Login Setup

Once you click on the Create app button, it will ask you to re-enter your password. Just enter the password and click the Submit button, as shown in the image below.

Facebook Account External Login Setup

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

Facebook Account External Login Setup

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.

Facebook Login Setup

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

Facebook Login Setup

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 here, you will find the App URL. You will get https (https://localhost:7056) and http (http://localhost:5217) URLs.

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

Facebook Login Setup

Once you click on the Settings button, it will open the following page. 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 /signin-facebook. Once you provide the Valid OAuth Redirect URIs, click the Save Changes button, as shown in the image below.

Get the Facebook App ID and App Secret

Get App ID and App Secret:

Your application will be assigned an App ID and App Secret. You’ll use these important credentials in your app’s code to interact with Facebook APIs. To get the App ID and Secret, click on the main settings link in the top-left position, as shown in the image below.

Get the Facebook App ID and App Secret

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

How does Facebook Account External Login Work?

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.

Leave a Reply

Your email address will not be published. Required fields are marked *