Wie kann ich Google reCAPTCHA v2 mit Javascript / jQuery validieren?

120

Ich habe ein einfaches Kontaktformular in aspx. Ich möchte das reCaptcha (clientseitig) validieren, bevor ich das Formular abschicke. Bitte helfen Sie.

Beispielcode:

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

Ich möchte das Captcha beim cmdSubmitKlicken validieren .

Bitte helfen Sie.

javascript  jquery  asp.net  google-api  recaptcha 
— Mahatma Aladdin
quelle
2
Was hast du bis jetzt gemacht? Benötigen Sie weitere Informationen, die Frage ist zu vage.
— Zaki
1
Wenn Sie keine Post-Anfrage über die serverseitige Validierung an Google senden, können Sie auch nicht einmal ein Captcha hinzufügen. Die unten vorgeschlagenen clientseitigen Validierungen werden von Bots bestanden.
— Virge Assault
Auf Captcha überprüfen wird clientseitig geklickt> etwas tun> Recaptcha-Datenserverseite validieren> etwas tun.
— JPB
2
Schauen Sie sich das Beispiel-Tutorial hier an freakyjolly.com/…
— Code Spy

Antworten:

102

Diese clientseitige Überprüfung von reCaptcha- hat bei mir funktioniert:

Wenn reCaptcha auf clientseitigen grecaptcha.getResponse();Rückgaben nicht validiert ist null, wird andernfalls ein anderer Wert als zurückgegeben null.

Javascript Code: 

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified
— Palak Tanejaa
quelle
112
Das ist falsch. Das Captcha wurde NICHT von JS überprüft. Sie müssen die Antwort zusammen mit Ihrem Site-Schlüssel und Ihrem geheimen Schlüssel von Ihrem Back-End-Code an die Server von Google senden, um festzustellen, ob das Captcha erfolgreich beantwortet wurde. Diese Antwort ist gefährlich falsch.
— Sean Kendle
9
Quote: Wenn ein reCAPTCHA vom Endbenutzer gelöst wird, wird ein neues Feld (g-recaptcha-response) in HTML ausgefüllt. developer.google.com/recaptcha/docs/verify
— CoalaWeb
6
Aber das ist noch nicht alles @CoalaWeb! Quote: Nachdem Sie das Antworttoken erhalten haben, müssen Sie es mit reCAPTCHA mithilfe der folgenden API überprüfen, um sicherzustellen, dass das Token gültig ist. https://developers.google.com/recaptcha/docs/verify
— Dylan Smith
14
Haben Sie die Frage für diejenigen, die sagen, dass die Antwort nicht korrekt ist, überhaupt gelesen? Die Frage und die Antwort spezifizieren beide eindeutig die Client-Seite - die offensichtliche Absicht besteht darin, zu überprüfen, ob das Captcha tatsächlich auf der Client-Seite ausgefüllt wurde, bevor eine Post-Anfrage zur weiteren Validierung an den Server gesendet wird.
— Rokoko
4
Sie können nur feststellen, ob der Benutzer es tatsächlich auf der Clientseite ausgefüllt hat. Der Wert von "g-recaptcha-response" wird ausgefüllt. Dieser Wert muss jedoch an Google gesendet werden, damit sie überprüfen können, ob die Antwort gültig ist oder nicht. Mit der Bildübereinstimmung können Sie beispielsweise auf alles oder nichts klicken und auf Senden klicken. Das ist nicht richtig, aber der Wert von 'g-recaptcha-response' wird ausgefüllt. Sie können AJAX verwenden, um dies zu überprüfen. Achten Sie jedoch darauf, Ihren geheimen Schlüssel im serverseitigen Code zu behalten. Kurze Antwort ist, dass der Server prüfen muss, ob es gültig ist, ob Sie dies mit AJAX oder mit einem vollständigen Formularbeitrag tun.
— Sean Kendle
60

Verwenden Sie diese Option, um Google Captcha mit einfachem Javascript zu validieren.

Dieser Code im HTML-Text:

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

Dieser Code wird im Kopfabschnitt des Aufrufs der Formularschaltfläche get_action (this) eingefügt:

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
quelle
<div class = "g-recaptcha" id = "rcaptcha" style = "Rand links: 90px;" data-sitekey = "my_key"> </ div> dieser Code direkt über dem span-Tag im Body-Bereich
— Pravin Sharma
2
Ich denke, das ist die bessere Lösung. Auf diese Weise können Sie die Validierung der Antwort in Ihrem Formularübermittlungs-Handler durchführen. Dies scheint logischer zu sein, als zu versuchen, es beim Captcha-Rückruf zu handhaben. Ich denke, es hängt davon ab, ob Sie im laufenden Betrieb oder bei der Einreichung validieren.
— Glühbirne1
4
Sie sollten ===und verwenden !==; Kein Grund, es nicht zu tun.
— Slikts
28
Diese Lösung ist falsch. Ich denke, wenn Sie eine Antwort erhalten, müssen Sie Parameter (Antwort + Geheimschlüssel + ClientIp) zur Validierung an Google senden. Nach der Validierung. Google gibt uns Erfolg oder Misserfolg zurück. In Ihrem Beispiel verwenden Sie den zweiten Schritt nicht. Kannst du mir erklären: Wo ist dein privater Schlüssel? Wann wirst du verwenden?
— Mahmut EFE
3
Mahmut hat recht, diese Antwort ist gefährlich falsch und unvollständig.
— Sean Kendle
27

Vereinfachte Antwort von Paulus:

Quelle:

<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
quelle
13
Wie bei vielen anderen falschen Lösungen erhalten Sie hier nur das Token. Sie haben es erst überprüft , nachdem Sie es mit Ihrem geheimen Schlüssel an Google gesendet haben.
— Entwicklung
Das verursacht irgendwie ein Problem in meinem Element. Webpack kann es nicht selbst kompilieren, wenn wir Datenrückruf innerhalb des Elements verwenden
— Faris Rayhan
2
Dies sollte die akzeptierte Antwort sein, da die Renderfunktion nicht überschrieben werden muss. Was die Validierung nur in JS betrifft, bezweifle ich, dass dies möglich ist, da der geheime Schlüssel in das JS gelegt werden muss, damit jeder seine Hände darauf legen kann.
— Askerman
25

Wenn Sie das Recaptcha bei einem Rückruf rendern

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

Verwenden eines leeren DIV als Platzhalter

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

Anschließend können Sie einen optionalen Funktionsaufruf für eine erfolgreiche CAPTCHA-Antwort angeben

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

Die Recaptcha-Antwort wird dann an die Funktion 'korrektCaptcha' gesendet.

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

All dies stammt aus den Google API-Hinweisen:

Hinweise zur Google Recaptcha v2-API

Ich bin mir ein bisschen unsicher, warum Sie das tun möchten. Normalerweise senden Sie das Feld g-recaptcha-response zusammen mit Ihrem privaten Schlüssel, um die serverseitige Überprüfung sicher durchzuführen. Es sei denn, Sie wollten die Senden-Schaltfläche deaktivieren, bis die erneute Erfassung erfolgreich war oder so - in diesem Fall sollte das oben genannte funktionieren.

Hoffe das hilft.

Paul

— pphillips001
quelle
1
Scratch das, ich habe es herausgefunden - ein Teil Ihres Codes ist falsch, also werde ich eine Bearbeitung vorschlagen. Prost!
— Präfix
@Prefix Hast du die Bearbeitung schon vorgeschlagen? Ich freue mich auf deine Version.
— Thanks_in_advance
1
Die Deklaration der korrektCaptcha-Rückruffunktion (in grecaptcha.render) sollte ohne Anführungszeichen stehen und vor dem onloadCallback stehen.
— Pratul Sanwal
9

Ich habe die HarveyEV-Lösung verwendet, sie jedoch falsch gelesen und mit jQuery validate anstelle von Bootstrap validator ausgeführt.

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

Ich fand sie alle großartig, aber ich hatte Probleme, sie dazu zu bringen, mit Javascript und c # zu arbeiten. Hier ist was ich getan habe. Hoffe es hilft jemand anderem.

//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
quelle
4

Sie können Ihre Recaptcha mit folgendem Code rendern

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

Anschließend können Sie Ihr Recaptcha mithilfe der folgenden Methode "IsRecapchaValid ()" überprüfen.

 <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
quelle
Also, so: return res && res.length Vergiss die Servervalidierung nicht.
— Alex Gurskiy
1

Ich habe Paleks Lösung in einem Bootstrap-Validator verwendet und sie funktioniert. Ich hätte seinem einen Kommentar hinzugefügt, aber ich habe keinen Repräsentanten;). Vereinfachte Version:

        $('#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
quelle
1

Quelllink

Geben Sie hier die Bildbeschreibung ein

Sie können einfach auf der Clientseite mit der Methode grecaptcha.getResponse () überprüfen 

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

Leider gibt es keine Möglichkeit, das Captcha nur auf der Clientseite (Webbrowser) zu validieren, da für die Art des Captcha selbst mindestens zwei Akteure (Seiten) erforderlich sind, um den Vorgang abzuschließen. Die Client-Seite - fordert einen Menschen auf, ein Rätsel, eine mathematische Gleichung oder eine Texterkennung zu lösen, und die Antwort wird von einem Algorithmus zusammen mit einigen Metadaten wie Captcha-Zeitstempel und pseudozufälligem Herausforderungscode codiert. Sobald die Clientseite das Formular mit einem Captcha-Antwortcode sendet, muss die Serverseite diesen Captcha-Antwortcode mit einem vordefinierten Regelsatz validieren, d. H. Wenn Captcha innerhalb von 5 Minuten gelöst wurde, wenn die IP-Adressen des Clients identisch sind und so weiter. Dies ist eine sehr allgemeine Beschreibung, wie Captchas funktionieren, jede einzelne Implementierung (wie Googles ReCaptcha, einige grundlegende mathematische Methoden, die selbst erstellte Captchas lösen),

NB. Der Client (Webbrowser) hat die Möglichkeit, die Ausführung von JavaScript-Code zu deaktivieren, was bedeutet, dass die vorgeschlagenen Lösungen völlig unbrauchbar sind.

— vchyzhevskyi
quelle
-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>
Erweitern Sie das Snippet

Eine Captcha-Validierung ist erforderlich.

— Karangiri Goswami
quelle
-1 
<%@ 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>

Es wird wie erwartet funktionieren.

— Papun Sahoo
quelle
-1

Das ASP.Net von Google reCAPTCHA Version 2 ermöglicht die Überprüfung der Captcha-Antwort auf der Clientseite mithilfe der Rückruffunktionen. In diesem Beispiel wird das neue reCAPTCHA von Google mit ASP.Net RequiredField Validator validiert.

<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
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.