Asp.net Core 3.0 External Social Login Icon Updated FREE

Facebook, Google, and external provider authentication in ASP.Cyberspace Core

Article
03/26/2022
4 minutes to read

By Valeriy Novytskyy and Rick Anderson

This tutorial demonstrates how to build an ASP.Internet Core app that enables users to sign in using OAuth 2.0 with credentials from external authentication providers.

Facebook, Twitter, Google, and Microsoft providers are covered in the post-obit sections and use the starter project created in this article. Other providers are available in third-party packages such equally AspNet.Security.OAuth.Providers and AspNet.Security.OpenId.Providers.

Enabling users to sign in with their existing credentials:

Is convenient for the users.
Shifts many of the complexities of managing the sign-in process onto a third political party.

Create a New ASP.Cyberspace Core Project

Visual Studio
Visual Studio Code / Visual Studio for Mac

Select the ASP.Cyberspace Core Web App template. Select OK.
In the Authentication type input, select Individual User Accounts.

Open the terminal. For Visual Studio Code you tin open the integrated terminal.
Change directories (cd) to a folder which will contain the project.
For Windows, run the following control:
```
                      dotnet new webapp -o WebApp1 -au Individual -uld                                          
```
For macOS and Linux, run the following command:
```
                      dotnet new webapp -o WebApp1 -au Private                                          
```
- The dotnet new command creates a new Razor Pages project in the WebApp1 folder.
- -au Individual creates the code for Individual hallmark.
- -uld uses LocalDB, a lightweight version of SQL Server Express for Windows. Omit -uld to utilise SQLite.
- The code command opens the WebApp1 folder in a new instance of Visual Studio Code.

Use migrations

Run the app and select the Register link.
Enter the e-mail and password for the new business relationship, and so select Register.
Follow the instructions to apply migrations.

Frontwards request information with a proxy or load balancer

If the app is deployed behind a proxy server or load balancer, some of the original request information might be forwarded to the app in asking headers. This information usually includes the secure request scheme (https), host, and client IP address. Apps don't automatically read these request headers to observe and use the original request information.

The scheme is used in link generation that affects the authentication menstruation with external providers. Losing the secure scheme (https) results in the app generating incorrect insecure redirect URLs.

Use Forwarded Headers Middleware to make the original asking information available to the app for request processing.

For more information, see Configure ASP.Cyberspace Core to work with proxy servers and load balancers.

Social login providers assign Awarding Id and Awarding Secret tokens during the registration procedure. The verbal token names vary by provider. These tokens correspond the credentials your app uses to access their API. The tokens establish the "user secrets" that can be linked to your app configuration with the help of Hugger-mugger Director. User secrets are a more secure culling to storing the tokens in a configuration file, such as appsettings.json.

Follow the steps in Safety storage of app secrets in development in ASP.Cyberspace Core topic to store tokens assigned by each login provider below.

Apply the post-obit topics to configure your application to use the respective providers:

Facebook instructions
Twitter instructions
Google instructions
Microsoft instructions
Other provider instructions

Multiple authentication providers

When the app requires multiple providers, chain the provider extension methods from AddAuthentication:

              using Microsoft.AspNetCore.Identity; using Microsoft.EntityFrameworkCore; using WebApplication16.Data;  var builder = WebApplication.CreateBuilder(args); var config = builder.Configuration;  var connectionString = config.GetConnectionString("DefaultConnection"); builder.Services.AddDbContext<ApplicationDbContext>(options =>     options.UseSqlServer(connectionString)); builder.Services.AddDatabaseDeveloperPageExceptionFilter();  builder.Services.AddDefaultIdentity<IdentityUser>(options =>                                  options.SignIn.RequireConfirmedAccount = truthful)     .AddEntityFrameworkStores<ApplicationDbContext>(); builder.Services.AddRazorPages(); builder.Services.AddControllersWithViews();  builder.Services.AddAuthentication()    .AddGoogle(options =>    {        IConfigurationSection googleAuthNSection =        config.GetSection("Authentication:Google");        options.ClientId = googleAuthNSection["ClientId"];        options.ClientSecret = googleAuthNSection["ClientSecret"];    })    .AddFacebook(options =>    {        IConfigurationSection FBAuthNSection =        config.GetSection("Authentication:FB");        options.ClientId = FBAuthNSection["ClientId"];        options.ClientSecret = FBAuthNSection["ClientSecret"];    })    .AddMicrosoftAccount(microsoftOptions =>    {        microsoftOptions.ClientId = config["Authentication:Microsoft:ClientId"];        microsoftOptions.ClientSecret = config["Authentication:Microsoft:ClientSecret"];    })    .AddTwitter(twitterOptions =>    {        twitterOptions.ConsumerKey = config["Hallmark:Twitter:ConsumerAPIKey"];        twitterOptions.ConsumerSecret = config["Authentication:Twitter:ConsumerSecret"];        twitterOptions.RetrieveUserDetails = true;    });  var app = builder.Build();  if (app.Environment.IsDevelopment()) {     app.UseMigrationsEndPoint(); } else {     app.UseExceptionHandler("/Error");     app.UseHsts(); }  app.UseHttpsRedirection(); app.UseStaticFiles();  app.UseRouting();  app.UseAuthentication(); app.UseAuthorization();  app.MapRazorPages(); app.MapDefaultControllerRoute();  app.Run();

Optionally set password

When y'all register with an external login provider, you don't have a password registered with the app. This alleviates you from creating and remembering a password for the site, merely it also makes yous dependent on the external login provider. If the external login provider is unavailable, you won't be able to sign in to the web site.

To create a password and sign in using your e-mail that you gear up during the sign in process with external providers:

Select the Hello <electronic mail allonym> link at the superlative-right corner to navigate to the Manage view.

Select Create

Prepare a valid password and you can use this to sign in with your email.

Next steps

Run across this GitHub issue for information on how to customize the login buttons.
This commodity introduced external hallmark and explained the prerequisites required to add external logins to your ASP.Cyberspace Core app.
Reference provider-specific pages to configure logins for the providers required by your app.
You lot may want to persist additional data about the user and their access and refresh tokens. For more than information, see Persist boosted claims and tokens from external providers in ASP.NET Cadre.