I Finally figured out Google’s ReCaptcha v3

3 min readOct 25, 2022

I had a frustrating time implementing Google’s new “Invisible” ReCaptcha v3. The new ReCaptcha is great because it removes any user interaction, but setting it up and testing it is more complicated than the v2 “I am not a robot”. In this article I will explain how to set it up in any environment.

The v3 Documentation was not super specific on how to implement into an environment.

After some research, I figured out that the Captcha requires 2 sides- a Frontend and a Backend.

When you set up — google ReCaptcha in the Admin Console you are given a “Site Key” and a “Secret Key”

The Site Key will be used in your Front-end form to submit the captcha. First, you must call the Captcha API script in the <head> of your document <script src="https://www.google.com/recaptcha/api.js"></script>

Then, in whatever form you are using the Captcha — add this code to your submit button:

   <form id="demo-form" method="POST" action="demo.php">
      <input type="text" name="fname" id="fname" />
      <input type="email" name="email" id="email" />        <button class="g-recaptcha" 
        data-sitekey="reCAPTCHA_site_key" 
        data-callback='onSubmit' 
        data-action='submit'>Submit</button>
</form>

Note that this can be a <button> element OR <input type=”submit”>

Insert the “Callback” function below your form

<script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   }
 </script>

That’s it for the front-end, pretty simple.

For the Back-End I will use cUrl and PHP to get the response token and send that to Google’s API. The Response to that API call will give us a “Score” which we use to determine if the user is a bot or not.

Check for the Captcha token which should have been sent over in the http POST request on form submit

<?php if (isset($_POST['g-recaptcha-response'])) {$captcha = $_POST['g-recaptcha-response'];} else {$captcha = false;// error message here}
?>

Then, we use this $captcha variable along with our “Secret Key” AND a weird parameter which I don’t fully understand called “Action”. Our action is just ‘submit’ but I think you can change this based on different forms. Anyway here is the cUrl code to hit the Google API and get a response “Score”:

<?php $secret   = 'YOUR_SECRET_KEY';$action = "submit";// call curl to POST request$ch = curl_init();curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");curl_setopt($ch, CURLOPT_POST, 1);curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array('secret' => $secret, 'response' => $captcha)));curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);$response = curl_exec($ch);curl_close($ch);$arrResponse = json_decode($response, true);// verify the responseif($arrResponse["success"] == '1' && $arrResponse["action"] == $action && $arrResponse["score"] >= 0.5) {// valid submission// proceed} else {// spam submission// show error message}?>

That’s it — just make sure that you exit or return an error message in the else blocks. You could easily implement this with ReactJS and axios.post or fetch library just like we used cUrl.

My biggest complaint is Google provided no real use cases with this and I had to search Stack Overflow to find the cUrl or backend code to implement the v3 Captcha. Overall it works really well and is not that hard to integrate.

If this article was useful to you, please consider buying me a coffee

Thanks for reading!

I Finally figured out Google’s ReCaptcha v3

Written by Wesley Huber

Responses (1)