Hoe u Google reCaptcha valideert op formulierverzending

Onlangs heeft Google hun reCaptcha API volledig herzien en vereenvoudigd tot één enkel selectievakje.

Het probleem is dat ik een formulier kan indienen met de reCaptcha erbij zonder het te controleren en het formulier zal de reCaptcha negeren.

Vroeger moest je het formulier naar een PHP-bestand sturen met de privésleutel et al, maar daar zie ik niets over terug in hun Developer’s Guide. Ik heb geen idee hoe ik het formulier moet valideren om er zeker van te zijn dat de nieuwe reCaptcha door de gebruiker is ingevuld.

Mis ik iets? Is dat PHP-bestand met de privésleutel nog steeds vereist?

Alles wat ik tot nu toe heb voor de reCaptcha is:

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

Antwoord 1, autoriteit 100%

Als u wilt controleren of de gebruiker op het selectievakje I'm not a robotheeft geklikt, kunt u de functie .getResponse()gebruiken die wordt geleverd door de reCaptcha-API .

Het zal een lege string teruggeven in het geval dat de gebruiker zichzelf niet heeft gevalideerd, zoiets als dit:

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

In het geval dat de gebruiker zichzelf heeft gevalideerd, zal het antwoord een zeer lange reeks zijn.

Meer over de API is te vinden op deze pagina: reCaptcha Javascript API

Antwoord 2, autoriteit 24%

Je kunt het antwoord op drie manieren verifiëren volgens de Google reCAPTCHA-documentatie:

1. g-recaptcha-response: zodra de gebruiker het selectievakje aanvinkt (ik ben geen robot), wordt een veld met id g-recaptcha-responseingevuld in uw HTML.
   U kunt nu de waarde van dit veld gebruiken om te weten of de gebruiker een bot is of niet, met behulp van de onderstaande regels:-

   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. Voordat u uw formulier gaat verzenden, kunt u als volgt bellen:-

   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. U kunt uw reCAPTCHA als volgt weergeven:-

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

   En definieer vervolgens de functie in uw JavaScript, die ook kan worden gebruikt om uw formulier in te dienen.

   function doSomething() { alert(1); }
   

   Zodra het selectievakje (Ik ben geen robot) is aangevinkt, wordt u teruggebeld naar de gedefinieerde callback, wat in uw geval doSomethingis.

Antwoord 3, autoriteit 20%

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

Zet dit in een functie. Roep deze functie aan bij verzenden… #html_elementis mijn lege div.

Antwoord 4, autoriteit 18%

Vanuit een UX-perspectief kan het helpen om de gebruiker zichtbaar te laten weten wanneer ze kunnen doorgaan met het indienen van het formulier – door een uitgeschakelde knop in te schakelen of door de knop gewoon zichtbaar te maken.

Hier is een eenvoudig voorbeeld…

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

Antwoord 5, autoriteit 9%

als ik JavaScript gebruik, werkt het voor mij

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

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

   $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!";
    }