Add Facebook login

Out of the box, the Individual Auth template includes functionality for registering using an email and password. You can extend this by plugging in additional identity providers like Google and Facebook.

For any external provider, you typically need to do two things:

1. Create an app (sometimes called a client) on the external provider that represents your application
2. Copy the ID and secret generated by the provider and put them in your code

Create an app in Facebook

You can create new Facebook apps using the Facebook Developer console at https://developers.facebook.com/apps. Click Add a New App and follow the instructions to create an app ID.

If you don’t have a Facebook account, you can set up Google or Twitter login instead. The steps on the provider’s site will be different, but the code is almost identical.

Next, set up Facebook Login and then click Settings on the left side, under Facebook Login:

Add the following URL to the Valid OAuth redirect URIs box:

http://localhost:5000/signin-facebook

The port that your application runs on may differ. It’s typically port 5000 if you use dotnet start, but if you’re on Windows, it could be a random port like 54574. Either way, you can always see the port your application is running on in the address bar of your web browser.

Click Save Changes and then head over to the Dashboard page. Here you can see the app ID and secret generated by Facebook, which you’ll need in a moment (keep this tab open).

To enable Facebook login in ASP.NET Core Identity, add this code anywhere in the ConfigureServices method in the Startup class:

services
    .AddAuthentication()
    .AddFacebook(options =>
    {
        options.AppId = Configuration["Facebook:AppId"];
        options.AppSecret = Configuration["Facebook:AppSecret"];
    });

Instead of hardcoding the Facebook app ID and secret in your code, the values are pulled from the configuration system. The appsettings.json file is normally the place to store configuration data for your project. However, since it’s checked into source control, it’s not good for sensitive data like an app secret. (If your app secret was pushed to GitHub, for example, anyone could steal it and do bad things on your behalf.)

Store secrets safely with the Secrets Manager

You can use the Secrets Manager tool for sensitive data like an app secret. Run this line in the terminal to make sure it’s installed (make sure you’re currently in the project directory):

dotnet user-secrets --help

Copy the app ID and secret from the Facebook app dashboard and use the set command to save the values in the Secrets Manager:

dotnet user-secrets set Facebook:AppId <paste app id>
dotnet user-secrets set Facebook:AppSecret <paste app secret>

The values from the Secrets Manager are loaded into the Configuration property when your application starts up, so they’re available to the code in ConfigureServices you added before.

Run your application and click the Login link in the navbar. You’ll see a new button for logging in with Facebook:

Try logging in with Facebook. You’ll be redirected and prompted to give your app permission in Facebook, then redirected back and logged in.