Implement reCAPTCHA v2 with checkbox
Yesterday we saw the different types of reCAPTCHA provided by Google in our post Add reCAPTCHA to your forms. Each type of reCAPTCHA serves a different purpose as you may have noticed, today we will see how to implement the typical "I'm not a robot" from version two.
Step 1
The first thing you should do is log in with your Google account and go to the reCAPTCHA Registration. There you must enter a label, choose version v2 with checkbox and the domains where you will display the reCAPTCHA. Once this is done, Google will generate a SITE KEY and a SECRET KEY for you.
Step 2
The next step is to add the reCAPTCHA api somewhere in the head tag preferably.
<script src="https://www.google.com/recaptcha/api.js" async defer></script>Step 3
In any form, you can add the following HTML preferably before the submit button.
<div class="g-recaptcha" data-sitekey="your-site-key"></div>The API will automatically render the reCAPTCHA. Other options of this element such as the theme, size, callback among others can be entered directly in the Google documentation.
Step 4 - Verification
The last step is to verify in the backend if the user has passed the reCAPTCHA challenge. You can do this by checking that the POST variable g-recaptcha-response is not null. As simple as that!.