如何使用隐形验证码保护jquery按钮？

php javascript jquery recaptcha

2022-08-31 01:18:01

我想保护我的jquery按钮免受机器人的侵害，而不会惹恼用户，所以我想添加谷歌的隐形验证码。然而，实现并不像我那么容易，我似乎做不到。如果有人能告诉我它是如何完成的，那就太好了。PS：我正在以wordpress主题为主题。

这是文档：

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

创建隐形验证码：

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

这就是我所拥有的：

网页：

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

阿贾克斯.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

您可以使用WordPress插件的隐形reCaptcha轻松完成它，如果您认为从头开始编码对您来说很复杂。您还可以深入研究插件的源代码以了解有关实现的想法。

此插件具有用于自定义使用的操作和过滤器，这些操作和过滤器记录在插件主页上。

答案 2

我继续尝试使用reCaptcha。

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

网页：

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