Implementing Google reCAPTCHA v3

Whether you support a business or a global corporation, we all want to grow and thrive. Doing that means we need to protect and grow our traffic and your customers want to make sure they’re protected too. What if we could put those two things together? That’s what reCAPTCHA v3 is about: helping you protect your site and helping your users continue with their journey.

This version of reCAPTCHA improves user privacy and reduces abusive traffic for your site, with improved security for your users and increased control over the actions you block.

We give you a holistic breakdown of reCAPTCHA v3 and steps to implement it.

What is Google reCAPTCHA v3

Google reCAPTCHA v3 is the latest invisible security measure introduced by Google. It adds protection to forms/quote forms without forcing anyone to click checkbox/matching images/read the hard text to verify if it’s human or bot.

How does Google reCAPTCHA v3 work?

On the implemented page, a generated token is added after the reCAPTCHA.js file is loaded on the website. This token is valid for a certain amount of time after that the token will expire. If it is a form/quote page and the form is not submitted during this period, the form page will need to be refreshed for a new token.

Interpreting the Google reCAPTCHA v3 score?

Google reCAPTCHA v3 uses score for example. 1.0 is likely a human and 0.0 is likely a bot. Every website is different and depending on that Google reCAPTCHA v3 acts behind the scenes by using google algorithm instead of blocking traffic to better protect the website.

Google reCAPTCHA works by seeing real traffic on a website. Scores may differ on staging environment and production environment. Google reCAPTCHA v3 never stops the user while submitting any form, can first run reCAPTCHA without acting and then decide on thresholds by looking at traffic in the admin console. By default, a threshold is 0.5.

Difference between reCAPTCHA v2 and v3

Benefits of reCAPTCHA v3

• Prevent Bot attack by interpreting the score.
• Allows you to verify if an interaction is legitimate without user/human interaction.
• Better user experience as there’s no challenge to solve.
• By specifying the action name in captcha execution, a detailed breakdown of data can be view in the admin console.

Steps

Below are the steps to be taken to implement google reCAPTCHA v3 on a website. Please login into your Gmail account or if not created, please create before attempting the below steps.

Step 1: Create reCAPTCHA keys through the admin console

In the admin console, create keys by filling below form on https://g.co/recaptcha/v3.
The form contains below fields:

• Label The label field indicates the name of the captcha key for identification purposes when there are multiple keys for multiple domains.
• reCAPTCHA Type It defines the version and approach of captcha implementation.
• Domains Defines the domain name for the key on which captcha will be implemented. A key can be used for multiple domains
• Owner The default value is of Gmail account holder, but the access can be given to other Gmail users by adding their Email addresses here.

After adding details, click on SUBMIT. It will generate Secret Key and Site Key.

Step 2: Removing older version

If you have implemented v2 version Captcha on the website. If you did not, please skip this step.

Please remove all instances of v2 implementation, below is a common list:

• V2 version API link added in of page or website
• Remove “g-recaptcha” references from the website which provides a popup to select captcha condition

Step 3: Add client-side reCAPTCHA code with the site key

Client-side code is divided into 3 parts:

• API link inclusion We need to include the https://www.google.com/recaptcha/api.js?render={SITE_KEY}at top of the page on which captcha is getting implemented.
• Token generation After the link is added, a token is generated based on how grecaptcha.execute function is added using jQuery/JavaScript.
• Token addition The generated token can be added to any hidden variable on the form using jQuery/JavaScript.

In the example above, we have delayed token generation by 9 seconds and added generated token value to the token-response hidden field, which will be verified at the server-side and other auxiliary functions.

Step 4: Verify client-side code

The verification on a client is done in 2 parts:

• ReCAPTCHA API: On the captcha implemented page, on the page loaded below, the icon can be seen on successful API rendering.
  
• Token: As implemented above, we are assigning tokens to the ‘token response field and enabling the submit button field. Below is the screenshot:
  

Please note that the Captcha token expires after 2 minutes of page loading, so design form accordingly.

Step 5: Add server-side reCAPTCHA code with a secret key

On the server-side, below are the required parameters:

• Secret Key: This is the key that we receive while creating a reCAPTCHA account and can be accessed from the admin console.
• Token: On form submission, the token is received on the server-side
• URL: This is the google site verification URL used for verification.

Step 6: Verify server-side code

After submitting the above code, the result is returned in JSON format and then Developers can use JSON values as required. Below is the JSON format which will return a score from 0.0 to 1.0:

While reCAPTCHA v1 and v2 were a step forward in terms of user experience, with reCAPTCHA v3, you'll be able to protect your site with a simple checkbox that doesn't interrupt the user experience. Additionally, you now have the power to make decisions about specific risky sign-in requests. Take charge of the CAPTCHA experience for all site visitors.