Say hello!
Reach out!
Mar 22, 2023 Arun Ashok

Google reCAPTCHA

If you want to protect your website from malicious bot attacks Google reCAPTCHA is a good option which allows only legitimate user to perform website activities. Google Re-captcha has risk analysis engine which will constantly monitors your website, learns using machine learning process and prevents malicious attacks.

As per google 5 million websites are using google re-captcha mechanism!

What Google reCAPTCHA can prevent?

  • Content Stealing (pilfering)
  • Fraudulent Transactions - Purchase using stolen credit cards (may be from dark web !)
  • Account Take Overs. - Another stealing champions
  • Synthetic Accounts - Meaning creation of new accounts for marketing misuse
  • False Posts - Posting of malicious links and etc.

Types of reCAPTCHA

  • reCAPTCHA Enterprise - API based service mobile application supported and can be easily extended to all pages of a website. (Preferred method)
  • reCAPTCHA V3 - It verifies all the incoming requests with a score and give site owner a control handle to take appropriate action.
  • reCAPTCHA V2 - This is the “I am not a robot” check box and has invisible badge appearance.

We are only going to focus on reCAPTCHA Enterprise as it is going to be the future and recommended solution with lot of advantage over others.

In the traditional method, potentially malicious requests were blocked with a captcha challenge. reCAPTCHA V1 provided a text-based challenge while reCAPTCHA V2 is using an image-based challenge. The current image captcha challenge is blocking the user’s experience and therefore, we can use reCAPTCHA Enterprise to protect our web pages but maintain a frictionless customer experience.

How to enable reCAPTCHA Enterprise in Google Cloud

  • Login to Google Cloud
  • Click on Create Key
  • If you intention is to use reCAPTCHA for website, then select the platform type as “Website”
  • Then under Domain List, enter your site domain ex : www.squaredatalabs.com
  • Click on Create Key
  • You will be getting a screen as shown below:
  • Please take a note of the above script and the site key (Starting with 6LC.. in our case)
  • You will be including the script tag inside the head tag of your website HTML ( or your template files)
<head>
<script src="https://www.google.com/recaptcha/enterprise.js?render=site_key"></script>
.....
</head>
  • Now you can plug in reCAPTCHA feature in three ways depending on your use case
  • If you want to add reCAPTCHA mechanism on clicking of a login button , you can use below JS snippet
function onClick(e) {
e.preventDefault();
grecaptcha.enterprise.ready(async () => {
const token = await grecaptcha.enterprise.execute('site_key', {action: 'LOGIN'});
// See https://cloud.google.com/recaptcha-enterprise/docs/create-assessment
});
}

From the above snippet, it is understood that when someone clicks on the login button the binded function OnClick() will be invoked

The 

grecaptcha.enterprise.ready
function will ensure execute function is getting called on time (or correctly !) and it returns a token back to the browser

The token payload sample will looks like

Lets think about how can we achieve responsiveness?

“03AGdBq27tvcDrfiRuxQnyKs-SarXVzPODXLlpiwNsLqdm9BSQQRtxhkD-Wv6l2vBSnL_JQd80FZp3IeeF..”

Once the token is generated you should pass this token back to your backend server logic for further validation with Google API.This API is called “Assessment” API

Please read through the Link

In a nutshell, if you check below backend JAVA program as an example, it calls an Assessment API passing the token to the API as payload.

The result from Google Validation has action response which is 

response.getTokenProperties().getAction());
which should match with ‘LOGIN’ in our case and If it passes then it will give further details of RISK score with 1.0 being a likely good interaction and 0.0 being a likely abusive action.You can take an action based on the score ( Custom action!!) and also it will give classification reason of the token request.

A sample Response Payload :

Please visit below link for more details: https://cloud.google.com/recaptcha-enterprise/docs/interpret-assessment Image Credit : Google

Let us proceed to next verification method>

  • Add a verification when the page loads

grecaptcha.enterprise.ready(async () => {
const token = await grecaptcha.enterprise.execute('site_key', {action: 'homepage'});
// IMPORTANT: The 'token' that results from execute is an encrypted response sent by
// reCAPTCHA Enterprise to the end user's browser.
// This token must be validated by creating an assessment.
// See https://cloud.google.com/recaptcha-enterprise/docs/create-assessment
});
  • Add reCAPTCHA on an HTML button

<button class="g-recaptcha" data-sitekey="site_key" data-callback='onSubmit' 
data-action='submit'>Submit</button> 
<script>
function onSubmit(token) {
}
 </script>

Please note that there is much more into this that includes tuning the learning mechanism of google reCAPTCHA as per your needs which is called “Annotate Assessment”.

https://cloud.google.com/recaptcha-enterprise/docs/annotate-assessment

Community

Catgories

Our Expertise