11---
22description : >-
3- A tutorial on setting up Google authentication for the Umbraco CMS backoffice users.
3+ A tutorial on setting up Google authentication for the Umbraco CMS backoffice
4+ users.
45---
56
67# Add Google Authentication (Users)
@@ -21,9 +22,9 @@ We are sure a lot of content editors and implementors of your Umbraco sites woul
2122
2223### What the tutorial covers
2324
24- 1 . [ Setting up a Google OAuth API] ( add-google-authentication.md#setting-up-a-google-oauth-api )
25- 2 . [ Integrating Google Auth in Visual Studio ] ( add-google-authentication.md#integrating-google-auth-in-visual-studio )
26- 3 . [ Configuring the solution to allow Google logins] ( add-google-authentication.md#configuring-the-solution-to-allow-google-logins )
25+ 1 . [ Setting up a Google OAuth API] ( add-google-authentication.md#id-1.- setting-up-a-google-oauth-api )
26+ 2 . [ Integrating Google Auth in your project ] ( add-google-authentication.md#id-2.- integrating-google-auth-in-your-project )
27+ 3 . [ Configuring the solution to allow Google logins] ( add-google-authentication.md#id-3.- configuring-the-solution-to-allow-google-logins )
2728
2829### Prerequisites
2930
@@ -39,22 +40,20 @@ The first thing to do is set up a Google API. To do this, you need to go to [htt
3940
4041### Setup a Google Console Project
4142
42- 1 . Click the project dropdown and select ** New Project** .
43+ 1 . Click the project dropdown and select ** New Project** .
4344
4445 ![ Project dropdown list] ( images/Project_dropdown_list_v13.png )
45-
46462 . Enter a ** Project name** , ** Organization** , and ** Location** .
47473 . Click ** Create** .
4848
4949### Enable the Google+ API
5050
51511 . Open the newly created project from the project dropdown.
52- 2 . Click ** Enable APIs and Services** .
52+ 2 . Click ** Enable APIs and Services** .
5353
5454 ![ Enable APIs] ( images/Enable_Apis_v13.png )
55-
56553 . Type ** Google+ API** in the ** Search** field.
57- 4 . Select it and then ** Enable** it.
56+ 4 . Select it and then ** Enable** it.
5857
5958 ![ Enable Google APIs] ( images/Enable_Google_API_v13.png )
6059
@@ -64,10 +63,9 @@ Before you can create the credentials, you need to configure your consent screen
6463
65641 . Click ** OAuth consent screen** from the left-side navigation menu.
66652 . Choose the ** User Type** that fits your setup.
67- 3 . Click ** Create** .
66+ 3 . Click ** Create** .
6867
6968 ![ Select User Type] ( images/User_Type_v13.png )
70-
71694 . Fill in the required information:
7270 * App name
7371 * User support email
@@ -82,18 +80,17 @@ Before you can create the credentials, you need to configure your consent screen
8280
83811 . Click ** Credentials** from the left-side navigation menu.
84822 . Click ** Create Credentials** .
85- 3 . Select ** OAuth Client ID** from the dropdown.
83+ 3 . Select ** OAuth Client ID** from the dropdown.
8684
8785 ![ Select OAuth Client ID] ( images/OAuth_Client_Id_v13.png )
88-
89864 . Select ** Web Application** from the ** Application type** dropdown.
90- 5 . Enter the following details:
91- * Application ** Name**
92- * ** Authorized JavaScript origins**
93- * ** Authorized redirect URIs**
87+ 5 . Enter the following details:
9488
95- ![ Credentials] ( images/credentials_v13.png )
89+ * Application ** Name**
90+ * ** Authorized JavaScript origins**
91+ * ** Authorized redirect URIs**
9692
93+ ![ Credentials] ( images/credentials_v13.png )
97946 . Click ** Create** .
9895
9996A popup appears displaying the ** Client Id** and ** Client Secret** . You will need these values later while configuring your solution.
@@ -115,17 +112,16 @@ You can install and manage packages in a project.
1151121 . Navigate to your project/solution folder.
116113
117114{% hint style="info" %}
118- If you have cloned down an Umbraco Project, you will need to navigate to the ` src ` folder where you can see a ` .csproj ` file.
115+ If you have cloned down an Umbraco Project, you will need to navigate to the ` src ` folder where you can see a ` .csproj ` file.
119116{% endhint %}
120117
1211182 . Open a command-line of your choice such as "Command Prompt" at the mentioned location.
122- 3 . Run the following command to install the ` Microsoft.AspNetCore.Authentication.Google ` package.
119+ 3 . Run the following command to install the ` Microsoft.AspNetCore.Authentication.Google ` package.
123120
124121 ``` cli
125122 dotnet add package Microsoft.AspNetCore.Authentication.Google
126123 ```
127-
128- 4. Once the package is installed, open the **.csproj** file to ensure if the package reference is added:
124+ 4. Once the package is installed, open the **.csproj** file to ensure if the package reference is added:
129125
130126 ```js
131127 <ItemGroup>
@@ -313,7 +309,6 @@ builder.CreateUmbracoBuilder()
3133098 . Log in to the backoffice using the Google Authentication option.
314310
315311{% hint style="info" %}
316-
317312If auto-linking is disabled, the user will need to follow these steps in order to be able to use Google Authentication:
318313
3193141 . Login to the backoffice using Umbraco credentials.
0 commit comments