Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to protect jquery button with Invisible reCaptcha?

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);
like image 755
Michael Rogers Avatar asked Feb 11 '17 08:02

Michael Rogers


People also ask

How do I add the invisible reCAPTCHA widget to my website?

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.

How to programmatically invoke a reCAPTCHA challenge?

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.

How do I call the grecaptcha callback from the JavaScript API?

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.

What is a callback function in reCAPTCHA?

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.


1 Answers

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.

like image 117
Khorshed Alam Avatar answered Sep 23 '22 00:09

Khorshed Alam