Как защитить кнопку jquery с помощью Invisible reCaptcha?

Я хочу защитить свою jquery-кнопку от ботов, не раздражая пользователей, поэтому я подумал о добавлении к ней невидимой подсказки google. Однако реализация не так проста, как я, и я не могу это сделать. Если кто-нибудь может показать мне, как это было сделано, было бы здорово. PS: Я делаю это на тему wordpress.

Это документация:

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

Создайте невидимую подсказку:

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

И это то, что у меня есть:

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

Ответы

Ответ 1

Вы можете использовать плагин Invisible reCaptcha для WordPress, чтобы сделать это легко, если вы считаете, что кодирование с нуля вам сложно. Вы также можете вставить исходный код плагина, чтобы получить представление об этой реализации.

В этом плагине есть действия и фильтры для пользовательского использования, и они задокументированы на главной странице плагина.

Ответ 2

Я пошел экспериментировать с reCaptcha.

Оказывается в соответствии с API, вы можете использовать метод grecaptcha.getResponse для отправки на ваш вызов AJAX. (Но учтите, что этот API-интерфейс reCaptcha все еще находится в состоянии бета-версии и может меняться...) Вот краткий пример:

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.com/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.com/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);
}
?>

Я не был уверен, можно ли использовать cURL. Поэтому я решил просто придерживаться базового кода PHP. Вам также придется отформатировать ошибки, но я думаю, вы должны понять суть.