web-dev-qa-db-ja.com

フォーム送信でGoogle reCaptchaを検証する方法

最近、GoogleはreCaptcha APIを全面的に見直し、単一のチェックボックスに簡素化しました。

reCaptcha

問題は、reCaptchaをチェックせずに含めてフォームを送信すると、フォームがreCaptchaを無視することです。

フォームをプライベートキーなどを使用してPHPファイルに送信する必要がありますが、開発者ガイドにはそのことについての言及はありません。新しいreCaptchaがユーザーによって入力されたことを確認するためにフォームを検証する方法がわかりません。

何か不足していますか？秘密鍵を含むPHPファイルはまだ必要ですか？

これまでのところreCaptchaについては次のとおりです。

<div data-type="image" class="g-recaptcha" data-sitekey="My Public Key"></div>
phphtmlrecaptcha
47
Drew Kennedy

ユーザーがI'm not a robotチェックボックスをクリックしたかどうかを確認する場合は、reCaptcha APIが提供する.getResponse()関数を使用できます。

ユーザーが自分自身を検証しなかった場合、空の文字列を返します。次のようなものです。

if (grecaptcha.getResponse() == ""){
    alert("You can't proceed!");
} else {
    alert("Thank you");
}

ユーザーが自分自身を検証した場合、応答は非常に長い文字列になります。

APIの詳細については、次のページを参照してください。 reCaptcha Javascript API

62
Ali Bassam
var googleResponse = jQuery('#g-recaptcha-response').val();
if (!googleResponse) {
    $('<p style="color:red !important" class=error-captcha"><span class="glyphicon glyphicon-remove " ></span> Please fill up the captcha.</p>" ').insertAfter("#html_element");
    return false;
} else {            
    return true;
}

これを関数に入れます。送信時にこの関数を呼び出します... #html_elementは私の空のdivです。

14
Hello Universe

Google reCAPTCHAドキュメント に従って、3つの方法で応答を確認できます。

  1. g-recaptcha-response：ユーザーがチェックボックスをチェックすると（私はロボットではありません）、ID g-recaptcha-responseのフィールドがHTMLに入力されます。
    以下の記載行を使用して、このフィールドの値を使用して、ユーザーがボットかどうかを知ることができます。

    var captchResponse = $('#g-recaptcha-response').val();
if(captchResponse.length == 0 )
    //user has not yet checked the 'I am not a robot' checkbox
else 
    //user is a verified human and you are good to submit your form now

  2. フォームを送信する前に、次のように電話をかけることができます。

    var isCaptchaValidated = false;
var response = grecaptcha.getResponse();
if(response.length == 0) {
    isCaptchaValidated = false;
    toast('Please verify that you are a Human.');
} else {
    isCaptchaValidated = true;
}


if (isCaptchaValidated ) {
    //you can now submit your form
}

  3. 次のようにreCAPTCHAを表示できます。

    <div class="col s12 g-recaptcha" data-sitekey="YOUR_PRIVATE_KEY" data-callback='doSomething'></div>

    次に、JavaScriptで関数を定義します。これは、フォームの送信にも使用できます。

    function doSomething() { alert(1); }

    ここで、チェックボックス（私はロボットではありません）がチェックされると、定義済みのコールバックへのコールバックを取得します。これは、doSomethingです。

13
the_D

UXの観点からは、無効なボタンを有効にするか、単にボタンを表示することで、フォームの送信をいつ続行できるかをユーザーに視覚的に知らせることができます。

簡単な例を示します...

<form>
    <div class="g-recaptcha" data-sitekey="YOUR_PRIVATE_KEY" data-callback="recaptchaCallback"></div>
    <button type="submit" class="btn btn-default hidden" id="btnSubmit">Submit</button>
</form>

<script>
    function recaptchaCallback() {
        var btnSubmit = document.getElementById("btnSubmit");

        if ( btnSubmit.classList.contains("hidden") ) {
            btnSubmit.classList.remove("hidden");
            btnSubmitclassList.add("show");
        }
    }
</script>
11
Richard Nalezynski

javaScriptを使用するとき、それは私のために動作します

<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function submitUserForm() {
    var response = grecaptcha.getResponse();
    if(response.length == 0) {
        document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
        return false;
    }
    return true;
}
 
function verifyCaptcha() {
    document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>
<form method="post" onsubmit="return submitUserForm();">
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="verifyCaptcha"></div>
    <div id="g-recaptcha-error"></div>
    <input type="submit" name="submit" value="Submit" />
</form>
3
Tharindu Malshan

最初に、フロントエンド側でチェックボックスがマークされていることを確認できます。

    var recaptchaRes = grecaptcha.getResponse();
    var message = "";

    if(recaptchaRes.length == 0) {
        // You can return the message to user
        message = "Please complete the reCAPTCHA challenge!";
        return false;
    } else {
       // Add reCAPTCHA response to the POST
       form.recaptchaRes = recaptchaRes;
    }

次に、サーバー側で、Google reCAPTCHA APIを使用して受信した応答を確認します。

    $receivedRecaptcha = $_POST['recaptchaRes'];
    $verifiedRecaptcha = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$google_secret.'&response='.$receivedRecaptcha);

    $verResponseData = json_decode($verifiedRecaptcha);

    if(!$verResponseData->success)
    {
        return "reCAPTCHA is not valid; Please try again!";
    }

詳細については、 Google docs をご覧ください。

2
Hatef

このリンクを試してください： https://github.com/google/ReCAPTCHA/tree/master/php

このページへのリンクは、このページの一番下に投稿されています： https://developers.google.com/recaptcha/intro

これらの2つのファイルが正常に機能しなかった問題の1つは、Webサイトのphp.iniファイルの問題です。次のように、このプロパティが適切に設定されていることを確認してください。allow_url_fopen = On

2
Matt Zachary

フォームの送信後、Google reCaptchaが有効かどうかを確認します

if ($post['g-recaptcha-response']) {
      $captcha = $post['g-recaptcha-response'];
      $secretKey = 'type here private key';
      $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=" . $secretKey . "&response=" . $captcha);
        $responseKeys = json_decode($response, true);
        if (intval($responseKeys["success"]) !== 1) {
            return "failed";
        } else {
            return "success";
        }
    }
    else {
        return "failed";
    }
1
Shorabh
var googleResponse = $('#g-recaptcha-response').val();

if(googleResponse=='')
{   
    $("#texterr").html("<span>Please check reCaptcha to continue.</span>");

    return false;
}
1
Gorakh Nath Mehta
//validate
$receivedRecaptcha = $_POST['recaptchaRes'];
$google_secret =  "Yoursecretgooglepapikey";
$verifiedRecaptchaUrl = 'https://www.google.com/recaptcha/api/siteverify?secret='.$google_secret.'&response='.$receivedRecaptcha;
$handle = curl_init($verifiedRecaptchaUrl);
curl_setopt($handle,  CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($handle, CURLOPT_SSL_VERIFYPEER, false); // not safe but works
//curl_setopt($handle, CURLOPT_CAINFO, "./my_cert.pem"); // safe
$response = curl_exec($handle);
$httpCode = curl_getinfo($handle, CURLINFO_HTTP_CODE);
curl_close($handle);
if ($httpCode >= 200 && $httpCode < 300) {
  if (strlen($response) > 0) {
        $responseobj = json_decode($response);
        if(!$responseobj->success) {
            echo "reCAPTCHA is not valid. Please try again!";
            }
        else {
            echo "reCAPTCHA is valid.";
        }
    }
} else {
  echo "curl failed. http code is ".$httpCode;
}
0
Robot70