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. 

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": "***.apps.googleusercontent.com",
      "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="https://accounts.google.com/gsi/client" async defer></script>