ฉันจะตรวจสอบ Google reCAPTCHA v2 โดยใช้ javascript / jQuery ได้อย่างไร

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>

ฉันต้องการตรวจสอบ captcha เมื่อcmdSubmitคลิก

กรุณาช่วย.

javascript  jquery  asp.net  google-api  recaptcha 
— มหาตมะอะลาดิน
แหล่งที่มา
2
คุณได้ทำอะไรไปบ้าง? ต้องการข้อมูลเพิ่มเติมคำถามคลุมเครือเกินไป
— Zaki
1
หากคุณไม่ได้ส่งคำขอโพสต์ไปยัง Google ผ่านการตรวจสอบความถูกต้องทางฝั่งเซิร์ฟเวอร์คุณอาจไม่ได้ใส่ captcha ไว้ด้วย การตรวจสอบฝั่งไคลเอ็นต์ที่แนะนำด้านล่างนี้จะถูกส่งผ่านโดยบอท
— Virge Assault
ตรวจสอบ captcha คือคลิกไคลเอนต์> ทำบางสิ่ง> ตรวจสอบฝั่งเซิร์ฟเวอร์ข้อมูลของ recaptcha> ทำบางสิ่ง
— JPB
2
ตรวจสอบตัวอย่างการสอนได้ที่นี่freakyjolly.com/…
— Code Spy

คำตอบ:

106

การยืนยันฝั่งไคลเอ็นต์ของreCaptcha- สิ่งต่อไปนี้ใช้ได้ผลสำหรับฉัน:

ถ้า reCaptcha ไม่ได้ตรวจสอบบนฝั่งไคลเอ็นต์grecaptcha.getResponse();ผลตอบแทนอื่นเป็นผลตอบแทนเป็นค่าอื่นนอกเหนือnullnull

รหัส Javascript: 

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified
— ปาลักทาเนจา
แหล่งที่มา
113
สิ่งนี้ไม่ถูกต้อง JS ไม่ได้รับการตรวจสอบ Captcha คุณจะต้องส่งคำตอบพร้อมกับรหัสไซต์และรหัสลับไปยังเซิร์ฟเวอร์ของ Google จากรหัสส่วนหลังของคุณเพื่อตรวจสอบว่า Captcha ได้รับการตอบรับสำเร็จหรือไม่ คำตอบนี้ไม่ถูกต้องอย่างอันตราย
— Sean Kendle
9
ใบเสนอราคา: เมื่อ reCAPTCHA ได้รับการแก้ไขโดยผู้ใช้ปลายทางฟิลด์ใหม่ (g-recaptcha-response) จะถูกเติมใน HTML Developers.google.com/recaptcha/docs/verify
— CoalaWeb
6
แต่นั่นไม่ใช่ทั้งหมด @CoalaWeb! ใบเสนอราคา: หลังจากที่คุณได้รับโทเค็นการตอบกลับคุณจะต้องยืนยันด้วย reCAPTCHA โดยใช้ API ต่อไปนี้เพื่อให้แน่ใจว่าโทเค็นถูกต้อง https://developers.google.com/recaptcha/docs/verify
— Dylan Smith
14
สำหรับผู้ที่ตอบว่าไม่ถูกต้องคุณได้อ่านคำถามหรือไม่? ทั้งคำถามและคำตอบระบุฝั่งไคลเอ็นต์อย่างชัดเจน - เจตนาที่ชัดเจนคือการตรวจสอบว่ามีการกรอก captcha ในฝั่งไคลเอ็นต์จริงก่อนที่จะส่งคำขอโพสต์ไปยังเซิร์ฟเวอร์เพื่อตรวจสอบความถูกต้องต่อไป ..
— rococo
4
คุณจะทราบได้ก็ต่อเมื่อผู้ใช้กรอกข้อมูลในฝั่งไคลเอ็นต์เท่านั้น ระบบจะกรอกค่า "g-recaptcha-response" แต่ต้องส่งไปยัง Google เพื่อตรวจสอบว่าคำตอบนั้นถูกต้องหรือไม่ ตัวอย่างเช่นเมื่อมีการจับคู่ภาพคุณสามารถคลิกอะไรก็ได้หรือไม่ก็ได้แล้วคลิกส่ง ไม่ถูกต้อง แต่มีการกรอกค่าของ 'g-recaptcha-response' คุณสามารถใช้ AJAX เพื่อตรวจสอบได้ แต่อย่าลืมเก็บรหัสลับของคุณไว้ในรหัสฝั่งเซิร์ฟเวอร์ คำตอบสั้น ๆ คือเซิร์ฟเวอร์ต้องตรวจสอบว่าถูกต้องหรือไม่ไม่ว่าคุณจะทำด้วย AJAX หรือโพสต์แบบเต็ม
— Sean Kendle
60

ใช้สิ่งนี้เพื่อตรวจสอบ Google captcha ด้วยจาวาสคริปต์ง่ายๆ

รหัสนี้ที่เนื้อหา 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" style = "margin-left: 90px;" data-sitekey = "my_key"> </div> โค้ดนี้เหนือแท็ก span ในส่วนเนื้อหา
— Pravin Sharma
2
ฉันคิดว่านี่เป็นทางออกที่ดีกว่า ด้วยวิธีนี้คุณสามารถจัดการการตรวจสอบความถูกต้องของการตอบกลับในตัวจัดการการส่งแบบฟอร์มของคุณ สิ่งนี้ดูเหมือนจะมีเหตุผลมากกว่าการพยายามจัดการกับการเรียกกลับ captcha ฉันเดาว่ามันขึ้นอยู่กับการตรวจสอบความถูกต้องของคุณในทันทีหรือที่ส่ง
— Lightbulb1
4
คุณควรใช้===และ!==; ไม่มีเหตุผลที่จะไม่ทำ
— slikts
28
การแก้ปัญหานี้ผิด ฉันคิดว่าเมื่อคุณได้รับการตอบกลับคุณต้องส่งพารามิเตอร์ (response + secretkey + ClientIp) ไปยัง Google เพื่อตรวจสอบความถูกต้อง หลังจากตรวจสอบความถูกต้อง Google ส่งคืนความสำเร็จหรือล้มเหลวให้เรา ในตัวอย่างของคุณคุณไม่ได้ใช้ขั้นตอนที่สอง คุณช่วยอธิบายฉันได้ไหม: คีย์ส่วนตัวของคุณอยู่ที่ไหน คุณจะใช้เมื่อไหร่?
— Mahmut EFE
3
Mahmut ถูกต้องคำตอบนี้ผิดและไม่สมบูรณ์อย่างอันตราย
— Sean Kendle
27

คำตอบของ Paul อย่างง่าย:

ที่มา:

<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);
    };
— มานูเอลอาซาร์
แหล่งที่มา
13
เช่นเดียวกับวิธีแก้ปัญหาอื่น ๆ ที่ไม่ถูกต้องคุณเพิ่งได้รับโทเค็นที่นี่ คุณยังไม่ได้ตรวจสอบจนกว่าคุณจะส่งรหัสลับไปยัง Google
— evolross
สิ่งนี้ทำให้เกิดปัญหาในองค์ประกอบของฉัน Webpack ไม่สามารถรวบรวมได้เองหากเราใช้ data-callback ภายในองค์ประกอบ
— Faris Rayhan
2
นี่ควรเป็นคำตอบที่ยอมรับได้เนื่องจากไม่จำเป็นต้องเขียนทับฟังก์ชันการแสดงผล สำหรับการตรวจสอบความถูกต้องใน JS ทั้งหมดฉันสงสัยว่าเป็นไปได้เพราะจะต้องวางคีย์ลับลงใน JS และทำให้ทุกคนสามารถจับมือกันได้
— Askerman
25

หากคุณแสดง Recaptcha ในการโทรกลับ

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

ใช้ DIV ว่างเปล่าเป็นตัวยึด

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

จากนั้นคุณสามารถระบุการเรียกใช้ฟังก์ชันเสริมสำหรับการตอบสนอง CAPTCHA ที่ประสบความสำเร็จ

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

จากนั้นคำตอบของ recaptcha จะถูกส่งไปยังฟังก์ชัน 'correctCaptcha'

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

ทั้งหมดนี้มาจากบันทึกของ Google API:

Google Recaptcha v2 API Notes

ฉันไม่แน่ใจเล็กน้อยว่าทำไมคุณถึงต้องการทำสิ่งนี้ โดยปกติคุณจะส่งฟิลด์ g-recaptcha-response พร้อมกับคีย์ส่วนตัวของคุณเพื่อตรวจสอบความถูกต้องของฝั่งเซิร์ฟเวอร์อย่างปลอดภัย เว้นแต่คุณต้องการปิดการใช้งานปุ่มส่งจนกว่า recaptcha จะประสบความสำเร็จหรือในกรณีดังกล่าวข้างต้นควรใช้งานได้

หวังว่านี่จะช่วยได้

พอล

— pphillips001
แหล่งที่มา
1
เกาฉันคิดออก - ส่วนหนึ่งของรหัสของคุณไม่ถูกต้องดังนั้นฉันจะเสนอให้แก้ไข ไชโย!
— คำนำหน้า
@Prefix คุณเสนอการแก้ไขหรือยัง รอคอยเวอร์ชันของคุณ
— thank_in_advance
1
การประกาศฟังก์ชันการเรียกกลับ correctCaptcha (ภายใน grecaptcha.render) ควรไม่มีเครื่องหมายคำพูดและควรวางไว้หน้า onloadCallback
— Pratul Sanwal
9

ฉันใช้โซลูชันของ HarveyEV แต่อ่านผิดและใช้ jQuery validate แทน Bootstrap validator

  <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

ฉันคิดว่าพวกเขาทั้งหมดดีมาก แต่ฉันมีปัญหาในการทำให้พวกเขาทำงานกับจาวาสคริปต์และ c # นี่คือสิ่งที่ฉันทำ หวังว่ามันจะช่วยคนอื่น

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

จากนั้นคุณสามารถตรวจสอบความถูกต้องของ recaptcha โดยใช้เมธอด "IsRecapchaValid ()" ดังนี้

 <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
แหล่งที่มา
ดังนั้นเช่นนี้: return res && res.length อย่าลืมเกี่ยวกับการตรวจสอบความถูกต้องของเซิร์ฟเวอร์
— Alex Gurskiy
1

ฉันใช้โซลูชันของ Palek ในโปรแกรมตรวจสอบ Bootstrap และใช้งานได้ ฉันได้เพิ่มความคิดเห็นให้กับเขา แต่ฉันไม่มีตัวแทน;) เวอร์ชันที่เรียบง่าย:

        $('#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");
          }
— รหัส Spy
แหล่งที่มา
0

น่าเสียดายที่ไม่มีวิธีตรวจสอบ captcha บนฝั่งไคลเอ็นต์เท่านั้น (เว็บเบราว์เซอร์) เนื่องจากธรรมชาติของ captcha นั้นต้องการตัวแสดงอย่างน้อยสองคน (ด้านข้าง) เพื่อให้กระบวนการเสร็จสมบูรณ์ ฝั่งไคลเอ็นต์ - ขอให้มนุษย์ไขปริศนาสมการทางคณิตศาสตร์การจดจำข้อความและการตอบสนองจะถูกเข้ารหัสโดยอัลกอริทึมควบคู่ไปกับข้อมูลเมตาบางอย่างเช่น captcha ในการแก้การประทับเวลารหัสท้าทายแบบสุ่มหลอก เมื่อฝั่งไคลเอ็นต์ส่งแบบฟอร์มพร้อมรหัสการตอบกลับ captcha ฝั่งเซิร์ฟเวอร์จำเป็นต้องตรวจสอบความถูกต้องของรหัสการตอบกลับ captcha นี้ด้วยชุดกฎที่กำหนดไว้ล่วงหน้าเช่น หาก captcha ได้รับการแก้ไขภายในระยะเวลา 5 นาทีหากที่อยู่ IP ของไคลเอนต์เหมือนกันเป็นต้น นี่เป็นคำอธิบายทั่วไปวิธีการทำงานของแคปต์ชาการใช้งานทุกครั้ง (เช่น ReCaptcha ของ Google การสมการทางคณิตศาสตร์พื้นฐานบางอย่างในการแก้แคปต์ชาที่สร้างขึ้นเอง)

NB ไคลเอนต์ (เว็บเบราว์เซอร์) มีตัวเลือกในการปิดใช้งานการเรียกใช้โค้ด JavaScript ซึ่งหมายความว่าโซลูชันที่นำเสนอนั้นไร้ประโยชน์โดยสิ้นเชิง

— 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>
ขยายข้อมูลโค้ด

ต้องมีการตรวจสอบความถูกต้องของ Captcha

— คารางกิริโกสวามิ
แหล่งที่มา
-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

ASP.Net ของ Google reCAPTCHA เวอร์ชัน 2 อนุญาตให้ตรวจสอบการตอบสนองของ Captcha ในฝั่งไคลเอ็นต์โดยใช้ฟังก์ชันการโทรกลับ ในตัวอย่างนี้ reCAPTCHA ใหม่ของ Google จะถูกตรวจสอบโดยใช้ 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" />
— จูเลีย
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.