Google reCAPTCHA

How to Configure Google reCAPTCHA

Google reCAPTCHA

Google reCapcha Service is a free service, this document helps us to create an application to use google reCapcha service in ASP.NET application or any language.

What is Google reCAPTCHA ?

Definition

As Google stated this as “Google reCAPTCHA is a free service that protects your website from spam and abuse. reCAPTCHA uses an advanced risk analysis engine and adaptive challenges to keep automated software from engaging in abusive activities on your site. It does this while letting your valid users pass through with ease.”

Versions types

There are currently 2 versions available in the Google reCaptcha, they are

  1. Type Version 1.0 - Depreciated

  2. Type Version 2.0 - It uses the checkbox, image or audio to verify the user request.

  3. Type Version 3.0 - It acts from server-side & client-side code.

The objective is to prevent spam bots without any user interaction. reCAPTCHA v3 returns us spam score that can be used to take various action in your web app.

How to Enable Google reCaptcha?

Google reCaptcha V 2.0 - Steps to enable Google ReCaptcha

Step 1: - Registration with Google

Open the URL “Google reCAPTCHA” and click on “Admin Console” Button.

Now click on the “+” icon as shown below

Fill the following details

Label - A name for your reference

reCAPTCHA Type - Type of reCaptcha you are looking for.

Domain - your web URL - For development and testing we can use “localhost” or “127.0.0.1” as a domain it will work perfectly.

Accept the agreement

Once all the details updated click on “Submit”, Google reCAPTCHA will give us a

  1. Site Key

  2. Secret Key

As shown in the below image.

Step 2 - Integrating with our ASP.NET Core or MVC or PHP Application

Open visual studio any ASP.NET Core Web Project Create a Login Page in just HTML File or a Razor Page, in this I have created a sample HTML File to work on this. I just used the Metro Login page for my the demo purpose, the full source code has been attached at the end of the post.

Just on the data-sitekey=”XXXXX”, update your “Site Key”

Include the below javascript at the bottom of the “Login.html” file.

Now its time to include the main code to integrate Google reCAPTCHA, below is the script which we need to include the below javascript functions.

Step 3 - Server-side Integration

Note: If you see the sign-in button you might notice that they won't be any login verification functionality this the above function has written to verify “Google reCAPTCHA” alone.

If we fail to select the checkbox, Google reCAPTCHA will throw an error as “Captcha Verification failed”.

Once, we verify the Google reCAPTCHA, We should get a success message as shown below and now we can redirect to our “homepage” or “landing page” etc.

RESOURCES

Summary

reCAPTCHA is a CAPTCHA-like system designed to establish that a computer user is human (normally in order to protect websites from bots) and, at the same time, assist in the digitization. In the above document, we have seen how to configure Google reCAPTCHA based on Version 2.0.

Reference

PreviousDetect Browser Close EventNextFind File is locked

Last updated