Using Google Invisible reCAPTCHA in the ASP.NET Login Page

Introduction

Google reCAPTCHA protects you against spam and other types of automated abuse. It is used to stop spam on a website and verify whether a user is a human.

This article provides an example of implementing invisible reCAPTCHA on an ASP.NET Login page.

There are three possible types of invoking invisible reCAPTCHA: automatically bind the challenge to the Login button, programmatically bind the challenge to the Login button, and programmatically invoke the challenge.

In this document, the challenge is invoked programmatically after pressing the Login ASP.NET button on the form.

Getting an API Key Pair

If you already have a google account, you can log in using it. Otherwise, register a new account. The key pair consists of a Site Key and a Secret Key. The Site Key is used on the client side. This key is public and available for everybody. The Secret Key is sent along with the g-recaptcha-response field to the Google service while validating the user’s reCAPTCHA input.

To avoid hardcoding, let us keep the key pair information in the Web.config file of your website:

Integrating the code in the Login page

First of all, you need to add a link to the Google reCAPTCHA API on your web page. After that, specify the necessary API downloading options, such as an asynchronous downloading, the executing mode, and the language option. Note that it is also important to place this link before any references to the reCAPTCHA members within the web page:

Next, you need to create a div with data-size='invisible' and the data-sitekey information and put it next to your Login ASP:Button. If you use the Bootstrap css styles, you can customize your Login button as you need here.

The issue that needs to be resolved is to invoke the reCAPTCHA function after the standard ASP.NET user input validation and before the Login form’s submit. One possible solution is to replace the Login button’s OnClick event handler and call the original event handler manually when the reCAPTCHA validation completes. The function below looks for the Login button element, replaces the OnClick event handler with the new one, and saves the original event handler to the btnLoginEvent variable.

You can call the DoLoad function at the end of the web page. In this case you can be sure that the script will be executed when the HTML document has been fully parsed.

The code that does the work is implemented in the DoValidate function. This function calls the standard ASP.NET client’s Page_ClientValidate input validation function. If there are no input errors, the Google reCAPTCHA code is invoked the grecaptcha.execute() method.

The third code part initiating the login process is represented by the DoLogin function. The name of this function is specified using the data-callback attribute of the reCAPTCHA div. The reCAPTCHA API executes this function immediately after a user has successfully passed the reCAPTCHA validation process. This is a place, where you can restore the original Login’s OnClick event handler and invoke it.

The code below demonstrates an implementation of the mentioned functions and the btnLoginEvent variable. The Google reCAPTCHA API link is declared above this code:

Server Side Validation

When the form is generated in a browser, the reCAPTCHA API adds a hidden form field called the “g-recaptcha-response”. To validate the form, you need to send an AJAX request to the Google service, and provide the content of this field along with your secret key. This service returns a reply in the JSON format with the “true” value if the response and the key are valid. Otherwise it returns the “false” value.

The code below sends a validation request and deserializes the Google service response:

You can call the ReCaptcha.Validate method in your LogIn event handler of the Login ASP.NET button. Below you can find a sample implementation with the LogIn method. The code uses the standard ASP.NET UserManager, and the IdentityHelper class. You can use the necessary implementation according to your task.