首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何用隐形reCaptcha保护jquery按钮?

如何用隐形reCaptcha保护jquery按钮?
EN

Stack Overflow用户
提问于 2017-02-11 16:47:43
回答 2查看 1.7K关注 0票数 16

我想在不惹恼用户的情况下保护我的jquery按钮不被机器人攻击,所以我想在其中添加google的不可见的recaptcha。然而,实现并不像我想的那么简单,而且我似乎也做不到。如果有人能向我展示它是如何做到的,那就太好了。附言:我正在做一个wordpress主题。

以下是文档:

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

创建不可见的recaptcha:

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

这就是我所拥有的:

HTML:

代码语言:javascript
复制
<button class="acf-get-content-button">Show Link</button>
<div class="fa" id="acf-content-wrapper" data-id="<?php echo $post_id; ?>"></div>

JS:

代码语言:javascript
复制
<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

代码语言:javascript
复制
<?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);
EN

回答 2

Stack Overflow用户

发布于 2017-02-13 19:43:42

如果你认为从头开始编写代码对你来说很复杂,你可以使用Invisible reCaptcha for WordPress插件很容易做到这一点。您还可以深入研究该插件的源代码,以了解其实现方式。

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

票数 6
EN

Stack Overflow用户

发布于 2017-02-20 11:09:28

我继续用reCaptcha做实验。

根据API,您可以使用grecaptcha.getResponse方法提交给AJAX调用。(但请注意,此reCaptcha应用程序接口仍处于测试阶段,可能会发生变化...)下面是一个简短的示例:

HTML:

代码语言:javascript
复制
<div id="test-captcha" class="g-recaptcha" data-sitekey=[Your site key]></div>
<button id="load" onclick="go();">Load something</button>

Javascript:

代码语言:javascript
复制
function go()
{
    $.ajax({
        url: "/captchatest.php",
        type: "POST",
        data: {
            'g-recaptcha-response': grecaptcha.getResponse()
        }
    }).done(function(data) {
        alert(data);
    });
}

captchatest.php

代码语言:javascript
复制
<?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代码。您还必须格式化错误,但我认为您应该明白这一点。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42173990

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档