web-dev-qa-db-fra.com

Comment valider Google reCaptcha lors de l'envoi du formulaire

Récemment, Google a complètement repensé son API reCaptcha et l'a simplifiée en une simple case à cocher.

reCaptcha

Le problème est que je peux soumettre un formulaire avec le reCaptcha inclus sans le vérifier et le formulaire ignorera le reCaptcha.

Vous deviez auparavant envoyer le formulaire dans un fichier PHP avec la clé privée, etc., mais je ne vois aucune mention de cela dans leur Guide du développeur. Je ne sais pas comment valider le formulaire pour être sûr que le nouveau reCaptcha a été rempli par l'utilisateur.

Est-ce que je manque quelque chose? Ce fichier PHP avec la clé privée est-il toujours requis?

Tout ce que j'ai pour le reCaptcha jusqu'à présent, c'est:

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

Si vous souhaitez vérifier si l'utilisateur a coché la case I'm not a robot, vous pouvez utiliser la fonction .getResponse() fournie par l'API reCaptcha.

Il retournera une chaîne vide au cas où l'utilisateur ne se validerait pas, quelque chose comme ceci:

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

Dans le cas où l'utilisateur s'est validé, la réponse sera une très longue chaîne.

Vous trouverez plus d’informations sur l’API sur cette page: API Javascript reCaptcha

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

Mettez ceci dans une fonction. Appelez cette fonction sur submit ... #html_element est mon div vide.

13
Hello Universe

Vous pouvez vérifier la réponse de 3 manières différentes selon la Documentation Google reCAPTCHA :

  1. g-recaptcha-response: une fois que l'utilisateur a coché la case (je ne suis pas un robot), un champ portant l'identifiant g-recaptcha-response est renseigné dans votre code HTML.
    Vous pouvez maintenant utiliser la valeur de ce champ pour savoir si l'utilisateur est un bot ou non, en utilisant les lignes ci-dessous: -

    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. Avant de soumettre votre formulaire, vous pouvez appeler comme suit: -

    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. Vous pouvez afficher votre reCAPTCHA comme suit: -

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

    Et ensuite, définissez la fonction dans votre JavaScript, qui peut également être utilisé pour soumettre votre formulaire.

    function doSomething() { alert(1); }

    Maintenant, une fois la case à cocher (je ne suis pas un robot) cochée, vous obtiendrez un rappel au rappel défini, qui est doSomething dans votre cas.

12
the_D

Du point de vue de l'expérience utilisateur, il peut être utile d'indiquer clairement à l'utilisateur quand il peut soumettre le formulaire, soit en activant un bouton désactivé, soit simplement en le rendant visible.

Voici un exemple simple ...

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

Essayez ce lien: https://github.com/google/ReCAPTCHA/tree/master/php

Un lien vers cette page est affiché en bas de cette page: https://developers.google.com/recaptcha/intro

Un problème qui a empêché ces deux fichiers de fonctionner correctement a été rencontré avec mon fichier php.ini pour le site Web. Assurez-vous que cette propriété est correctement configurée, comme suit: Allow_url_fopen = On

2
Matt Zachary

en utilisant JavaScript cela fonctionnera pour moi

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

Vérifiez que Google reCaptcha est valide ou non après la soumission du formulaire.

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

Vous pouvez d’abord vérifier sur le côté frontal que la case à cocher est marquée:

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

Ensuite, côté serveur, vérifiez la réponse reçue à l'aide de l'API Google reCAPTCHA:

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

Pour plus d'informations, vous pouvez visiter Google Documents .

1
Hatef
//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