ASP.NET Core 3.1 with React: Facebook external login

In this article I will teach you how to add Facebook external login in your ASP.NET Core 3.1 application with react. This is a continuation of my previous article ASP.NET Core 3.1 with React: User Authentication and Registration you might want to have a look on it before continuing.

Advertisements

Go to https://developers.facebook.com/apps/ and sign in. Then click Add a New App.

Fill up the form then click Create App ID.

Advertisements

Click Set up in Facebook Login.

Click Settings in left side navigation under Facebook Login.

Enter your ASP.NET Core 3.1 Web application URL /signin-facebook then click Save Changes.

Advertisements

In the left side navigation, click Settings then select Basic.

In this page you can see your App ID and App Secret. You will need this values to integrate your ASP.NET Core application to Facebook.

Advertisements

In you ASP.NET Core 3.1 Web Application install the nuget package Microsoft.AspNetCore.Authentication.Facebook

Add this configuration in your project appsettings.json

"Authentication": {
    "Facebook": {
      "AppId": "PUT YOUR FACEBOOK APP ID HERE",
      "AppSecret": "PUT YOUR FACEBOOK APP SECRET HERE"
    }
  }

Your appsettings.json now should look like this.

Now open the Startup.cs file. In the method ConfigureServices change find the line for AddAuthentication. It should look something like this.

services.AddAuthentication()
                .AddIdentityServerJwt();

Then change it to this

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

Run your ASP.NET Core Web Application and navigate to login or register page. You should now have an option to use Facebook to login or register to your application.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s