Comment puis-je valider google reCAPTCHA v2 à l'aide de javascript / jQuery?

120

J'ai un formulaire de contact simple en aspx. Je souhaite valider le reCaptcha (côté client) avant de soumettre le formulaire. Veuillez aider.

Exemple de code:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Test Form</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
        <script>
            $("#cmdSubmit").click(function () {
                //need to validate the captcha
            });
        </script> 
    </head>
    <body>
        <form id="form1" runat="server">
            <label class="clsLabe">First Name<sup>*</sup></label><br />
            <input type="text" id="txtFName" name="txtFName" class="clsInput" /><br />
            <div class="g-recaptcha" data-sitekey="my_key"></div>
            <img id="cmdSubmit" src="SubmitBtn.png" alt="Submit Form" style="cursor:pointer;" />
        </form>
    </body>
    </html>

Je veux valider le captcha au cmdSubmitclic.

Veuillez aider.

— Mahatma Aladdin
source

2

Qu'avez-vous fait jusqu'à présent? besoin de plus d'informations, la question est trop vague.

— Zaki

1

Si vous n'envoyez pas de demande de publication à Google via la validation côté serveur, vous pouvez également ne pas inclure de captcha. Les validations côté client suggérées ci-dessous seront transmises par des bots.

— Virge Assault

Valider captcha est cliqué côté client> faire quelque chose> valider recaptcha côté serveur de données> faire quelque chose.

— JPB

2

Consultez un exemple de tutoriel ici freakyjolly.com

— Code Spy

104

Cette vérification côté client de reCaptcha - ce qui suit a fonctionné pour moi:

si reCaptcha n'est pas validé sur les grecaptcha.getResponse();retours côté client null, else is renvoie une valeur autre que null.

Code Javascript:

var response = grecaptcha.getResponse();

if(response.length == 0)
    //reCaptcha not verified

else
    //reCaptch verified

— Palak Tanejaa
source

113

Ceci est une erreur. Le Captcha n'a PAS été vérifié par JS, vous devez soumettre la réponse, ainsi que la clé de votre site et la clé secrète, aux serveurs de Google à partir de votre code back-end afin de déterminer si le Captcha a été répondu avec succès. Cette réponse est dangereusement incorrecte.

— Sean Kendle

9

Quote: Lorsqu'un reCAPTCHA est résolu par l'utilisateur final, un nouveau champ (g-recaptcha-response) sera renseigné en HTML. developer.google.com/recaptcha/docs/verify

— CoalaWeb

6

Mais ce n'est pas tout @CoalaWeb! Quote: Après avoir obtenu le jeton de réponse, vous devez le vérifier avec reCAPTCHA à l'aide de l'API suivante pour vous assurer que le jeton est valide. https://developers.google.com/recaptcha/docs/verify

— Dylan Smith

14

À ceux qui disent que la réponse n'est pas correcte, avez-vous même lu la question? La question et la réponse spécifient toutes les deux clairement côté client - l'intention évidente est de vérifier que le captcha a bien été rempli côté client avant d' envoyer une demande de publication au serveur pour une validation ultérieure ..

— rococo

4

Vous ne pouvez savoir que si l'utilisateur l'a effectivement rempli côté client. La valeur de "g-recaptcha-response" sera renseignée, mais elle doit être envoyée à Google pour qu'ils vérifient si la réponse est valide ou non. Par exemple, avec la correspondance d'image, vous pouvez cliquer sur n'importe quoi ou rien, puis sur soumettre. Ce n'est pas correct, mais la valeur de 'g-recaptcha-response' est remplie. Vous pouvez utiliser AJAX pour le vérifier, mais assurez-vous de conserver votre clé secrète dans le code côté serveur. La réponse courte est que le serveur doit vérifier si elle est valide, que vous le fassiez avec AJAX ou avec un message complet.

— Sean Kendle

60

Utilisez ceci pour valider google captcha avec du javascript simple.

Ce code au corps html:

<div class="g-recaptcha" id="rcaptcha" style="margin-left: 90px;" data-sitekey="my_key"></div>
<span id="captcha" style="margin-left:100px;color:red" />

Ce code place la section principale sur le bouton de formulaire de la méthode get_action (this):

function get_action(form) 
{
    var v = grecaptcha.getResponse();
    if(v.length == 0)
    {
        document.getElementById('captcha').innerHTML="You can't leave Captcha Code empty";
        return false;
    }
    else
    {
        document.getElementById('captcha').innerHTML="Captcha completed";
        return true; 
    }
}

— Pravin Sharma
source

<div class = "g-recaptcha" id = "rcaptcha" style = "margin-left: 90px;" data-sitekey = "my_key"> </div> ce code juste au-dessus de la balise span dans la section body

— Pravin Sharma

2

Je pense que c'est la meilleure solution. De cette façon, vous pouvez gérer la validation de la réponse dans votre gestionnaire de soumission de formulaire. Cela semble plus logique que d'essayer de le gérer sur le rappel captcha. Je suppose que cela dépend si vous validez à la volée ou lors de la soumission.

— Ampoule 1

4

Vous devez utiliser ===et !==; aucune raison de ne pas le faire.

— slikts

28

Cette solution est fausse. Je pense que lorsque vous obtenez une réponse, vous devez envoyer le paramètre (response + secretkey + ClientIp) au google pour la validation. Après validation. Google nous renvoie le succès ou l'échec. dans votre exemple, vous n'utilisez pas la deuxième étape. pouvez-vous m'expliquer: Où est votre clé privée. Quand utiliserez-vous?

— Mahmut EFE

3

Mahmut a raison, cette réponse est dangereusement fausse et incomplète.

— Sean Kendle

27

Réponse simplifiée de Paul:

La source:

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

HTML:

<div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="correctCaptcha"></div>

JS:

var correctCaptcha = function(response) {
        alert(response);
    };

— Manuel Azar
source

13

Comme beaucoup d'autres mauvaises solutions, vous obtenez simplement le jeton ici. Vous ne l'avez pas validé tant que vous ne l'avez pas envoyé à Google avec votre clé secrète.

— evolross

Cela pose en quelque sorte un problème dans mon élément. Webpack ne peut pas se compiler soi-même si nous utilisons le rappel de données à l'intérieur de l'élément

— Faris Rayhan

2

Cela devrait être la réponse acceptée car elle ne nécessite pas d'écraser la fonction de rendu. Quant à la validation purement en JS, je doute que cela soit possible car cela nécessiterait de placer la clé secrète dans le JS et ainsi permettre à tout le monde de mettre la main dessus.

— Askerman

25

Si vous effectuez le rendu du Recaptcha lors d'un rappel

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

en utilisant un DIV vide comme espace réservé

<div id='html_element'></div>

alors vous pouvez spécifier un appel de fonction facultatif sur une réponse CAPTCHA réussie

var onloadCallback = function() {
    grecaptcha.render('html_element', {
      'sitekey' : 'your_site_key',
      'callback' : correctCaptcha
    });
  };

La réponse recaptcha sera alors envoyée à la fonction 'correctCaptcha'.

var correctCaptcha = function(response) {
    alert(response);
};

Tout cela provient des notes de l'API Google:

Notes sur l'API Google Recaptcha v2

Je ne sais pas trop pourquoi vous voudriez faire cela. Normalement, vous enverriez le champ g-recaptcha-response avec votre clé privée pour valider en toute sécurité côté serveur. À moins que vous ne vouliez désactiver le bouton d'envoi jusqu'à ce que la recaptcha soit réussie ou autre, auquel cas ce qui précède devrait fonctionner.

J'espère que cela t'aides.

Paul

— pphillips001
source

1

grattez cela, je l'ai compris - une partie de votre code est incorrecte, je vais donc proposer une modification. À votre santé!

— Préfixe du

@Prefix Avez-vous déjà proposé la modification? Dans l'attente de votre version.

— thanks_in_advance

1

La déclaration de la fonction de rappel correctCaptcha (dans grecaptcha.render) doit être sans guillemets et doit être placée avant onloadCallback.

— Pratul Sanwal

9

J'ai utilisé la solution de HarveyEV mais je l'ai mal interprétée et je l'ai fait avec jQuery validate au lieu du validateur Bootstrap.

  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
  <script>
    $("#contactForm").validate({
      submitHandler: function (form) {
        var response = grecaptcha.getResponse();
        //recaptcha failed validation
        if (response.length == 0) {
          $('#recaptcha-error').show();
          return false;
        }
          //recaptcha passed validation
        else {
          $('#recaptcha-error').hide();
          return true;
        }
      }
    });
  </script>

— imjosh
source

6

Je pensais qu'ils étaient tous excellents, mais j'ai eu du mal à les faire fonctionner avec javascript et c #. Voici ce que j'ai fait. J'espère que cela aide quelqu'un d'autre.

//put this at the top of the page
<script src="https://www.google.com/recaptcha/api.js"></script>

//put this under the script tag
<script>
var isCaptchaValid = false;
function doCaptchaValidate(source, args) {
    args.IsValid = isCaptchaValid;
}
var verifyCallback = function (response) {
    isCaptchaValid = true;
};
</script>

//retrieved from google and added callback
<div class="g-recaptcha" data-sitekey="sitekey" data-callback="verifyCallback">

//created a custom validator and added error message and ClientValidationFucntion
<asp:CustomValidator runat="server" ID="CustomValidator1" ValidationGroup="Initial" ErrorMessage="Captcha Required" ClientValidationFunction="doCaptchaValidate"/>

— BV2005
source

4

vous pouvez rendre votre recaptcha en utilisant le code suivant

<div id="recapchaWidget" class="g-recaptcha"></div>

<script type="text/javascript">
   var widId = "";
   var onloadCallback = function ()
   {
    widId = grecaptcha.render('recapchaWidget', {
    'sitekey':'Your Site Key'
            });
   };
 </script>

 <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Ensuite, vous pouvez valider votre recaptcha en utilisant la méthode "IsRecapchaValid ()" comme suit.

 <script type="text/javascript">
     function IsRecapchaValid()
      {
      var res = grecaptcha.getResponse(widId);
      if (res == "" || res == undefined || res.length == 0)
         {
          return false;
         }
       return true;
      }
 </script>

— Tabish Usman
source

Donc, comme ceci: return res && res.length n'oubliez pas la validation du serveur.

— Alex Gurskiy

1

J'ai utilisé la solution de Palek dans un validateur Bootstrap et cela fonctionne. J'aurais ajouté un commentaire au sien mais je n'ai pas le représentant;). Version simplifiée:

        $('#form').validator().on('submit', function (e) {
           var response = grecaptcha.getResponse();
           //recaptcha failed validation
           if(response.length == 0) {
               e.preventDefault();
               $('#recaptcha-error').show();
           }
           //recaptcha passed validation
           else {
               $('#recaptcha-error').hide();
           }
           if (e.isDefaultPrevented()) {
              return false;
           } else {
              return true;
           }
       });

— HarveyEV
source

1

Lien source

Vous pouvez simplement vérifier côté client en utilisant la méthode grecaptcha.getResponse ()

          var rcres = grecaptcha.getResponse();
          if(rcres.length){
            grecaptcha.reset();
            showHideMsg("Form Submitted!","success");
          }else{
            showHideMsg("Please verify reCAPTCHA","error");
          }

— Espion de code
source

0

Malheureusement, il n'y a aucun moyen de valider le captcha du côté client uniquement (navigateur Web), car la nature du captcha lui-même nécessite au moins deux acteurs (côtés) pour terminer le processus. Le côté client - demande à un humain de résoudre un casse-tête, une équitation mathématique, une reconnaissance de texte et la réponse est encodée par un algorithme avec des métadonnées telles que l'horodatage de résolution de captcha, le code de défi pseudo-aléatoire. Une fois que le côté client a soumis le formulaire avec un code de réponse captcha, le côté serveur doit valider ce code de réponse captcha avec un ensemble prédéfini de règles, c'est-à-dire. si captcha résolu dans un délai de 5 min, si les adresses IP du client sont les mêmes et ainsi de suite. Il s'agit d'une description très générale, du fonctionnement des captchas, de chaque implémentation (comme ReCaptcha de Google, quelques captchas de base pour la résolution d'équitation mathématique),

NB. Le client (navigateur web) dispose d'une option pour désactiver l'exécution du code JavaScript, ce qui signifie que les solutions proposées sont totalement inutiles.

— vchyzhevskyi
source

-1

if (typeof grecaptcha !== 'undefined' && $("#dvCaptcha").length > 0 && $("#dvCaptcha").html() == "") {
                dvcontainer = grecaptcha.render('dvCaptcha', {
                    'sitekey': ReCaptchSiteKey,
                    'expired-callback' :function (response){
                        recaptch.reset();
                        c_responce = null;
                    },
                    'callback': function (response) {
                        $("[id*=txtCaptcha]").val(c_responce);
                        $("[id*=rfvCaptcha]").hide();
                        c_responce = response;

                    }
                });
            }
            
            function callonanybuttonClick(){
             
                if (c_responce == null) {
                    $("[id*=txtCaptcha]").val("");
                    $("[id*=rfvCaptcha]").show();

                    return false;
                }
                else {
                    $("[id*=txtCaptcha]").val(c_responce);
                    $("[id*=rfvCaptcha]").hide();
                    return true;
                }
            
}

<div id="dvCaptcha" class="captchdiv"></div>
    <asp:TextBox ID="txtCaptcha" runat="server" Style="display: none" />
    <label id="rfvCaptcha" style="color:red;display:none;font-weight:normal;">Captcha validation is required.</label>

Développer l'extrait

La validation du captcha est requise.

— Karangiri goswami
source

-2

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <script type="text/javascript">
        function get_action() {
            var v = grecaptcha.getResponse();
            console.log("Resp" + v);
            if (v == '') {
                document.getElementById('captcha').innerHTML = "You can't leave Captcha Code empty";
                return false;
            }
            else {
                document.getElementById('captcha').innerHTML = "Captcha completed";
                return true;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" onsubmit="return get_action();">
    <div>
    <div class="g-recaptcha" data-sitekey="6LeKyT8UAAAAAKXlohEII1NafSXGYPnpC_F0-RBS"></div>
    </div>
   <%-- <input type="submit" value="Button" />--%>
   <asp:Button ID="Button1" runat="server"
       Text="Button" />
    <div id="captcha"></div>
    </form>
</body>
</html>

Cela fonctionnera comme prévu.

— Papun Sahoo
source

-2

L'ASP.Net Google reCAPTCHA version 2 permet de valider la réponse Captcha côté client à l'aide de ses fonctions de rappel. Dans cet exemple , le nouveau reCAPTCHA de Google sera validé à l'aide d'ASP.Net RequiredField Validator.

<script type="text/javascript">
    var onloadCallback = function () {
        grecaptcha.render('dvCaptcha', {
            'sitekey': '<%=ReCaptcha_Key %>',
            'callback': function (response) {
                $.ajax({
                    type: "POST",
                    url: "Demo.aspx/VerifyCaptcha",
                    data: "{response: '" + response + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        var captchaResponse = jQuery.parseJSON(r.d);
                        if (captchaResponse.success) {
                            $("[id*=txtCaptcha]").val(captchaResponse.success);
                            $("[id*=rfvCaptcha]").hide();
                        } else {
                            $("[id*=txtCaptcha]").val("");
                            $("[id*=rfvCaptcha]").show();
                            var error = captchaResponse["error-codes"][0];
                            $("[id*=rfvCaptcha]").html("RECaptcha error. " + error);
                        }
                    }
                });
            }
        });
    };
</script>


    <asp:TextBox ID="txtCaptcha" runat="server" Style="display: none" />
    <asp:RequiredFieldValidator ID="rfvCaptcha" ErrorMessage="The CAPTCHA field is required." ControlToValidate="txtCaptcha"
        runat="server" ForeColor="Red" Display="Dynamic" />

    <br />
    <asp:Button ID="btnSubmit" Text="Submit" runat="server" />

— Julia
source