Get Started With Invisible reCAPTCHA

To prevent software from posting forms on websites (and nowadays even on mobile apps), there is this Completely Automated Public Turing test to tell Computers and Humans Apart, also known as CAPTCHA.

When I think about CAPTCHAs, I relate to trying to read distorted letters. I don?t know how you react, but I really dislike when I am forced to solve those. Lately I have seen a few variants such as differentiating cats from dogs, picking out road signs or other objects in more or less obscure images. Although I find them to be much more pleasant, I still think that they are a PITA.

Late in 2014 Google announced their No CAPTCHA reCAPTCHA service using machine learning algorithms to detect whether a visitor is a bot or an actual person. While being much easier to use, I think it is kind of silly to have to tick a checkbox where I claim not to be a robot.

–

I must have been living under a rock the past year. I just recently found out that Google have an invisible version of their reCAPTCHA service, which was announced as early as march 2017!

To get started:

1) Register for an API key

2) Include something similar to the following in your html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
    function onSubmit(token) {
        document.getElementById("login-form").submit();
    }
</script>
...
<form id="login-form" ...>
    ...
    <button class="g-recaptcha"
            data-sitekey="{Insert API key here}"
            data-callback="onSubmit">
        ...
    </button>
</form>

3) Validate the posted form parameter g-recaptcha-response service side by making a HTTP POST to https://www.google.com/recaptcha/api/siteverify with the query parameters ?secret={API secret}&response={g-recaptcha-response}&remoteip={Remote user IP}.

The invisible reCAPTCHA is in my opinion a truly incredible service! Read more about it in the official docs, or try the demo.