How to Add Google authentication for the Umbraco CMS backoffice users?

In today's digital landscape, securing sensitive data is of paramount importance. For content management systems (CMS) like Umbraco, safeguarding the backoffice is crucial to prevent unauthorized access and potential data breaches. One effective way to enhance security is by implementing Google authentication for backoffice users. In this article, we'll guide you through the process of setting up Google authentication for your Umbraco CMS, providing an additional layer of protection and streamlining the login process.

Why Use Google Authentication? Google authentication, also known as OAuth or OpenID Connect, is a widely adopted standard for user authentication. It allows users to log in to your Umbraco backoffice using their Google account credentials. By leveraging Google's robust authentication infrastructure, you can minimize the risk of password-related security breaches. Additionally, Google authentication simplifies the login process, offering a seamless user experience.

Watch this video, you will get an idea of how to integrate Google Authentication.

Prerequisites: Before proceeding with the setup, ensure you have the following:

1. Access to the Umbraco backoffice with administrative privileges.
2. A Google Developer account to create an OAuth 2.0 client ID and secret.

Step 1: Create a Google Developer Project:

1. Head to the Google Developer Console (https://console.developers.google.com/).
2. Create a new project and give it a meaningful name.
3. Create App and add all the information required to display while user login screen.
4. In the left-hand menu, navigate to "Credentials."
5. Click "Create Credentials" and choose "OAuth client ID."
6. Select "Web Application" as the application type.
7. Add the authorized redirect URI for your Umbraco back-office login page (e.g., https://your-umbraco-site.com/umbraco-google-signin).

Step 2: Configure Umbraco for Google Authentication:

1. Open project in visual studio.
2. Install the "Microsoft.AspNetCore.Authentication.Google --version 7.0.9" package from the Nuget package (https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.Google).
3. After installation, Create the class file "GoogleBackOfficeExternalLoginProviderOptions" which will include all the options required to show the login button and link with Umbraco User and claims. also, you can update the user with additional details.
4. You must have added claims to stop getting errors after login. so OnAutoLinking and OnExternalLogin event, add identity user claims. 
   

   public class GoogleBackOfficeExternalLoginProviderOptions : IConfigureNamedOptions
       {
           public const string SchemeName = GoogleDefaults.AuthenticationScheme;
           public void Configure(string name, BackOfficeExternalLoginProviderOptions options)
           {
               if (name != Constants.Security.BackOfficeExternalAuthenticationTypePrefix + SchemeName)
               {
                   return;
               }
   
               Configure(options);
           }
   
           public void Configure(BackOfficeExternalLoginProviderOptions options)
           {
               // Customize the login button
               options.ButtonStyle = "btn-danger";
               options.Icon = "fa fa-google";
   
               // The following options are only relevant if you
               // want to configure auto-linking on the authentication.
               options.AutoLinkOptions = new ExternalSignInAutoLinkOptions(
   
                   // Set to true to enable auto-linking
                   autoLinkExternalAccount: true,
   
                   // [OPTIONAL]
                   // Default: "Editor"
                   // Specify User Group.
                   defaultUserGroups: new[] { Constants.Security.EditorGroupAlias },
   
                   // [OPTIONAL]
                   // Default: The culture specified in appsettings.json.
                   // Specify the default culture to create the User as.
                   // It can be dynamically assigned in the OnAutoLinking callback.
                   defaultCulture: null,
   
                   // [OPTIONAL]
                   // Enable the ability to link/unlink manually from within
                   // the Umbraco backoffice.
                   // Set this to false if you don't want the user to unlink 
                   // from this external login provider.
                   allowManualLinking: true
               )
               {
                   // [OPTIONAL] Callback
                   OnAutoLinking = (autoLinkUser, loginInfo) =>
                   {
                       // Customize the user before it's linked.
                       // Modify the User's groups based on the Claims returned
                       // in the external ogin info.
                       var extClaim = loginInfo.Principal.Claims;
                       foreach (var claim in extClaim)
                       {
                           autoLinkUser.Claims.Add(new IdentityUserClaim
                           {
                               ClaimType = claim.Type,
                               ClaimValue = claim.Value,
                               UserId = autoLinkUser.Id
                           });
                       }
                       autoLinkUser.IsApproved = true;
                   },
                   OnExternalLogin = (user, loginInfo) =>
                   {
                       // Customize the User before it is saved whenever they have
                       // logged in with the external provider.
                       // Sync the Users name based on the Claims returned
                       // in the external login info
   
                       // Returns a boolean indicating if sign-in should continue or not.
                       var extClaim = loginInfo.Principal.Claims;
                       
                       foreach (var claim in extClaim)
                       {
                           user.Claims.Add(new IdentityUserClaim
                           {
                               ClaimType = claim.Type,
                               ClaimValue = claim.Value,
                               UserId = user.Id
                           });
                       }
                       user.IsApproved = true;
                       return true;
                   }
               };
   
               // [OPTIONAL]
               // Disable the ability for users to login with a username/password.
               // If set to true, it will disable username/password login
               // even if there are other external login providers installed.
               options.DenyLocalLogin = true;
   
               // [OPTIONAL]
               // Choose to automatically redirect to the external login provider
               // effectively removing the login button.
               options.AutoRedirectLoginToExternalProvider = false;
           }
       }

5. Then Create the Extension "GoogleAuthenticationExtensions" to Register ProviderBackOfficeExternalLoginProviderOptions here rather than require it in a startup. In this file, you need to configure credentials and redirect / CallbackPath to what you added in the Google console. (callback path/Redirect path must match with the credential redirection URL).
   

   public static IUmbracoBuilder AddGoogleAuthentication(this IUmbracoBuilder builder)
           {
               // Register ProviderBackOfficeExternalLoginProviderOptions here rather than require it in startup
               builder.Services.ConfigureOptions();
   
               builder.AddBackOfficeExternalLogins(logins =>
               {
                   logins.AddBackOfficeLogin(
                       backOfficeAuthenticationBuilder =>
                       {
                           backOfficeAuthenticationBuilder.AddGoogle(
                               // The scheme must be set with this method to work for the back office
                               backOfficeAuthenticationBuilder.SchemeForBackOffice(GoogleBackOfficeExternalLoginProviderOptions.SchemeName),
                               options =>
                               {
                                   // Callback path: Represents the URL to which the browser should be redirected to.
                                   // The default value is '/signin-google'.
                                   // The value here should match what you have configured in you external login provider.
                                   // The value needs to be unique.
                                   options.CallbackPath = "/umbraco-google-signin";
                                   options.ClientId = "{ClientId}"; // Replace with your client id generated while creating OAuth client ID
                                   options.ClientSecret = "{ClientSecret}"; // Replace with your client secret generated while creating OAuth client ID
                               });
                       });
               });
               return builder;
           }

6. Register this extension at startup.cs
   

   public void ConfigureServices(IServiceCollection services)
           {
               services.AddUmbraco(_env, _config)
                   .AddBackOffice()
                   .AddWebsite()
                   .AddDeliveryApi()
                   .AddComposers()
                   .AddGoogleAuthentication()
                   .Build();
           }

Step 3: Test the Google Authentication:

1. Log out of the Umbraco backoffice if you are already logged in.
2. Navigate to the login page (https://your-umbraco-site.com/umbraco).
3. Click on the "Sign in with Google" button.
4. You will be redirected to Google's login page. Enter your Google account credentials.
5. Grant permission for Umbraco to access your Google account.
6. You will be redirected back to the Umbraco backoffice, now logged in with your Google account.

Conclusion: By implementing Google authentication for your Umbraco CMS backoffice, you can significantly enhance security while providing a more user-friendly login experience for your users. The process involves creating a Google Developer project, configuring Umbraco, and enabling the OAuth 2.0 client. With this additional layer of protection, you can rest assured that your backoffice data remains secure and accessible only to authorized personnel. Stay vigilant and regularly update your security measures to stay one step ahead of potential threats. Happy content managing