Setting up Recaptcha V3
What’s this all about – it’s those annoying little boxes that ask you to type out a number or some letters when you fill in a form.
Well, the good news is that Google’s latest version – that in fairness has been out for a while – is the best yet.
First, we had V1 – which really was about typing out letters and numbers. This used to be part of Google’s effort to scan everything in the real world into a digital format, basically, Google picked out words from documents it failed to understand and by running them through Recaptcha, humans were able to provide definitions of millions of words in a very short amount of time.
Then we had the same for photos, essentially Google needed to understand what a Traffic Light, car or Fire Hydrant was, so by getting us to pick out elements of a photo Google was suddenly able to understand how humans did this and then could apply this logic to millions of photos thereafter.
And now we have V3… the key difference now is that Google has had so much input, there are so many websites with Recaptcha on them Google no longer wants or needs to ask for checks every time. The crowdsoucing if you like is running at Max.
How to Add to your website
First up you need an account. Using a Google Account you can log into https://www.google.com/recaptcha/ and set up a Recaptcha Account. This is no harder than setting up Google Analytics or any other Google service… the questions are minimal and in just a few minutes you should have some Recpatcha Keys, a ‘secret’ and a ‘site’ key.
For the moment I’m going to stick with WordPress because it’s so simple… First of all install a plugin called ‘Invisible reCaptcha‘. Under the main ‘Settings’ you can insert the Site and Secret Keys and then you can select the various options where you would like Recaptcha to happen.
If you are using Contact Form 7 for your web forms – then you can just click the box in the Contact Forms section and it will work.
For HTML websites
The code is simple as well, but the Google website is not that helpful. The code you will need this:
<script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"></script>
<script>grecaptcha.ready(function() {
grecaptcha.execute('_reCAPTCHA_site_key_', {action: 'homepage'}).then(function(token) {
...
});
});</script>Replace BOTH ‘the _reCAPTCHA_site_key’ parts and the underscores. and remove the three dots… unless you have specific actions that need to be included.
That’s it… add this code to any page that contains a form.
Finally – this will work for Shopify and Magento as well. Happy Coding