Blazor Server Project #16: How to Implement Google Authentication

A step-by-step guide to integrating Google Sign-In into your web app using OAuth 2.0, admitting users to log in using their Google account

Table of Contents

⦁ Overview ⦁ Create the Google OAuth 2.0 Client ID and Secret ⦁ Install Google Authentication Middleware ⦁ Store the Google Client ID and Secret ⦁ Configure Google Authentication ⦁ Sign in with Google ▹ Unregistered users ▹ Registered users with no role ▹ Registered users with a "User" role ⦁ Summary ⦁ References

This article is the sixteenth in a series covering the Blazor Server Project: (1) How to create a CRUD operation using Dapper (2) Building a dropdown list involves a 1:N relationship (3) How to implement a checkbox list involving an M:N relationships (4) Understanding URL routing and navigation (5) Creating and using page layout (6) How to create a reusable modal dialog component (7) Practical guide to making a master-detail page (8) Master-detail page using dynamic query (9) How to avoid SQL injection attacks (10) Hiding/showing HTML elements (11) Migrate to ASP.NET Core 6.0 (12) Installing ASP.NET Core Identity (13) Integrating Identity tables into the existing project database (14) Authentication and authorization (15) Role-based authorization (16) How to implement Google Authentication (17) Facebook Authentication and Authorization (18) How to configure Twitter Authentication (19) How to Customize Password Policy (20) Account Lockout Policy

These articles are for anyone who wants to learn how to build Blazor Server applications in a practical approach through some sample projects. It will be straightforward if you have some experience with C#, HTML, CSS, and SQL.

Overview

In the Blazor Server Project #14 article, we implemented authentication using ASP.NET Core Identity. For now, we cover how to apply Google Authentication by integrating Google Sign-In into your web app using Google OAuth 2.0. So, users can log in to your web using their Google accounts. The steps are: ▸ Create the Google OAuth 2.0 Client ID and Secret. ▸ Install Google Authentication Middleware. ▸ Store the Google Client ID and Secret. ▸ Configure Google Authentication. ▸ Sign in with Google.

Sign In With Google helps you to quickly and easily manage user authentication and sign-in to your website. Users sign into a Google Account, provide their consent, and securely share their profile information with your platform. (https://developers.google.com/identity/gsi/web/guides/overview)

Create the Google OAuth 2.0 Client ID and Secret

• Go to the Credentials page. — Choose your account. — Enter your password. The following page appears.

• Click CREATE PROJECT button, and the page below occurs.

• Enter the Project name: Book Project, click CREATE, and you will see the project dashboard below.

• Click CONFIGURE CONSENT SCREEN button to display the OAuth consent screen.

• Select User Type: External > CREATE, and the following Edit app registration page appears.

• In the App information dialog, provide an app name: BookApp, user support email, and developer contact information. Click SAVE AND CONTINUE button.
• Step through the Scopes step. Click SAVE AND CONTINUE button.
• Step through the Test users step. Click SAVE AND CONTINUE button.
• Review the OAuth consent screen.

• Go back to the app Dashboard.

• In the Credentials tab, click CREATE CREDENTIALS > OAuth client ID.

• Select Application type > Web application, and name your OAuth client, e.g. BookApp client.

• In the Authorized redirect URIs section, select ADD URI. For testing, you can specify URIs that refer to the local machine, https://localhost:44333/signin-google where 44333 is the app's port. The redirect URIs are the endpoints to which the OAuth 2.0 server can send responses.

When deploying the site, either: ∘ Update the app’s redirect URI in the Google Console to the app’s deployed redirect URI. ∘ Create a new Google API registration in the Google Console for the production app with its production redirect URI. (https://learn.microsoft.com/en-us/aspnet/core/security/authentication/social)

• Click the CREATE button to make an OAuth client.

• Download the JSON file for use in the application's configuration. Listing 1 shows its content.
• Click the OK button.

Listing 1 The contents of the client_….googleusercontent.com.json file

{
   "web": {
      "client_id": "684XXXXXf2n62.apps.googleusercontent.com",
      "project_id": "book-project-367314",
      "auth_uri": "https://accounts.google.com/o/oauth2/auth",
      "token_uri": "https://oauth2.googleapis.com/token",
      "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
      "client_secret": "GOCXXXXX3s2-",
      "redirect_uris": [ "https://localhost:44333/signin-google" ]
   }
}

Note Your client_id and client_secret should be different from mine in Listing 1 above.

Install Google Authentication Middleware

We need to install the Microsoft.AspNetCore.Authentication.Google NuGet package in our project.

This project is a continuation of the Blazor Server Project #15.

If you don't have the project, you can download it via the link below.

• Open the project in Visual Studio 2022.
• Select Tools > NuGet Package Manager > Manage NuGet Packages Solution... from the menu, and the NuGet Solution dialog appears.

• Click Browse.
• In the Search box, type Microsoft.AspNetCore.Authentication.Google.
• Select Microsoft.AspNetCore.Authentication.Google from the package list, check checkboxes and click Install.

• Click OK to proceed with the installation.

• Click I Accept to accept the license.

Store the Google Client ID and Secret

• Right-click the BookApp project in the Solution Explorer pane.

• From the context menu, click Manage User Secrets to open the secrets.json file.
• Please copy the code below and paste it into the file.

Listing 2 The contents of the secrets.json file

{
  "Authentication:Google:ClientId": "<client-id>",
  "Authentication:Google:ClientSecret": "<client-secret>"
}

• Replace <client-id> and <client-secret> with yours.
• Save the file. Visual Studio saves it in the file system path: %APPDATA%\Microsoft\UserSecrets\<user_secrets_id>\secrets.json

Configure Google Authentication

Add the following code into Startup.cs file to configure Google Authentication.

Listing 3 The contents of the modified Startup.cs file

...
   public void ConfigureServices(IServiceCollection services)
   ...
      //Google Authentication service         
      services.AddAuthentication().AddGoogle(googleOptions =>
      {
         googleOptions.ClientId = Configuration["Authentication:Google:ClientId"];
         googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"];
      });
  ...
...

The application uses the AddGoogle() method to read the ClientId and ClientSecret from the secrets.json file.

Sign in with Google

See Table 1. We will test login using Google accounts for three user types: ▸Unregistered user ▸Registered user with no role ▸Registered user with a "User" role and check menu list compliance with user authorization.

We first modify the code in the Login.cshtml and Register.cshtml files to make the UI more informative.

Listing 4 The contents of the modified Login.cshtml file

...
   @foreach (var provider in Model.ExternalLogins)
   {
      <button type="submit"
         ...
         title="Log in using your @provider.DisplayName account">
         Log in with @provider.DisplayName
      </button>
   }
...

Listing 5 The contents of the modified Register.cshtml file

...
   @foreach (var provider in Model.ExternalLogins)
   {
      <button type="submit"
         ...
         title="Register using your @provider.DisplayName account">
         Register with @provider.DisplayName
      </button>
   }
...

Unregistered users

Users can log in using their Google account even if they are not registered. There are two options for unregistered users to sign in, register, and set the password. The options are: (1) via the Log in link, or (2) via the Register link.

Via the Log in link

• Run the app, click Login on the homepage and follow the steps in Figure 16.

• An unregistered user does registration on sequence ⑤ and confirms on sequences ⑥. Figure 17 shows the list of users before and after registering a new user, and Figure 18 displays the data before and after confirming registration.
• An unregistered user does registration on sequence ⑤ and confirms on sequences ⑥. Figure 17 shows the data before and after registration, and Figure 18 displays the data before and after confirmation.

• The new user has no password yet; the password hash is NULL. Follow the next steps in Figure 19.

• The new user sets the password on sequence ⑫. Figure 20 shows the data before and after setting the password.

Via the Register link

• Run the app, click Register on the homepage and follow the steps in Figure 21.

• An unregistered user does registration and confirmation on sequences ⑤ and ⑥.
• The new user has no password yet. Follow the next steps in Figure 19.

Registered users with no role

Now the two users above are registered with no role. We test one of them.

• Run the app, click Login on the homepage and follow the steps in Figure 22.

Registered users with a "User" role

• We must first assign a "User" role to a user. Copy the Id of [email protected] from the AspNetUsers table and the Id of the User role from the AspNetRole table and paste them into the AspNetUserRoles table. See Figure 23.

• Run the app, click Login on the homepage and follow the steps in Figure 24.

The three types of users above log in using their Google accounts and have different menu authorizations according to the specifications in Table 1.

• An unregistered user can only access two menu items, Home and Books. See sequence ① in Figures 16, 21, 22, and 24 and sequence ⑮ in Figure 19.
• A registered user with no role can access three menu items, Home, Books, and Publishers. See sequences ⑩ and ⑭ in Figure 19 and sequence ⑤ in Figure 22.
• A registered user with a "User" role can access four menu items, Home, Books, Publishers, and Authors. See sequences ⑤ in Figure 24.

What about pages and elements authorization? Please check their compliance with the specifications in the previous post.

Summary

By integrating Google Sign-In into your web app using Google OAuth 2.0, any user — unregistered users, registered users with no role, and registered users with roles — can sign in using their Google accounts. Their authorization is compliant with the specifications in the app.

Hopefully beneficial. Your feedback will be precious.

References