Javascript / jQuery kullanarak google reCAPTCHA v2'yi nasıl doğrulayabilirim?

120

Aspx'te basit bir iletişim formum var. Formu göndermeden önce reCaptcha'yı (istemci tarafı) doğrulamak istiyorum. Lütfen yardım et.

Basit kod:

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

Captcha'yı cmdSubmittıklamayla onaylamak istiyorum .

Lütfen yardım et.

— Mahatma Aladdin
kaynak

2

şimdiye kadar ne yaptın? daha fazla bilgiye ihtiyacım var, soru çok belirsiz.

— Zaki

1

Google'a sunucu tarafı doğrulama yoluyla bir gönderi isteği göndermiyorsanız, bir captcha bile eklemeyebilirsiniz. Aşağıda önerilen istemci tarafı doğrulamaları botlar tarafından geçilecektir.

— Virge Assault

Captcha'yı istemci tarafında doğrulayın> bir şey yapın> recaptcha veri sunucusu tarafını doğrulayın> bir şeyler yapın.

— JPB

2

Örnek örnek öğreticiyi buradan kontrol edin freakyjolly.com/…

— Code Spy

106

Bu İstemci tarafı doğrulaması reCaptcha- aşağıdakiler benim için çalıştı:

reCaptcha istemci tarafındaki grecaptcha.getResponse();dönüşlerde doğrulanmazsa null, aksi takdirde dışında bir değer döndürür null.

Javascript Kodu:

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified

— Palak Tanejaa
kaynak

113

Bu yanlış. Captcha, JS tarafından DOĞRULANMAMIŞTIR, Captcha'nın başarıyla yanıtlanıp yanıtlanmadığını belirlemek için, yanıtı site anahtarınız ve gizli anahtarınızla birlikte arka uç kodunuzdan Google'ın sunucularına göndermeniz gerekir. Bu cevap tehlikeli derecede yanlıştır.

— Sean Kendle

9

Alıntı: Bir reCAPTCHA son kullanıcı tarafından çözüldüğünde, HTML'de yeni bir alan (g-recaptcha-response) doldurulacaktır. developer.google.com/recaptcha/docs/verify

— CoalaWeb

6

Ama hepsi bu kadar @CoalaWeb! Alıntı: Yanıt jetonunu aldıktan sonra , jetonun geçerli olduğundan emin olmak için aşağıdaki API'yi kullanarak reCAPTCHA ile doğrulamanız gerekir . https://developers.google.com/recaptcha/docs/verify

— Dylan Smith

14

Cevabın doğru olmadığını söyleyenlere soruyu okudunuz mu? Soru ve cevap, her ikisi de müşteri tarafını açıkça belirtiyor - açık olan amaç, daha fazla doğrulama için sunucuya bir gönderi talebi göndermeden önce captcha'nın gerçekten müşteri tarafında doldurulup doldurulmadığını kontrol etmektir .

— rococo

4

Yalnızca kullanıcının bunu istemci tarafında gerçekten doldurup doldurmadığını bilebilirsiniz. "G-recaptcha-response" un değeri doldurulacak, ancak yanıtın geçerli olup olmadığını kontrol etmeleri için Google’a gönderilmesi gerekiyor. Örneğin, resim eşleştirmesiyle herhangi bir şeyi tıklayabilir veya hiçbir şeyi tıklayamaz ve gönder'i tıklayabilirsiniz. Bu doğru değil, ancak "g-recaptcha-response" un değeri doldurulmuş. Doğrulamak için AJAX kullanabilirsiniz, ancak gizli anahtarınızı sunucu tarafı kodunda tuttuğunuzdan emin olun. Kısa cevap, sunucunun geçerli olup olmadığını kontrol etmesi gerektiğidir, ister AJAX ile ister tam form gönderisiyle yapın.

— Sean Kendle

60

Google captcha'yı basit javascript ile doğrulamak için bunu kullanın.

Html gövdesindeki bu kod:

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

Bu kod, get_action (bu) yöntem form düğmesinin çağrılmasının baş kısmına yerleştirildi:

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
kaynak

<div class = "g-recaptcha" id = "rcaptcha" style = "margin-left: 90px;" data-sitekey = "my_key"> </div> bu kod gövde bölümündeki span etiketinin hemen üstünde

— Pravin Sharma

2

Bunun daha iyi bir çözüm olduğunu düşünüyorum. Bu şekilde, form gönderme işleyicinizdeki yanıtın doğrulanmasını gerçekleştirebilirsiniz. Bu, captcha geri aramasında onu halletmeye çalışmaktan daha mantıklı görünüyor. Sanırım anında ya da gönderirken doğrulama yapmanıza bağlı.

— Lightbulb 1

4

Kullanmalısınız ===ve !==; yapmamak için bir sebep yok.

— slikts

28

Bu çözüm yanlış. Yanıt aldığınızda doğrulama için google'a parametre (response + secretkey + ClientIp) göndermeniz gerektiğini düşünüyorum. Doğrulamadan sonra. Google bize başarı veya başarısızlık döndürür. örneğinizde ikinci adımı kullanmıyorsunuz. bana açıklayabilir misin: Özel anahtarın nerede? Ne zaman kullanacaksın

— Mahmut EFE

3

Mahmut haklıdır, bu cevap tehlikeli derecede yanlış ve eksiktir.

— Sean Kendle

27

Paul'un cevabı basitleştirilmiş:

Kaynak:

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

13

Diğer birçok yanlış çözüm gibi, burada sadece belirteci alıyorsunuz. Sen değil valide Eğer gizli anahtar ile Google'a gönderir kadar.

— evrim

Bu bir şekilde benim elementimde soruna neden oluyor. Öğenin içinde veri geri arama kullanırsak

— Webpack kendisini derleyemez

2

Oluşturma işlevinin üzerine yazılmasını gerektirmediğinden bu kabul edilen yanıt olmalıdır. Tamamen JS'de doğrulamaya gelince, gizli anahtarı JS'ye yerleştirmeyi gerektireceğinden ve böylece herkesin ellerini her yere götürmesine izin vereceğinden bunun mümkün olduğundan şüpheliyim.

— Askerman

25

Recaptcha'yı bir geri aramada işlerseniz

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

yer tutucu olarak boş bir DIV kullanma

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

başarılı bir CAPTCHA yanıtında isteğe bağlı bir işlev çağrısı belirtebilirsiniz

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

Recaptcha yanıtı daha sonra 'rightCaptcha' işlevine gönderilecektir.

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

Bunların tümü Google API notlarından alınmıştır:

Google Recaptcha v2 API Notları

Bunu neden yapmak isteyeceğinizden biraz emin değilim. Normalde, sunucu tarafını güvenli bir şekilde doğrulamak için g-recaptcha-response alanını Özel anahtarınızla birlikte gönderirsiniz. Recaptcha başarılı olana kadar gönder düğmesini devre dışı bırakmak istemediğiniz sürece - bu durumda yukarıdakiler çalışmalıdır.

Bu yardımcı olur umarım.

Paul

— pphillips001
kaynak

1

Çizin, anladım - kodunuzun bir kısmı yanlış, bu yüzden bir düzenleme önereceğim. Şerefe!

— Önek

@Prefix Henüz düzenlemeyi önerdin mi? Sürümünüzü dört gözle bekliyorum.

— thanks_in_advance

1

DoğruCaptcha geri arama işlevi bildirimi (grecaptcha.render içinde) tırnak işaretleri içermemeli ve onloadCallback'den önce yerleştirilmelidir.

— Pratul Sanvval

9

HarveyEV'in çözümünü kullandım ama yanlış okudum ve Bootstrap doğrulayıcısı yerine jQuery validate ile yaptım.

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

6

Hepsinin harika olduğunu düşündüm ama aslında onları javascript ve c # ile çalıştırmakta zorluk çekiyordum. İşte yaptığım şey. Umarım başkasına yardımcı olur.

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

4

recaptcha'nızı aşağıdaki kodu kullanarak oluşturabilirsiniz

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

Daha sonra recaptcha'nızı aşağıdaki gibi "IsRecapchaValid ()" yöntemini kullanarak doğrulayabilirsiniz.

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

Yani, şöyle: dönüş res && res.length sunucu doğrulamasını unutmayın.

— Alex Gurskiy

1

Palek'in çözümünü bir Bootstrap doğrulayıcısının içinde kullandım ve işe yarıyor. Onun için bir yorum ekledim ama temsilcim yok;). Basitleştirilmiş versiyon:

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

1

Kaynak Bağlantısı

Grecaptcha.getResponse () yöntemini kullanarak istemci tarafında kontrol edebilirsiniz.

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

— Kod Casusu
kaynak

0

Ne yazık ki, captcha'yı yalnızca istemci tarafında (web tarayıcısı) doğrulamanın bir yolu yoktur, çünkü captcha'nın doğası, süreci tamamlamak için en az iki aktör (taraf) gerektirir. İstemci tarafı - bir insandan bir bulmaca, matematik denklemi, metin tanıma çözmesini ister ve yanıt, captcha çözme zaman damgası, sözde rastgele meydan okuma kodu gibi bazı meta verilerle birlikte bir algoritma tarafından kodlanır. İstemci tarafı formu bir captcha yanıt kodu ile gönderdikten sonra, sunucu tarafının bu captcha yanıt kodunu önceden tanımlanmış bir dizi kural ile doğrulaması gerekir, örn. captcha 5 dakika içinde çözülürse, müşterinin IP adresleri aynıysa vb. Bu çok genel bir açıklama, captcha'ların nasıl çalıştığı, her bir uygulama (Google'ın ReCaptcha'sı, kendi kendine yapılan captcha'ları çözen bazı temel matematik denklemleri gibi),

NB. İstemci (web tarayıcısı), JavaScript kodunun yürütülmesini devre dışı bırakma seçeneğine sahiptir, bu da önerilen çözümlerin tamamen yararsız olduğu anlamına gelir.

— vchyzhevskyi
kaynak

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

Snippet'i genişlet

Captcha doğrulaması gerekli.

— Karangiri goswami
kaynak

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

Beklendiği gibi çalışacak.

— Papun Sahoo
kaynak

-2

Google reCAPTCHA sürüm 2 ASP.Net, Geri Çağırma işlevlerini kullanarak istemci tarafında Captcha yanıtının doğrulanmasına izin verir. Gelen bu örnekte , Google yeni reCAPTCHA ASP.Net RequiredField Validator kullanarak doğrulanır.

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