Implement the new Invisible reCaptcha from Google

Question

I'm building a PHP website where I would like to put a captcha on the login form. I went with Google's new Invisible reCaptcha but I'm having trouble with implementing it (HTML part, the PHP is working).

The code I've got now for the "normal" reCaptcha is the following (as according to the Google reCaptcha instructions and this works):

<form action=test.php method="POST">    <input type="text" name="email" placeholder="Email">    <input type="password" name="password" placeholder="Password">     <!-- <Google reCaptcha> -->    <div class="g-recaptcha" data-sitekey="<sitekey>"></div>    <!-- </Google reCaptcha> -->     <input type="submit" name="login" class="loginmodal-submit" value="Login"> </form> 

There were some instructions sent in the confirmation email when I signed up (took about 24 hours to get the confirmation). That says the following:

Invisible reCAPTCHA Integration

1. If you haven’t integrated your site with reCAPTCHA v2, please follow our developer guide for implementation details.

2. Please make sure that your site key that has been whitelisted for Invisible reCAPTCHA.

3. To enable the Invisible reCAPTCHA, rather than put the parameters in a div, you can add them directly to an html button.

   3a. data-callback=””. This works just like the checkbox captcha, but is required for invisible.

   3b. data-badge: This allows you to reposition the reCAPTCHA badge (i.e. logo and ‘protected by reCAPTCHA’ text) . Valid options as ‘bottomright’ (the default), ‘bottomleft’ or ‘inline’ which will put the badge directly above the button. If you make the badge inline, you can control the CSS of the badge directly.

4. Verifying the user’s response has no changes.

The problem I have is with the HTML implementation (therefore I need help with step 3. 1,2 and 4 is working for me). The rest I have working with normal reCaptcha and according to the instructions, it should be the same thing. I do not understand what the data-callback and data-badge is and how it works. A code example of how to implement invisible reCaptcha with how my form is setup would be great!

Answer 1

Invisible reCAPTCHA

Implementing Google's new Invisible reCAPTCHA is very similar to how we add v2 to our site. You may add it as its own container like normal, or the new method of adding it to the form submit button. I hope this guide will help you along the correct path.

Standalone CAPTCHA Container

Implementing recaptcha requires a few things:

- Sitekey - Class - Callback - Bind 

This will be your final goal.

<div class="g-recaptcha" data-sitekey="<sitekey>"     data-bind="recaptcha-submit" data-callback="submitForm">  </div> 

When using the standalone method, you must have data-bind set to the ID of your submit button. If you do not have this set, your captcha will not be invisible.

A callback must also be used to submit the form. An invisible captcha will cancel all events from the submit button, so you need the callback to actually pass the submission on.

<script> function submitForm() {     var form = document.getElementById("ContactForm");     if (validate_form(form)) {         form.submit();     } else {         grecaptcha.reset();     } } </script> 

Notice in the example callback that there is also custom form validation. It is very important that you reset the reCAPTCHA when the validation fails, otherwise you will not be able to re-submit the form until the CAPTCHA expires.

Invisible CAPTCHA Button

A lot of this is the same as with the standalone CAPTCHA above, but instead of having a container, everything is placed on the submit button.

This will be your goal.

<button class="g-recaptcha" data-sitekey="<sitekey>"     data-callback="submitForm" data-badge="inline" type="submit">   Submit</button> 

There's something new here, data-badge. This is a div that gets inserted into the DOM that contains the inputs required for reCAPTCHA to function. It has three possible values: bottomleft, bottomright, inline. Inline will make it display directly above the submit button, and allow you to control how you would like it to be styled.

On to your question

<form action="test.php" method="POST" id="theForm">     <script>     function submitForm() {         document.getElementById("theForm").submit();     }     </script>     <input type="text" name="email" placeholder="Email">     <input type="password" name="password" placeholder="Password">      <div class="g-recaptcha" data-sitekey="<sitekey>" data-bind="recaptcha-submit" data-callback="submitForm"></div>      <input type="submit" name="login" class="loginmodal-submit" id="recaptcha-submit" value="Login"> </form> 

Or

<form action="test.php" method="POST" id="theForm">     <script>     function submitForm() {         document.getElementById("theForm").submit();     }     </script>     <input type="text" name="email" placeholder="Email">     <input type="password" name="password" placeholder="Password">      <button class="loginmodal-submit g-recaptcha" data-sitekey="<sitekey>" data-callback="submitForm" data-badge="inline" type="submit" value="Login">Submit</button> </form> 

I hope this helps you and future coders. I'll keep this up-to-date as the technology evolves.

Answer 2

If you're looking for a fully customizable general solution which will even work with multiple forms on the same page, I'll explicitly render the reCaptcha widget by using the render=explicit and onload=aFunctionCallback parameters.

Here is a simple example:

<!DOCTYPE html>  <html>  <body>    <form action="" method="post">      <input type="text" name="first-name-1"> <br />      <input type="text" name="last-name-1"> <br />        <div class="recaptcha-holder"></div>        <input type="submit" value="Submit">  </form>    <br /><br />    <form action="" method="post">      <input type="text" name="first-name-2"> <br />      <input type="text" name="last-name-2"> <br />        <div class="recaptcha-holder"></div>        <input type="submit" value="Submit">  </form>    <script type="text/javascript">      var renderGoogleInvisibleRecaptcha = function() {      for (var i = 0; i < document.forms.length; ++i) {        var form = document.forms[i];        var holder = form.querySelector('.recaptcha-holder');        if (null === holder){          continue;        }          (function(frm){            var holderId = grecaptcha.render(holder,{            'sitekey': 'CHANGE_ME_WITH_YOUR_SITE_KEY',            'size': 'invisible',            'badge' : 'bottomright', // possible values: bottomright, bottomleft, inline            'callback' : function (recaptchaToken) {              HTMLFormElement.prototype.submit.call(frm);            }          });            frm.onsubmit = function (evt){            evt.preventDefault();            grecaptcha.execute(holderId);          };          })(form);      }    };      </script>    <script src="https://www.google.com/recaptcha/api.js?onload=renderGoogleInvisibleRecaptcha&render=explicit" async defer></script>    </body>  </html>

As you can see, I am adding an empty div element into a form. In order to identify which forms should be protected using reCaptcha, I'll add a class name to this element. In our example I am using 'recaptcha-holder' class name.

The callback function iterates through all the existing forms and if it finds our injected element with the 'recaptcha-holder' class name, it will render the reCaptcha widget.

I've been using this solution on my Invisible reCaptcha for WordPress plugin. If somebody wants to see how this works, the plugin is available for download on WordPress directory:

https://wordpress.org/plugins/invisible-recaptcha/

Hope this helps!