How to protect jquery button with Invisible reCaptcha? WordPress

• SOLVED

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. PS: I am doing this on a wordpress theme.

It's worth mentioning that i'm already using a recpatcha plugin (wp-recaptcha-integration) which i cannot remove since i am using it to add regular captcha to custom ajax login forms of my theme (this was done by a dev months ago).

Because of this plugin, this code is already present on single post:
<script src="https://www.google.com/recaptcha/api.js?onload=wp_recaptchaLoadCallback&#038;render=explicit" async defer></script>

And the "Site Key" and "Secret Key" are already set on the plugin interface so you can grab them from there: Plugin info:
https://wordpress.org/plugins/wp-recaptcha-integration/

Official invisible re-captcha documentation:
https://developers.google.com/recaptcha/docs/invisible

Create invisible recaptcha keys:
https://www.google.com/recaptcha/admin#beta

And this is what i have:

HTML single post template:

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

JS on footer:

<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 (retrieves custom field, using ACF but you can use the_meta for testing without it)

<?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);

Answers (2)

2017-02-13

Francisco Javier Carazo Gil answers:

Ok, so what you want really is protect an AJAX call using your captcha.

I am going to see how it can be done.

---

Francisco Javier Carazo Gil comments:

Have you tried it?

var response = grecaptcha.getResponse();

if(response.length == 0)
//reCaptcha not verified

else
//reCaptch verified

---

User161508 comments:

Yes i think so, i probably used the wrong terms.
I want to implement google invisible recaptcha so bots can't retrieve the content.
I thought not having the content on the source code was enough but apparently it isn't so i need recaptcha.

---

User161508 comments:

Where exactly would it go?

---

Francisco Javier Carazo Gil comments:

But what I don't understand is: if you have a invisble recatpcha, how human users are going to do it?

---

Francisco Javier Carazo Gil comments:

Could you show me what have you done? The link to this form.

---

User161508 comments:

humans don't have to do it.

---

Francisco Javier Carazo Gil comments:

There is a conceptual problem.

If you create a captcha only for bots, captcha is not the solution. captcha should be filled by humans and cannot be filled by bots.

How will it work?

What you need is a honeypot: https://github.com/rajeshvaya/jquery.honeypot something like it.

2017-02-13

Arnav Joy answers:

can you please give me url of your site ?

---

Arnav Joy comments:

you have not used code to show google recaptcha like <div class="g-recaptcha" data-sitekey="your_sitekey"></div> and on form submit you need to check whether this code is correct or not
like
// code on form submit
var captcha_response = grecaptcha.getResponse();
if(captcha_response.length == 0)
{
// Captcha is not Passed
return false;
}
else
{
// Captcha is Passed
return true;
}