Add Google Authentication
A tutorial on setting up Google authentication for the Umbraco CMS backoffice users.
Last updated
A tutorial on setting up Google authentication for the Umbraco CMS backoffice users.
Last updated
The Umbraco Backoffice supports external login providers (OAuth) for performing authentication of your users. This could be any OpenIDConnect provider such as Entra ID/Azure Active Directory, Identity Server, Google, or Facebook.
In this tutorial, we will take you through the steps of setting up a Google login for the Umbraco CMS backoffice.
When you log in to the Umbraco Backoffice, you need to enter your username and password. Integrating your website with Google authentication adds a button that you can click to log in with your Google account.
I'm sure a lot of content editors and implementors of your Umbraco sites would love to have one less password to remember. Click Sign in with Google and if you are already logged in with your Google account, it will log you in directly.
For this tutorial, you need:
Visual Studio installed.
A Google account.
A working Umbraco solution.
The first thing to do is set up a Google API. To do this, you need to go to https://console.developers.google.com/ and log in with your Google account.
Click the project dropdown and select New Project.
Enter a Project name, Organization, and Location.
Click Create.
Open the newly created project from the project dropdown.
Click Enable APIs and Services.
Type Google+ API in the Search field.
Select it and then Enable it.
Before you can create the credentials, you need to configure your consent screen.
Click OAuth consent screen from the left-side navigation menu.
Choose the User Type that fits your setup.
Click Create.
Fill in the required information:
App name
User support email
Developer contact information
Click Save and Continue.
Select the scopes your project needs.
Click Save and Continue.
Verify the details you have provided.
Click Back to Dashboard to complete creating the Consent screen.
Click Credentials from the left-side navigation menu.
Click Create Credentials.
Select OAuth Client ID from the dropdown.
Select Web Application from the Application type dropdown.
Enter the following details:
Application Name
Authorized JavaScript origins
Authorized redirect URIs
Click Create.
A popup appears displaying the Client Id and Client Secret. You will need these values later while configuring your solution.
The Client Id and Client Secret can always be accessed from the Credentials tab in the APIs & Services menu.
Once the Google API is set up it is time to install the Google Auth provider on the Umbraco project.
If you are working with a Cloud project, see the Working locally article to complete this step.
You can install and manage packages in a project.
Navigate to your project/solution folder.
If you have cloned down an Umbraco Project, navigate to the src
folder where you can see a .csproj
file.
Open a command-line of your choice such as "Command Prompt" at the mentioned location.
Run the following command to install the Microsoft.AspNetCore.Authentication.Google
package.
Once the package is installed, open the .csproj file to ensure if the package reference is added:
You can check the latest version of the package before installing it.
For more information on installing and using a package with the .Net CLI, see Microsoft Documentation.
To use an external login provider such as Google on your Umbraco CMS project, you have to implement a couple of new classes:
A custom-named configuration class.
A static extension class.
You can create these files in a location of your choice. In this tutorial, the files will be added to an ExternalUserLogin/GoogleAuthentication
folder.
Create a new class:GoogleBackOfficeExternalLoginProviderOptions.cs
.
Add the following code to the file:
The code used here, enables auto-linking with the external login provider. This enables the option for users to login to the Umbraco backoffice prior to having a backoffice User.
Set the autoLinkExternalAccount
to false
in order to disable auto-linking in your implementation.
Create a new class: GoogleAuthenticationExtensions.cs
.
Add the following code to the file:
Replace YOURCLIENTID and YOURCLIENTSECRET with the values from the OAuth Client Ids Credentials window.
Update ConfigureServices
in your Startup.cs
class to register your configuration with Umbraco.
Build and run the website.
Log in to the backoffice using the Google Authentication option.
If auto-linking is disabled, the user will need to follow these steps in order to be able to use the Google Authentication:
Login to the backoffice using Umbraco credentials.
Select your user profile in the top-right corner.
Click Link your Google account under External login providers.
Choose the account you wish to link.
For future backoffice logins, the user will be able to use Google Authentication to login.