Comment vérifier en js que l'utilisateur a coché la case dans Google recaptcha?

J'ai ajouté ce qui suit avant la fin de la tête

<script src='https://www.google.com/recaptcha/api.js'></script>

J'ai ajouté ce avant la fin de la forme

<div class="g-recaptcha" data-sitekey="== xxxxxx =="></div>

Je peux voir le recaptcha similaire à https://developers.google.com/recaptcha/

Cependant, quand l'utilisateur appuie sur des données sans en cochant la case, les données sont envoyées. Est-il un autre code que j'ai besoin d'ajouter de vérifier si l'utilisateur a appuyé sur la case à cocher? Je l'espère en js?

  • avez-vous lu cette page: developers.google.com/recaptcha/docs/verify
  • yeep.. cant semblent comprendre comment obtenir ce travail si
  • vous devriez demander à votre serveur d'arrière-plan. il n'est pas très prudent pour le navigateur de le faire seul.
  • C'est très bien. Comment demander à ce que de front-end peut-être à l'aide de jquery?
InformationsquelleAutor Hello Universe | 2015-02-23
  1. 172

    Google a un rappel option pour quand la case est cochée.

    Ajouter à votre élément de formulaire:

    data-callback="XXX"

    Exemple:

    <div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="== xxxxxx =="></div>

    Et de désactiver l'attribut de votre bouton soumettre.

    Exemple:

    <button id="submitBtn" disabled>Submit</button>

    Alors une de créer une fonction de rappel et d'écrire le code que vous avez besoin.

    Exemple:

    function recaptchaCallback() {
    $('#submitBtn').removeAttr('disabled');
};
    • sera-ce travail si la page a deux codes captcha ?
    • Éventuellement, vous aurez besoin d'ajouter des fonctionnalités à vérifier si les deux rappels de là où il est appelé avant d'activer le bouton "soumettre".
    • Le point d'avoir captcha est pour éviter le script d'accès(Bot), Mais l'utilisation de ce genre n'apportent aucun avantage, car il peut être contourné par l'exécution de $('#submitBtn').removeAttr('disabled'); dans les scripts.
    • C'est juste pour prévenir de l'envoi, il n'est pas censé ne pas vérifier côté serveur comme d'habitude.
    • Comment lutter contre problème de délai d'attente ? Si quelqu'un vérifie le reCaptcha et puis ne pas soumettre le formulaire pour quelques minutes, puis reCaptcha expirera, mais l'utilisateur reste en mesure de soumettre le formulaire ..!
    • href="https://developers.google.com/recaptcha/docs/display" >data-expiré-callback
    • Juste un heads-up à la place de la fonction recaptchaCallback() à l'extérieur du document.prêt de sorte qu'il peut être accessible par le captcha de contrôle. Sinon, vous recevrez une console.journal d'erreur comme "ReCAPTCHA ne pouvais pas trouver fournies par l'utilisateur de la fonction:".
    • Cette solution appelle simplement une fonction lorsque le captcha est résolu, mais ne fournit pas de fonction pour vérifier si le captcha est résolu.
    • La deuxième réponse par Olafur doit être accepté de répondre. Pour 2 raisons. 1) C'est beaucoup plus de travail. 2) la tenue de l'expiration des validations...
    • Génie! Je voulais juste vous remercier 🙂

    InformationsquelleAutor slinky2000
  2. 57

    Vous pouvez aussi appeler le grecaptcha objet de vérifier. grecaptcha.getResponse(); est vide lorsque cette option est décochée et a le code de vérification lorsque la case est cochée.

    grecaptcha.getResponse().length === 0 lorsque cette option est décochée

    function isCaptchaChecked() {
  return grecaptcha && grecaptcha.getResponse().length !== 0;
}

if (isCaptchaChecked()) {
  //...
}
    • Mais, comment obtenir grecaptcha.getResponse()?
    • Il est chargé dès que vous chargez de google recaptcha. Partie de l'ensemble
    • j'ai essayé, mais pas de travail, console de débogage dit>> "Uncaught ReferenceError: grecaptcha n'est pas défini"
    • le script doit charger recaptcha d'abord, essayez de le faire async ou avec setTimeout
    • var isCaptchaChecked = (grecaptcha && grecaptcha.getResponse().length !== 0);
    • En effet, les réponses de l'OP question. La réponse choisie appelle simplement une fonction lorsque le captcha est résolu, mais ne fournit pas de fonction pour vérifier si le captcha est résolu.

    InformationsquelleAutor Olafur Tryggvason
  3. 6

    Pour vérifier si google recaptcha est cochée ou pas, vous pouvez le faire par le code suivant : 

    <script>

if(grecaptcha && grecaptcha.getResponse().length > 0)
{
     //the recaptcha is checked
     //Do what you want here
     alert('Well, recaptcha is checked !');
}
else
{
    //The recaptcha is not cheched
    //You can display an error message here
    alert('Oops, you have to check the recaptcha !');
}

</script>
    InformationsquelleAutor MUSTAPHA GHLISSI
  4. 2

    Laisser le navigateur de faire le travail pour vous! (basé sur slinky2000 réponse)

    remarque: ce n'est que pour empêcher l'envoi d'un "accidentellement" décochée recaptcha. Vous devez toujours vérifier le recaptcha sur le côté serveur parce qu'un bot n'a pas de soins ...

    Ajouter un invisible balise input avec required=true attribut juste en dessous de la div.g-recaptcha.

    <input id='recaptcha_check_empty' required tabindex='-1',
style='width:50px; height:0; opacity:0; pointer-events:none; 
position:absolute; 
bottom:0;'>

    Joindre à la fois la largeur d'un div avec position=relative; au point de la bottom:0; ci-dessus vers le bas de recaptcha.

    Maintenant, le Navigateur demande gentiment de remplir ce champ pointant vers le recapcha.

    Maintenant nous avons besoin de la fonction de rappel: 

    <div class="g-recaptcha" data-callback="recaptchaCallback" ...

    et

    function recaptchaCallback() { 
    $('#recaptcha_check_empty').val(1);
}
    InformationsquelleAutor halfbit
  5. 1

    Pour vérifier si google recaptcha v2 est cochée ou pas, vous pouvez le faire par le code suivant : 

    var checkCaptch = false;
     var verifyCallback = function(response) {
        if (response == "") {
             checkCaptch = false;
         }
         else {
             checkCaptch = true;
         }
     };
     $(document).ready(function() {
         $("#btnSubmit").click(function() {
             if (checkCaptch && grecaptcha.getResponse()!="") {
                  //Write your success code here
             }
         });
     })
    InformationsquelleAutor Manish Vadher