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.com/recaptcha/docs/invisible
Create invisible recaptcha:
https://www.google.com/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);
The easiest method for using the invisible reCAPTCHA widget on your page is to include the necessary JavaScript resource and add a few attributes to your html button.
Programmatically bind the challenge to a button or invoke the challenge. Deferring the binding can be achieved by specifying your onload callback function and adding parameters to the JavaScript resource. This works the same as the normal reCAPTCHA challenge. Programmatically invoke the challenge.
When your callback is executed, you can call the grecaptcha.render method from the JavaScript API. Your onload callback function must be defined before the reCAPTCHA API loads. To ensure there are no race conditions: Optional. The name of your callback function to be executed once all the dependencies have loaded. Optional.
The name of your callback function, executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry. Optional.
You can use Invisible reCaptcha for WordPress plugin to do it easily if you think coding from scratch is complicated 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With