ASP.NET Core - Implement Google One Tap Sign In

visibility 672 event 2021-05-18 access_time 2 years ago language English
ASP.NET Core - Implement Google One Tap Sign In

Google one tap is a cross-platform sign-in mechanism for Web and Android. It enables Google users to sign up to a third party services like website literally with one tap only.  This article provides detailed steps to implement this sign-in mechanism for ASP.NET Core website. 

About Google one tap sign-up

For website implemented Google one tag sign up or sign in like Kontext, a popup window will show up if the user already signed into Google accounts. Once the user click 'Continue as ...' button, Google will return credential details to the callback service; the credential can be used to retrieve more information about the Google user. 

Now let's start to implement Google one tap in an ASP.NET core application. 

infoASP.NET Identity can be used to keep one tap returned user information as local account. For more information about Identity Core, please refer to official documentation Introduction to Identity on ASP.NET Core | Microsoft Docs. This article won't cover details about identity.

Register Google API client

The first step is to register a Google API client ID and configure OAuth Consent Screen. Refer to the official documentation: Get your Google API client ID  |  Sign In With Google. This step is required for normal Google sign-in and one tap sign-in. 

The main tasks involved are:

  1. Create OAuth client ID credentials via Google APIs console.
  2. Configure OAuth Consent Screen via OAuth consent screen.

There are two data items can be used later on: ClientId and ClientSecret.  ClientSecret is not mandatory for Google One Tap sign-in but is required for Google Sign-in (Google external login setup in ASP.NET Core | Microsoft Docs). 

 "Google": {
      "ClientId": "***",
      "ClientSecret": "***"    }

Add client scripts

Now we can add Google One Tap required client scripts into client pages. 

First we need to add Google JavaScript file into HTML header section of Razor pages or MVC views. 

<script src="" async defer></script>
This article is semi-public.

Please log in or register to read the full content.

account_circle Log in person_add Register

Log in with external accounts

info Last modified by Raymond 2 years ago copyright This page is subject to Site terms.
Like this article?
Share on

Please log in or register to comment.

account_circle Log in person_add Register

Log in with external accounts