How does this checkbox recaptcha work and how can I use it?

Solution 1:

This entry does not answer the original question, however it helps to implement a similar solution. As @IanM said, the checkbox recaptcha is in beta phase and it can't be used without invitation.

IMPORTANT EDIT Google introduced the new reCAPTCHA

• Google Online Security blog: Are you a robot? Introducing “No CAPTCHA reCAPTCHA”
• Google reCAPTCHA: Introducing the new reCAPTCHA!

This is a JavaScript based CAPTCHA.

Since most spambots do not execute JavaScript and can not identify the correlation between the displayed text and the DOM or required actions they can not click on the checkbox.

Please note that there is no checkbox at all, it is just a div element with some CSS styling. Spambots are trying to fill the form input elements, but there is no input in the CAPTCHA. The check mark is just another div (css class).

When you click on the box an ajax request notifies the server that the div was clicked and the server stores this information in a temporary storage (marks the token: this token was activated by a human). When you submit the form, a hidden field sends the token which was activated, then when the server validates the form information it will recognize that the token was activated. If the token is not activated, the form will be invalidated.

The steps in bullet points:

• Generate a unique identifier and add it to the form with a hidden input
• Render a checkbox on the site (without using the <input> element, possibly using <div>) and add the previously generated identifier to it (you can use the html5 data-* attributes)
• When the user clicks on the checkbox, send an ajax request to the server and validate the CAPTCHA, if it is valid mark it as in use. (Show the result - identifier is OK/not OK - to the user)
• When the user sends the form, the form's data contains the identifier. Check it once more, it should exist and it should be in in use state.
• If all validations are passed, the form's data is ready to use/process

You can bind the identifier to the user's session, IP address, and/or you can use time limits to improve security.

NOTE This kind of CAPTCHA only works when the JavaScript is enabled!

NOTE (edit 1) As @crazypotato stated, there are some automation tools, which can execute JavaScript, these tools also capable to send the proper AJAX request and fire the Click event on the checkbox div.

NOTE (edit 2) Please note that a script written to specifically one site or to break one type of captcha will got through sooner or later. There is no ultimate protection, you can only make the bots (or their developers) work harder.

NOTE (edit 3) The steps and the description in this answer only contains some basic information about this type of captcha, you always have to add additional validations and security steps to make it more secure. For example, Google noCaptcha systematically fires a standard reCaptcha after 3 "div clicks".

Solution 2:

This is a beta API for reCAPTCHA. I gather this from the source of their JS API: https://www.google.com/recaptcha/api.js referencing "API2". And I also found this: http://jaswsinc.com/recaptcha-ads/ (archived) Apparently they did an invite-only beta of their "no CAPTCHA reCAPTCHA" So.... You probably won't be able to make it work on your site, yet. I can't find any information on opting into the beta, but if you search for "No CAPTCHA reCAPTCHA beta" you can see a number of people that have mentioned getting the email from Google for them to join.

If you find a place to get into the beta, please share! Otherwise it looks like public release is coming in 2015...

Solution 3:

Here is my code running without problem in PHP:

Client Side:

<div class="g-recaptcha" data-sitekey="PUBLIC_KEY"></div>

Server Side:

if (isset($_POST['g-recaptcha-response'])) {
    $captcha = $_POST['g-recaptcha-response'];
    $privatekey = "SECRET_KEY";
    $url = 'https://www.google.com/recaptcha/api/siteverify';
    $data = array(
        'secret' => $privatekey,
        'response' => $captcha,
        'remoteip' => $_SERVER['REMOTE_ADDR']
    );

    $curlConfig = array(
        CURLOPT_URL => $url,
        CURLOPT_POST => true,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_POSTFIELDS => $data
    );

    $ch = curl_init();
    curl_setopt_array($ch, $curlConfig);
    $response = curl_exec($ch);
    curl_close($ch);
}

$jsonResponse = json_decode($response);

if ($jsonResponse->success == "true")
    doSomething();
else
    doSomeOtherThing();

:)

Solution 4:

I came here in my search, did not see an answer, and so I kept searching.

After my search, this window was still open, so I am updating this post with my findings.

Here is where you can learn about reCAPTCHA:

http://scraping.pro/no-captcha-recaptcha-challenge/

Basically, though, you add this to your web page:

<script src="https://www.google.com/recaptcha/api.js" >;
<form method="post">
    <div class="g-recaptcha" data-sitekey="[site key issued by google]"></div>
    <input value="submit" type="submit" />
</form>

To get your reCAPTCHA keys, go to this Google site:

https://www.google.com/recaptcha/intro/index.html

Once you have your keys using the link above, you can get deeper into the coding of this using the following Google information:

https://developers.google.com/recaptcha/

NOTE:

From the Google documentation:

The script must be loaded using the HTTPS protocol and can be included from any point on the page without restriction.

Here is an example of how I got it to work:

<html>
<head>
    <title>Contact</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
    var onloadCallback = function () {
        grecaptcha.render('dvCaptcha', {
            'sitekey': '<%=ReCaptcha_Key %>',
            'callback': function (response) {
                $.ajax({
                    type: "POST",
                    url: "CS.aspx/VerifyCaptcha",
                    data: "{response: '" + response + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        var captchaResponse = jQuery.parseJSON(r.d);
                        if (captchaResponse.success) {
                            $("[id*=txtCaptcha]").val(captchaResponse.success);
                            $("[id*=lblAlarm]").hide();
                        } else {
                            $("[id*=txtCaptcha]").val("");
                            $("[id*=lblAlarm]").show();
                            var error = captchaResponse["error-codes"][0];
                            $("[id*=lblAlarm]").html("RECaptcha error. " + error);
                        }
                    }
                });
            }
        });
    };
    </script>
</head>
<body>
    <form action="?" method="POST">
        <div id="dvCaptcha" class="g-recaptcha" data-sitekey="[site key issued by google]"></div>
        <br />
        <asp:Button ID="btnSubmit" runat="Server" Text="Send" OnClick="btnSubmit_Click" />
        <asp:Label ID="lblAlarm" runat="server" ForeColor="Red"></asp:Label>
    </form>
</body>
</html>

If you need to validate in the ASP.NET code-behind, simply verify the "g-recaptcha-response" control is filled in:

protected static string ReCaptcha_Key, ReCaptcha_Secret;

protected void btnSubmit_Click(object sender, EventArgs e)
{
    if (!String.IsNullOrEmpty(Request.Form["g-recaptcha-response"]))
    {
        // other code
    } else
    {
       lblAlarm.Text = "reCAPTCHA failed.";
    }
}

Hopefully, some of you find this useful.

Solution 5:

Thank you all for your contribution to this thread, it's great to see so many people interested in the new recaptcha tool.

I couldn't find a .net implementation of it, so have built a simple web forms control, that you can find here https://github.com/pnmcosta/recaptchav2dotnet