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.
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.
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.
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.
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();
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.
