So validieren Sie Google reCaptcha auf dem Formular Übermitteln Sie

Question

Vor kurzem hat Google seine reCaptcha API komplett überarbeitet und auf ein einziges Kontrollkästchen vereinfacht.

Das Problem ist, kann ich ein Formular mit der reCaptcha ohne sie und die Form Überprüfung enthalten die reCaptcha ignorieren.

Bevor Sie das Formular an eine PHP-Datei mit dem privaten Schlüssel senden mussten, aber ich sehe keine Erwähnung davon in ihrem Entwicklerhandbuch. Ich habe keine Ahnung, wie man das Formular validiert, um sicher zu sein, dass das neue reCaptcha vom Benutzer gefüllt wurde.

Fehle ich etwas? Ist die PHP-Datei mit dem privaten Schlüssel noch erforderlich?

Alles, was ich für die reCaptcha haben so weit ist:

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

Answer 1

Wenn Sie möchten, zu überprüfen, ob der Benutzer auf dem I'm not a robot Checkbox geklickt haben, können Sie verwenden, um die .getResponse() Funktion durch die reCaptcha API bereitgestellt.

Es wird eine leere Zeichenfolge in Fall kehrt der Benutzer nicht selbst bestätigen hat, so etwas wie dieses:

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

Falls der Nutzer selbst bestätigt hat, wird die Antwort eine sehr lange Zeichenfolge sein. reCaptcha Javascript API

Answer 2

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

Ein Link zu dieser Seite befindet sich ganz unten auf dieser Seite gepostet: https://developers.google.com/recaptcha/intro

Ein Problem, das ich kam, dass diese beiden Dateien nicht korrekt funktionierte, war mit meiner php.ini-Datei für die Website. Stellen Sie sicher, dass diese Eigenschaft korrekt eingerichtet ist, wie folgt: allow_url_fopen = On

Answer 3

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

Setzen Sie dieses in einer Funktion:

Mehr über die API finden Sie auf dieser Seite zu finden. Rufen Sie diese Funktion beim Senden auf ... #html_element ist meine leere div.

Answer 4

Bei der Verwendung von Google mit DLL Datei können wir in C# validieren.

RecaptchaControl1.Validate(); 
bool Varify = RecaptchaControl1.IsValid; 
if (Varify) 
{ 
    // Pice of code after validation. 
} 

Seine Arbeit für mich.

Answer 5

Sie können die Antwort auf 3 Arten überprüfen gemäß der Google reCAPTCHA documentation:

1. g-recaptcha-response: Sobald Benutzer das Kontrollkästchen überprüft (Ich bin kein Roboter), ein Feld mit der ID g-recaptcha-response in Ihrem HTML bevölkert wird.
   Sie können nun den Wert dieses Feldes zu wissen, verwendet werden, wenn der Benutzer ein Bot ist oder nicht, die unter mentioed Linien mit: -

   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 auf Ihrem Formular senden, können Sie eine machen wie folgt nennen: -

   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 Ihre reCAPTCHA anzeigen kann wie folgt dar: -

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

   Und dann die Funkti definieren auf Ihrem JavaScript, das auch verwendet werden kann, um Ihr Formular zu senden.

   function doSomething() { alert(1); } 
   

   Nun, wenn das Kontrollkästchen (Ich bin kein Roboter) aktiviert ist, erhalten Sie einen Rückruf an den definierten Rückruf erhalten, die doSomething in Ihrem Fall ist.

Answer 6

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

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

    return false; 
} 

Answer 7

Sie können zunächst im Frontend Seite überprüfen, ob das Kontrollkästchen markiert:

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 dann in der Server-Seite überprüft die empfangenen Antwort mit 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 können Sie Google docs besuchen.

Answer 8

Aus UX-Sicht kann es hilfreich sein, den Benutzer sichtbar zu informieren, wann er das Formular abschicken kann - entweder durch Aktivieren einer deaktivierten Schaltfläche oder durch einfaches Anzeigen 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>