Asp.Net Core External Login Providers Google Complete Guide

Step 1: Create a New ASP.NET Core Project

1. Open Visual Studio.
2. Create a new project:
   • Select ASP.NET Core Web App (Model-View-Controller)
   • Click Next.
3. Configure your project:
   • Name your project, for example: GoogleAuthExample.
   • Choose a location if needed.
   • Click Create.
4. Configure your new project:
   • Ensure .NET 6.0 (Long Term Support) or a later version is selected.
   • Check Enable Docker Support if you want.
   • Uncheck Enable HTTPS for simplicity or keep it if you prefer.
   • Click Create.

Step 2: Register Your Application in Google Developer Console

1. Go to the Google Developer Console.
2. Create a new project:
   • Click Select a project at the top.
   • Click NEW PROJECT.
   • Enter a name for your project.
   • Click Create.
3. Configure the OAuth consent screen:
   • On the left sidebar, click OAuth consent screen.
   • Select External if you're building it for external users.
   • Click Create.
   • Fill in the required fields (App name, etc.).
   • Click Save and continue.
4. Create Credentials:
   • On the left sidebar, click Credentials.
   • Click Create Credentials > OAuth client ID.
   • Under Application type, select Web application.
   • Enter a name for your application.
   • Under Authorized redirect URIs, add: https://localhost:5001/signin-google (use http://localhost:5000/signin-google if you didn't enable HTTPS).
   • Click Create.
5. Note down the Client ID and Client Secret.

Step 3: Configure Google Authentication in ASP.NET Core

1. Install the necessary NuGet package:

   • Open the Package Manager Console.
   • Run: Install-Package Microsoft.AspNetCore.Authentication.Google.

2. Configure the Google Authentication middleware:

   • Open appsettings.json and add the Google Client ID and Client Secret:

     {
       "ConnectionStrings": {
         "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-GoogleAuthExample-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX;Trusted_Connection=True;MultipleActiveResultSets=true"
       },
       "Logging": {
         "LogLevel": {
           "Default": "Information",
           "Microsoft.AspNetCore": "Warning"
         }
       },
       "AllowedHosts": "*",
       "Authentication": {
         "Google": {
           "ClientId": "YOUR_GOOGLE_CLIENT_ID",
           "ClientSecret": "YOUR_GOOGLE_CLIENT_SECRET"
         }
       }
     }
     

3. Configure services and middleware in Program.cs:

   • Open Program.cs.
   • Add Google Authentication before app.UseAuthorization():

     var builder = WebApplication.CreateBuilder(args);
     
     // Add services to the container.
     builder.Services.AddControllersWithViews();
     
     builder.Services.ConfigureApplicationCookie(options =>
     {
         options.LoginPath = "/Account/Login";
     });
     
     builder.Services.AddAuthentication(options =>
     {
         options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
         options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
         options.DefaultChallengeScheme = GoogleDefaults.AuthenticationScheme;
     })
     .AddCookie()
     .AddGoogle(options =>
     {
         builder.Configuration.Bind("Authentication:Google", options);
     });
     
     var app = builder.Build();
     
     // Configure the HTTP request pipeline.
     if (!app.Environment.IsDevelopment())
     {
         app.UseExceptionHandler("/Home/Error");
         app.UseHsts();
     }
     
     app.UseHttpsRedirection();
     app.UseStaticFiles();
     
     app.UseRouting();
     
     app.UseAuthentication();
     app.UseAuthorization();
     
     app.MapControllerRoute(
         name: "default",
         pattern: "{controller=Home}/{action=Index}/{id?}");
     
     app.Run();
     

Step 4: Create Controllers and Views for Account Management

1. Add an AccountController:

   • Right-click on the Controllers folder and select Add > Controller.
   • Select MVC Controller - Empty and name it AccountController.
   • Add the following code to AccountController.cs:

     using Microsoft.AspNetCore.Authentication;
     using Microsoft.AspNetCore.Authentication.Cookies;
     using Microsoft.AspNetCore.Authentication.Google;
     using Microsoft.AspNetCore.Mvc;
     
     namespace GoogleAuthExample.Controllers
     {
         public class AccountController : Controller
         {
             public IActionResult Login()
             {
                 return View();
             }
     
             public IActionResult Logout()
             {
                 return SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
             }
     
             public IActionResult AccessDenied()
             {
                 return View();
             }
         }
     }
     

2. Create Views for Login, Logout, and AccessDenied:

   • Right-click on Account under Views and select Add > New Folder and name it Account.
   • Right-click on the Account folder, select Add > Razor View.
     • Create three views: Login.cshtml, Logout.cshtml, AccessDenied.cshtml (you can leave them empty for simplicity).

3. Modify the Login view to include a button for Google Login:

   • Open Login.cshtml and add the following code:

     @{
         ViewData["Title"] = "Login";
     }
     
     <h1>@ViewData["Title"]</h1>
     <p>Use a google account to log in</p>
     <form asp-controller="Account" asp-action="ExternalLogin" asp-route-provider="Google" method="post">
         <button type="submit" style="margin-top: 1em;" class="btn btn-default">Log in with Google</button>
     </form>
     

4. Modify AccountController to handle the external login:

   • Open AccountController.cs and add the following methods:

     public IActionResult ExternalLogin(string provider, string returnUrl = null)
     {
         var redirectUrl = Url.Action(nameof(ExternalLoginCallback), "Account", new { returnUrl });
         var properties = _signInManager.ConfigureExternalAuthenticationProperties(provider, redirectUrl);
         return Challenge(properties, provider);
     }
     
     public async Task<IActionResult> ExternalLoginCallback(string returnUrl = null, string remoteError = null)
     {
         if (remoteError != null)
         {
             ModelState.AddModelError(string.Empty, $"Error from external provider: {remoteError}");
             return View(nameof(Login));
         }
         var info = await _signInManager.GetExternalLoginInfoAsync();
         if (info == null)
         {
             return RedirectToAction(nameof(Login));
         }
     
         var result = await _signInManager.ExternalLoginSignInAsync(info.LoginProvider, info.ProviderKey, isPersistent: false, bypassTwoFactor: true);
         if (result.Succeeded)
         {
             return LocalRedirect(returnUrl);
         }
         else
         {
             return RedirectToAction(nameof(Login));
         }
     }
     

Step 5: Test the Application

1. Run the application:
   • Press F5 or click the run button in Visual Studio.
2. Navigate to /Account/Login:
   • You should see a page with a button to log in with Google.
3. Click the button:
   • You will be redirected to the Google login page.
   • After logging in, you should be redirected back to your application.

Summary

In this guide, you've learned how to set up external authentication with Google in an ASP.NET Core application. You created an ASP.NET Core MVC application, registered your application in the Google Developer Console, and configured Google authentication in your ASP.NET Core application. This setup allows users to log in using their Google accounts.