it-swarm.com.de

So überprüfen Sie Google reCaptcha im Formular "Senden"

Kürzlich hat Google die reCaptcha-API komplett überarbeitet und auf ein einziges Kontrollkästchen vereinfacht.

reCaptcha

Das Problem ist, ich kann ein Formular mit dem enthaltenen reCaptcha senden, ohne es zu überprüfen, und das Formular ignoriert das reCaptcha.

Früher mussten Sie das Formular mit dem privaten Schlüssel usw. an eine PHP Datei senden, aber das wird im Entwicklerhandbuch nicht erwähnt. Ich habe keine Ahnung, wie das Formular überprüft werden soll, um sicherzustellen, dass das neue reCaptcha vom Benutzer ausgefüllt wurde.

Fehlt mir etwas? Ist das PHP Datei mit dem privaten Schlüssel noch erforderlich?

Alles was ich für das reCaptcha habe, ist:

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

Wenn Sie prüfen möchten, ob der Benutzer auf das Kontrollkästchen I'm not a robot geklickt hat, können Sie die Funktion .getResponse() der reCaptcha-API verwenden.

Es wird eine leere Zeichenfolge zurückgegeben, falls der Benutzer sich nicht selbst überprüft hat.

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

Falls der Benutzer sich selbst bestätigt hat, wird die Antwort sehr lang sein.

Mehr über die API finden Sie auf dieser Seite: 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;
}

Setze dies in eine Funktion. Rufen Sie diese Funktion beim Senden auf ... #html_element ist mein leeres div.

13
Hello Universe

Sie können die Antwort auf drei Arten überprüfen, wie in der Google reCAPTCHA-Dokumentation beschrieben:

  1. g-recaptcha-response: Wenn der Benutzer das Kontrollkästchen aktiviert hat (Ich bin kein Roboter), wird ein Feld mit der ID g-recaptcha-response in Ihrem HTML-Code ausgefüllt.
    Sie können nun den Wert dieses Feldes verwenden, um zu wissen, ob der Benutzer ein Bot ist oder nicht, und verwenden Sie dazu die folgenden Zeilen: -

    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. Bevor Sie Ihr Formular absenden, können Sie wie folgt einen Anruf tätigen: -

    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. Sie können Ihren reCAPTCHA wie folgt anzeigen: -

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

    Definieren Sie dann die Funktion in Ihrem JavaScript, mit dem Sie auch Ihr Formular absenden können.

    function doSomething() { alert(1); }
    

    Sobald das Kontrollkästchen (Ich bin kein Roboter) aktiviert ist, erhalten Sie einen Rückruf für den definierten Rückruf, in Ihrem Fall doSomething.

12
the_D

Aus UX-Sicht kann es hilfreich sein, den Benutzer sichtbar mitzuteilen, wann er das Formular senden kann - entweder durch Aktivieren einer deaktivierten Schaltfläche oder durch einfaches Aktivieren der Schaltfläche.

Hier ist ein einfaches Beispiel ...

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

Versuchen Sie diesen Link: https://github.com/google/ReCAPTCHA/tree/master/php

Am Ende dieser Seite befindet sich ein Link zu dieser Seite: https://developers.google.com/recaptcha/intro

Ein Problem, bei dem ich aufkam, dass diese beiden Dateien nicht richtig funktionieren, war meine php.ini-Datei für die Website. Stellen Sie sicher, dass diese Eigenschaft wie folgt ordnungsgemäß eingerichtet ist: Allow_url_fopen = Ein

2
Matt Zachary

wenn Sie JavaScript verwenden, funktioniert es für mich

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

2

Stellen Sie sicher, dass Google reCaptcha gültig ist oder nicht, nachdem das Formular gesendet wurde

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

Sie können zunächst auf der Frontend-Seite überprüfen, ob das Kontrollkästchen markiert ist:

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

Und überprüfen Sie auf der Serverseite die erhaltene Antwort mithilfe der 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!";
    }

Für weitere Informationen besuchen Sie Google docs .

1
Hatef
var googleResponse = $('#g-recaptcha-response').val();

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

    return false;
}
1
//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