2017-02-11 9 views
16

jqueryボタンをボットから保護したいのですが、ユーザーに迷惑をかけないようにするため、私はgoogleの目に見えないrecaptchaを追加することを考えました。しかし、実装は私と同じくらい簡単ではないし、私はそれを行うように見えることはできません。誰かが私にそれがどのように行われているかを示すことができれば、それは素晴らしいことでしょう。 PS:私はワードプレスのテーマでこれをやっています。Invisible reCaptchaでjqueryボタンを保護する方法は?

これはドキュメントです:

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

は見えないのreCAPTCHAを作成します。

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

そして、これは私が持っているものです。

HTML:

をの

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

ワードプレスのajaxでnonceを使用する必要があります。これは確かにボットに役立ちます。 –

答えて

6

ajax.phpあなたがゼロからコーディングはあなたのために複雑だと思う場合は、簡単にそれを行うにはInvisible reCaptcha for WordPressプラグインを使用することができます。また、プラグインのソースコードを掘り下げて、実装についてのアイデアを得ることもできます。

このプラグインには、カスタム使用のためのアクションとフィルタがあり、プラグインのホームページに記載されています。

+0

こんにちは、ありがとう。私は、私がフォームではなく単なるボタンであるという事実をどのように扱うのですか? –

3

私はreCaptchaを試してみました。

APIによれば、grecaptcha.getResponseメソッドを使用してAJAX呼び出しを送信することができます。

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

ここでは簡単な例である(しかし...このreCAPTCHAのAPIはまだベータ版であり、変更される可能性があることに注意してください)
<?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コードに固執することにしました。また、エラーをフォーマットする必要がありますが、私はあなたがポイントを得るべきだと思います。

関連する問題