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

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.

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

This is the documentation:

这是文档:

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

Create invisible recaptcha:

创建隐形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);

2 个解决方案

#1

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.

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

This plugin has actions and filters for custom use and these are documented on plugin homepage.

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

#2

I went ahead to experiment with reCaptcha.

我继续尝试reCaptcha。

Turns out according to the API, you could use the grecaptcha.getResponse method to submit to your AJAX call. (But Note that this reCaptcha API is still in beta and could change...) Here is a short example:

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

captchatest.php

<?php
//Used http://*.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);
}
?>

I wasn't sure if you could use cURL. So I decided to just stick with the basic PHP code. You would also have to format the errors, but I think you should get the point.

我不确定你是否可以使用cURL。所以我决定坚持使用基本的PHP代码。您还必须格式化错误,但我认为您应该明白这一点。