मैं जावास्क्रिप्ट / jQuery का उपयोग करके Google reCAPTCHA v2 को कैसे मान्य कर सकता हूं?

120

मेरे पास aspx में एक सरल संपर्क फ़ॉर्म है। मैं फॉर्म सबमिट करने से पहले reCaptcha (क्लाइंट-साइड) को मान्य करना चाहता हूं। कृपया मदद कीजिए।

नमूना कोड:

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

मैं cmdSubmitक्लिक पर कैप्चा को मान्य करना चाहता हूं ।

कृपया मदद कीजिए।

javascript  jquery  asp.net  google-api  recaptcha 
— महात्मा अलादीन
स्रोत
2
आपने अब तक क्या किया है? अधिक जानकारी की जरूरत है, सवाल बहुत अस्पष्ट है।
— जकी
1
यदि आप सर्वर साइड सत्यापन के माध्यम से Google को पोस्ट अनुरोध नहीं भेज रहे हैं तो आप एक कैप्चा भी शामिल नहीं कर सकते हैं। नीचे दिए गए क्लाइंट साइड सत्यापन को बॉट द्वारा पारित किया जाएगा।
— विर्ज असॉल्ट
मान्य कैप्चा को क्लाइंटसाइड पर क्लिक किया जाता है> कुछ करें> रिकैप्टा डेटा सर्वर साइड को वेरिफाई करें> कुछ करें।
— जेपीबी
2
नमूना उदाहरण के ट्यूटोरियल की जाँच करें यहाँ freakyjolly.com/-
— कोड स्पाई

जवाबों:

104

यह ग्राहक पक्ष सत्यापन reCaptcha- मेरे लिए निम्न कार्य किया गया:

यदि reCaptcha क्लाइंट साइड grecaptcha.getResponse();रिटर्न पर मान्य नहीं है null, तो इसके अलावा एक और रिटर्न है null।

जावास्क्रिप्ट कोड: 

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified
— पलक तनेजा
स्रोत
113
यह गलत है। कैप्चा को जेएस द्वारा सत्यापित नहीं किया गया है, आपको कैप्चा को सफलतापूर्वक जवाब देने के लिए यह निर्धारित करने के लिए कि आपके बैक एंड कोड से Google के सर्वरों को अपनी साइट कुंजी और गुप्त कुंजी के साथ प्रतिक्रिया सबमिट करने की आवश्यकता है। यह उत्तर खतरनाक रूप से गलत है।
— सीन केंडल
9
उद्धरण: जब एक reCAPTCHA अंतिम उपयोगकर्ता द्वारा हल किया जाता है, तो HTML में एक नया क्षेत्र (जी-पुनरावृत्ति-प्रतिक्रिया) आबादी होगी। Developers.google.com/recaptcha/docs/verify
— कोअलाव
6
लेकिन यह सब @CoalaWeb नहीं है! उद्धरण: आपको प्रतिक्रिया टोकन मिलने के बाद, आपको यह सुनिश्चित करने के लिए निम्न एपीआई का उपयोग करके reCAPTCHA के साथ सत्यापित करना होगा कि टोकन मान्य है। https://developers.google.com/recaptcha/docs/verify
— डायलन स्मिथ
14
यह कहने वालों के लिए कि उत्तर सही नहीं है, क्या आपने प्रश्न पढ़ा है? प्रश्न और उत्तर दोनों स्पष्ट रूप से क्लाइंट-साइड निर्दिष्ट करते हैं - स्पष्ट इरादा यह जांचने के लिए है कि कैप्चा वास्तव में क्लाइंट-साइड में भरा गया था , और अधिक सत्यापन के लिए सर्वर को पोस्ट अनुरोध भेजने से पहले ..
— रोकोको
4
आप केवल यह जान सकते हैं कि उपयोगकर्ता ने वास्तव में इसे क्लाइंट की ओर से भरा है या नहीं। 'G-recaptcha-response' का मान भरा जाएगा, लेकिन यह देखने के लिए Google को भेजा जाना चाहिए कि प्रतिक्रिया वैध है या नहीं। उदाहरण के लिए, छवि मिलान के साथ, आप कुछ भी या कुछ भी क्लिक कर सकते हैं, और सबमिट पर क्लिक कर सकते हैं। यह सही नहीं है, लेकिन 'जी-रिकैप्टा-प्रतिक्रिया' का मूल्य भर दिया गया है। आप इसे सत्यापित करने के लिए AJAX का उपयोग कर सकते हैं, लेकिन सर्वर साइड कोड में अपनी गुप्त कुंजी रखना सुनिश्चित करें। संक्षिप्त उत्तर यह है कि सर्वर को यह जांचना है कि क्या वह वैध है, चाहे आप AJAX के साथ ऐसा करें या एक पूर्ण फ़ॉर्म पोस्ट के साथ।
— सीन केंडल
60

सरल जावास्क्रिप्ट के साथ Google कैप्चा को मान्य करने के लिए इसका उपयोग करें।

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

यह कोड कॉल get_action (यह) विधि फॉर्म बटन पर हेड सेक्शन में रखा गया है:

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; 
    }
}
— प्रवीण शर्मा
स्रोत
<div class = "g-recaptcha" id = "rcaptcha" शैली = "मार्जिन-वाम: 90px;" data-sitekey = "my_key"> </ div> यह कोड बॉडी सेक्शन में स्पैन टैग के ठीक ऊपर है
— प्रवीण शर्मा
2
मुझे लगता है कि यह बेहतर उपाय है। इस तरह आप अपने फॉर्म सबमिट हैंडलर में प्रतिक्रिया की मान्यता को संभाल सकते हैं। यह कैप्चा कॉलबैक पर इसे संभालने की तुलना में अधिक तर्कसंगत लगता है। मुझे लगता है कि यह इस बात पर निर्भर करता है कि आपका उड़ना वैध है या जमा करना।
— लाइटबल्ब 1
4
आपको उपयोग करना चाहिए ===और !==; कोई कारण नहीं।
— slikts
28
यह समाधान गलत है। मुझे लगता है कि जब आपको प्रतिक्रिया मिलती है, तो आपको सत्यापन के लिए पैरामीटर (प्रतिक्रिया + secretkey + ClientIp) को Google को भेजना होगा। सत्यापन के बाद। Google हमें सफलता या असफलता लौटाता है। अपने उदाहरण में, आप दूसरे चरण का उपयोग न करें। क्या आप मुझे समझा सकते हैं: आपकी निजी कुंजी कहां है कब इस्तेमाल करेंगे?
— ईएफई
3
महमुत सही है, यह उत्तर खतरनाक रूप से गलत और अपूर्ण है।
— सीन केंडल
27

सरलीकृत पॉल का जवाब:

स्रोत:

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

HTML:

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

जे एस:

var correctCaptcha = function(response) {
        alert(response);
    };
— मैनुअल अजार
स्रोत
13
अन्य कई गलत समाधानों की तरह, आप यहां केवल टोकन प्राप्त कर रहे हैं। जब तक आप इसे अपनी गुप्त कुंजी के साथ Google को नहीं भेजते, तब तक आपने इसे मान्य नहीं किया है।
— evolross
यह किसी तरह मेरे तत्व में समस्या पैदा कर रहा है। अगर हम तत्व के अंदर डेटा-कॉलबैक का उपयोग करते हैं, तो वेबपैक इसे स्वयं संकलित नहीं कर सकता है
— Faris Rayhan
2
यह स्वीकृत उत्तर होना चाहिए क्योंकि यह रेंडर फ़ंक्शन को ओवरराइट करने की आवश्यकता नहीं है। जेएस में विशुद्ध रूप से सत्यापन के लिए, मुझे संदेह है कि यह संभव है क्योंकि इसे जेएस में गुप्त कुंजी रखने की आवश्यकता होगी और इस प्रकार सभी को अपने हाथों को प्राप्त करने की अनुमति होगी।
— आस्कर
25

यदि आप कॉलबैक पर Recaptcha रेंडर करते हैं

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

प्लेसहोल्डर के रूप में एक खाली DIV का उपयोग करना

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

तब आप एक सफल कैप्चा प्रतिक्रिया पर एक वैकल्पिक फ़ंक्शन कॉल निर्दिष्ट कर सकते हैं

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

पुनरावृत्ति प्रतिक्रिया तब 'करेक्टप्चा' फ़ंक्शन को भेजी जाएगी।

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

यह सब Google API नोट्स से था:

Google Recaptcha v2 API नोट्स

मैं थोड़ा अनिश्चित हूं कि आप ऐसा क्यों करना चाहेंगे। आम तौर पर आप सर्वर-साइड को सुरक्षित रूप से सत्यापित करने के लिए अपनी निजी कुंजी के साथ जी-रिकैप्टा-प्रतिक्रिया फ़ील्ड भेजेंगे। जब तक आप सबमिट बटन को अक्षम नहीं करना चाहते थे जब तक कि रिकैप्टा सक्सेसफुल या ऐसा नहीं था - जिस स्थिति में ऊपर काम करना चाहिए।

उम्मीद है की यह मदद करेगा।

पॉल

— pphillips001
स्रोत
1
खरोंच है कि, मुझे पता चला - आपके कोड का हिस्सा गलत है, इसलिए मैं एक संपादन का प्रस्ताव रखूंगा। चीयर्स!
— उपसर्ग
@ प्रीफ़िक्स क्या आपने अभी तक संपादन का प्रस्ताव दिया है? अपने संस्करण के लिए आगे देख रहे हैं।
— धन्यवाद_दिनेश
1
सुधारकैपचेक कॉलबैक फ़ंक्शन डिक्लेरेशन (grecaptcha.render के अंदर) उद्धरण के बिना होना चाहिए और ऑनलोडकॉलबैक से पहले रखा जाना चाहिए।
— प्रतुल संवाल
9

मैंने हार्वेईवी के समाधान का उपयोग किया लेकिन इसे गलत समझा और इसे बूटस्ट्रैप सत्यापनकर्ता के बजाय jQuery के सत्यापन के साथ किया।

  <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
स्रोत
6

मैंने सोचा कि वे सभी महान थे लेकिन मुझे वास्तव में उन्हें जावास्क्रिप्ट और सी # के साथ काम करने में परेशानी हो रही थी। मैंने जो किया था यह रहा। आशा है कि यह किसी और की मदद करता है।

//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
स्रोत
4

आप निम्नलिखित कोड का उपयोग करके अपने पुनरावृत्ति को रेंडर कर सकते हैं

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

फिर आप निम्न के रूप में "IsRecapchaValid ()" विधि का उपयोग करके अपने पुनरावृत्ति को मान्य कर सकते हैं।

 <script type="text/javascript">
     function IsRecapchaValid()
      {
      var res = grecaptcha.getResponse(widId);
      if (res == "" || res == undefined || res.length == 0)
         {
          return false;
         }
       return true;
      }
 </script>
— ताबिश उस्मान
स्रोत
तो, इस तरह: वापसी Res && res.length सर्वर सत्यापन के बारे में मत भूलना।
— एलेक्स गुरसकी
1

मैंने बूटस्ट्रैप सत्यापनकर्ता के अंदर पेलिक के समाधान का उपयोग किया और यह काम करता है। मैंने उसकी टिप्पणी जोड़ दी होगी, लेकिन मेरे पास प्रतिनिधि नहीं है;)। सरलीकृत संस्करण:

        $('#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
स्रोत
1

स्रोत लिंक

यहां छवि विवरण दर्ज करें

आप बस grecaptcha.getResponse () विधि का उपयोग करके क्लाइंट की तरफ देख सकते हैं 

          var rcres = grecaptcha.getResponse();
          if(rcres.length){
            grecaptcha.reset();
            showHideMsg("Form Submitted!","success");
          }else{
            showHideMsg("Please verify reCAPTCHA","error");
          }
— कोड जासूस
स्रोत
0

दुर्भाग्य से, क्लाइंट-साइड (वेब ​​ब्राउज़र) पर कैप्चा को मान्य करने का कोई तरीका नहीं है, क्योंकि कैप्चा की प्रकृति को प्रक्रिया को पूरा करने के लिए कम से कम दो अभिनेताओं (पक्षों) की आवश्यकता होती है। क्लाइंट-साइड - एक मानव को कुछ पहेली, गणित समीकरण, पाठ मान्यता को हल करने के लिए कहता है, और प्रतिक्रिया को कुछ मेटाडेटा के साथ एल्गोरिदम द्वारा एन्कोड किया जा रहा है जैसे कैप्चा सॉलिमैम्प, स्यूडो-रैंडम चैलेंज कोड को हल करना। एक बार क्लाइंट-साइड कैप्चा रिस्पांस कोड के साथ फॉर्म सबमिट कर देता है, तो सर्वर-साइड को नियमों के पूर्वनिर्धारित सेट के साथ इस कैप्चा रिस्पांस कोड को मान्य करने की आवश्यकता होती है। यदि कैप्चा 5 मिनट की अवधि के भीतर हल किया जाता है, अगर ग्राहक के आईपी पते समान हैं और इसी तरह। यह एक बहुत ही सामान्य विवरण है, कैप्चा कैसे काम करता है, हर एक कार्यान्वयन (जैसे Google का ReCaptcha, कुछ मूल गणित समीकरण जो स्व-निर्मित कैप्चा को हल करते हैं),

एनबी। क्लाइंट (वेब ​​ब्राउज़र) के पास जावास्क्रिप्ट कोड के निष्पादन को अक्षम करने का एक विकल्प है, जिसका अर्थ है कि प्रस्तावित समाधान पूरी तरह से बेकार हैं।

— vchyzhevskyi
स्रोत
-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>
स्निपेट का विस्तार करें

कैप्चा सत्यापन आवश्यक है।

— करणगिरि गोस्वामी
स्रोत
-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>

यह उम्मीद के मुताबिक काम करेगा।

— पापुन साहू
स्रोत
-2

Google reCAPTCHA संस्करण 2 ASP.Net अपने कॉलबैक फ़ंक्शंस का उपयोग करके क्लाइंट पक्ष पर कैप्चा प्रतिक्रिया को मान्य करने की अनुमति देता है। में इस उदाहरण के लिए, Google नई reCAPTCHA ASP.Net RequiredField सत्यापनकर्ता का उपयोग करके मान्य कर दिया जाएगा।

<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" />
— जूलिया
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.