Implement Facebook oauth2 in ASP.NET Core

How to Implement Facebook oauth2 in ASP.NET Core

Jul 20, 2020
Web Development

In these days, User prefer to login through their existing credential to avoid remembering multiple username and password. Solution to this is user can log in with their Social media accounts like Facebook, Google, LinkedIn, Twitter etc.

Here is explanation on how to integrate the Facebook oauth2 in asp.net core.

Step 1: Create New Asp.net Core Project

Open a visual studio and create new project ”Asp.Net core web application” name it whatever you like example “OauthFacebook”

Step 2: Create database with code-first approach

Before running the application, we need to apply migrations to our app

Go to Tools >> NuGet Package Manager >> Package Manager Console.

Enter ”Update-Database” and hit enter key . This will create identity tables.

Step 3: Get the application URL to use at Facebook App

Now run your application will open the below screen.

Note the URL from the browser address bar. In this case, the URL is https://localhost:44313/. We need this URL to configure our Facebook app which we will be doing in our next step

Step 4: Create a Facebook App

Go to https://developers.facebook.com/apps and login in using your Facebook account.

After logged in you can see below screen click on “Add New app” button to create new facebook App.

After clicking on Add n New App button popup window for Create App ID. Enter the App display name “OauthFacebook” with contact email and click on Create App Id.

Step 5: Add Product to app

After clicking on Create App Id show the below screen and select the facebook login application.

Step 6: Setup the OAuth redirect url

After that go to setting and change valid Oauth Redirect URIs

After that go to setting and change valid Oauth Redirect URIs “https://localhost:44313/signinfacebook” and click on the “Save Changes”.

Step 7: Getting App Id and App Secret

After that go to setting at the top and click on the basic and see “App Id and App Secret” and copy those two value

Step 8: Setup Facebook AppId and App Secret to asp.net core

Now we require to configure Web App to use Facebook authentication. Now right click on our project and again click on the highlight “Manage User Secret”.

Step 9: Update Secrets.json file with the value of the Facebook data


    {
    "Authentication:Facebook:AppId": "xxxxxxxxxxxxxxxxx",
    "Authentication:Facebook:AppSecret": "xxxxxxxxxxxxxxxxxxxx"
    }

Now open Startup.cs file and put the following code into ConfigureServices method.


    {
    services.AddAuthentication().AddFacebook(facebookOptions =>
    {
    facebookOptions.AppId = Configuration["Authentication:Facebook:AppId"];
    facebookOptions.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
    facebookOptions.AccessDeniedPath = "/AccessDeniedPathInfo";
    });
    }

Now the setup is done and ready to run the application.