I want to protect my jquery button from bots without annoying the users, so i thought of adding google's invisible recaptcha to it. However implementation isn't as easy as i though and i can't seem to do it. If anyone can show me how it's done it would be great. PS: I am doing this on a wordpress theme.

This is the documentation:

Create invisible recaptcha:

And this is what i have:

HTML:

<button class="acf-get-content-button">Show Link</button>
<div class="fa" id="acf-content-wrapper" data-id="<?php echo $post_id; ?>"></div>

JS:

<script>
(function($) {
  $('.acf-get-content-button').click(function(e) {
    e.preventDefault();
    $('.fa').addClass('fa-cog fa-spin fa-4x');
    var $contentWrapper = $('#acf-content-wrapper');
    var postId = $contentWrapper.data('id');

    $.ajax({
        url: "/public/ajax.php",
        type: "POST",
        data: {
          'post_id': postId
        },
      })
      .done(function(data) {
        $('.fa').removeClass('fa-cog fa-spin fa-4x');
        $contentWrapper.append(data);
        $('.acf-get-content-button').removeClass().addClass('.acf-get-content-button')
      });
  });
  $('.acf-get-content-button').mouseup(function() {
    if (event.which == 1) {
      $(".acf-get-content-button").hide();
    }
  });
})(jQuery);
</script>

ajax.php

<?php
define('WP_USE_THEMES', false);
require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-load.php' );
global $post;
$post_id = $_REQUEST["post_id"];
$content = get_field( 'ebook_link_pdf', $post_id );
echo ($content);

I want to protect my jquery button from bots without annoying the users, so i thought of adding google's invisible recaptcha to it. However implementation isn't as easy as i though and i can't seem to do it. If anyone can show me how it's done it would be great. PS: I am doing this on a wordpress theme.

This is the documentation:

https://developers.google./recaptcha/docs/invisible

Create invisible recaptcha:

https://www.google./recaptcha/admin#beta

And this is what i have:

HTML:

<button class="acf-get-content-button">Show Link</button>
<div class="fa" id="acf-content-wrapper" data-id="<?php echo $post_id; ?>"></div>

JS:

<script>
(function($) {
  $('.acf-get-content-button').click(function(e) {
    e.preventDefault();
    $('.fa').addClass('fa-cog fa-spin fa-4x');
    var $contentWrapper = $('#acf-content-wrapper');
    var postId = $contentWrapper.data('id');

    $.ajax({
        url: "/public/ajax.php",
        type: "POST",
        data: {
          'post_id': postId
        },
      })
      .done(function(data) {
        $('.fa').removeClass('fa-cog fa-spin fa-4x');
        $contentWrapper.append(data);
        $('.acf-get-content-button').removeClass().addClass('.acf-get-content-button')
      });
  });
  $('.acf-get-content-button').mouseup(function() {
    if (event.which == 1) {
      $(".acf-get-content-button").hide();
    }
  });
})(jQuery);
</script>

ajax.php

<?php
define('WP_USE_THEMES', false);
require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-load.php' );
global $post;
$post_id = $_REQUEST["post_id"];
$content = get_field( 'ebook_link_pdf', $post_id );
echo ($content);

• javascript
• php
• jquery
• recaptcha

• You should be using nonce with ajax in wordpress, that would certainly help with bots. – Solomon Closson Commented Feb 20, 2017 at 4:43

2 Answers 2

You can use Invisible reCaptcha for WordPress plugin to do it easily if you think coding from scratch is plicated for you. You can also dig into the source code of the plugin to get an idea about the implementation.

This plugin has actions and filters for custom use and these are documented on plugin homepage.

I went ahead to experiment with reCaptcha.

Turns out according to the API, you could use the grecaptcha.getResponse method to submit to your AJAX call. (But Note that this reCaptcha API is still in beta and could change...) Here is a short example:

HTML:

<div id="test-captcha" class="g-recaptcha" data-sitekey=[Your site key]></div>
<button id="load" onclick="go();">Load something</button>

Javascript:

function go()
{
    $.ajax({
        url: "/captchatest.php",
        type: "POST",
        data: {
            'g-recaptcha-response': grecaptcha.getResponse()
        }
    }).done(function(data) {
        alert(data);
    });
}

captchatest.php

<?php
//Used http://stackoverflow./a/6609181/7344257
function do_post_request($url, $data)
{
    // use key 'http' even if you send the request to https://...
    $options = array(
            'http' => array(
                    'header'    => "Content-type: application/x-www-form-urlencoded\r\n",
                    'method'    => 'POST',
                    'content' => http_build_query($data)
            )
    );
    $context    = stream_context_create($options);
    $result = file_get_contents($url, false, $context);
    if ($result === FALSE) { /* Handle error */ }
    return $result;
}

$error = "";
if ($_SERVER["REQUEST_METHOD"] === "POST")
{
    if (!isset($_POST['g-recaptcha-response']))
    {
        echo "Please do reCaptcha";
        exit(0);
    }

    $data = array("secret" => "6LeUGhYUAAAAABNS5OtOc9vonTlyrtgcQ5VdI7cV", 
                "response" => $_POST['g-recaptcha-response'], 
                "remoteip" => $_SERVER["REMOTE_ADDR"] //This is optional.
    );
    $resp = json_decode(do_post_request("https://www.google./recaptcha/api/siteverify", $data));
    if (!$resp->success)
    {
        //use $resp->error-codes to debug error.
        echo "Invalid reCaptcha";
        exit(0);
    }
    echo "Received secret code.";
    exit(0);
}
?>

I wasn't sure if you could use cURL. So I decided to just stick with the basic PHP code. You would also have to format the errors, but I think you should get the point.