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.
Topic
Definition Versions types
How to Enable Google reCapcha ?
Google reCaptcha V 2.0 - Steps to enable Google ReCaptcha
Step 1: - Registration with Google
Step 2 - Integrating with our ASP.NET Core or MVC or PHP Application
Step 3 - Server Side Integration
RESOURCES
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
Type Version 1.0 - Depreciated
Type Version 2.0 - It uses the checkbox, image or audio to verify the user request.
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
Site Key
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
Last updated
Was this helpful?
