如何使用Invisible reCaptcha保护jquery按钮？

Question

我想在不烦扰用户的情况下保护我的jquery按钮免受机器人攻击,所以我想添加google的隐形recaptcha.然而实现并不像我那么容易,我似乎无法做到这一点.如果有人能告诉我它是如何完成的那就太棒了.PS:我在wordpress主题上这样做.

这是文档:

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

创建隐形recaptcha:

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

Answer 1

如果您认为从头开始编码对您来说很复杂,您可以使用Invisible reCaptcha for WordPress插件轻松完成.您还可以深入了解插件的源代码,以了解实现.

这个插件有自定义使用的动作和过滤器,这些都在插件主页上记录.

Answer 2

我继续尝试 reCaptcha。

事实证明，根据API，您可以使用该grecaptcha.getResponse方法提交 AJAX 调用。（但请注意，此 reCaptcha API 仍处于测试阶段，可能会发生变化...）以下是一个简短的示例：

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

验证码测试.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 代码。您还必须格式化错误，但我认为您应该明白这一点。