Làm cách nào để xác thực google reCAPTCHA v2 bằng javascript / jQuery?

120

Tôi có một biểu mẫu liên hệ đơn giản trong aspx. Tôi muốn xác thực reCaptcha (phía máy khách) trước khi gửi biểu mẫu. Xin vui lòng giúp đỡ.

Mã mẫu:

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

Tôi muốn xác thực hình ảnh xác thực khi cmdSubmitnhấp chuột.

Xin vui lòng giúp đỡ.

— Mahatma Aladdin
nguồn

2

anh đã làm gì cho đến nay? cần thêm thông tin, câu hỏi quá mơ hồ.

— Zaki

1

Nếu bạn không gửi yêu cầu đăng bài tới google thông qua xác thực phía máy chủ, bạn cũng có thể không bao gồm hình ảnh xác thực. Các xác thực phía máy khách được đề xuất dưới đây sẽ được thông qua bởi các bot.

— Virge Assault

Xác thực captcha được nhấp vào phía máy khách> làm điều gì đó> xác thực phía máy chủ dữ liệu recaptcha> làm điều gì đó.

— JPB

2

Kiểm tra hướng dẫn ví dụ mẫu tại đây freakyjolly.com/…

— Code Spy

104

Xác minh phía Khách hàng này về reCaptcha- những điều sau đây phù hợp với tôi:

nếu reCaptcha không được xác thực khi grecaptcha.getResponse();trả về phía máy khách null, thì hàm else sẽ trả về một giá trị khác null.

Mã Javascript:

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified

— Palak Tanejaa
nguồn

113

Điều này là không đúng. Captcha CHƯA được JS xác minh, bạn cần gửi phản hồi, cùng với khóa trang web và khóa bí mật, tới máy chủ của Google từ mã phụ của bạn để xác định xem Captcha có được trả lời thành công hay không. Câu trả lời này không chính xác một cách nguy hiểm.

— Sean Kendle

9

Trích dẫn: Khi người dùng cuối giải quyết một reCAPTCHA, một trường mới (g-recaptcha-response) sẽ được điền trong HTML. developers.google.com/recaptcha/docs/verify

— CoalaWeb

6

Nhưng đó không phải là tất cả @CoalaWeb! Trích dẫn: Sau khi bạn nhận được mã phản hồi, bạn cần xác minh nó bằng reCAPTCHA bằng cách sử dụng API sau để đảm bảo mã thông báo hợp lệ. https://developers.google.com/recaptcha/docs/verify

— Dylan Smith

14

Đối với những người nói rằng câu trả lời là không chính xác, bạn thậm chí đã đọc câu hỏi? Các câu hỏi và trả lời cả hai xác định rõ ràng client-side - mục đích rõ ràng là để kiểm tra xem các hình ảnh xác thực đã thực sự điền vào client-side trước khi gửi một yêu cầu đường bưu điện đến máy chủ để xác nhận thêm ..

— rococo

4

Bạn chỉ có thể biết liệu người dùng đã thực sự điền vào phía máy khách hay chưa. Giá trị của 'g-recaptcha-response' sẽ được điền, nhưng giá trị đó cần được gửi đến Google để họ kiểm tra xem phản hồi có hợp lệ hay không. Ví dụ: với hình ảnh phù hợp, bạn có thể nhấp vào bất kỳ thứ gì hoặc không có gì và nhấp vào gửi. Điều đó không đúng, nhưng giá trị của 'g-recaptcha-response' đã được điền. Bạn có thể sử dụng AJAX để xác minh nó, nhưng hãy đảm bảo giữ khóa bí mật của bạn trong mã phía máy chủ. Câu trả lời ngắn gọn là máy chủ phải kiểm tra xem nó có hợp lệ không, cho dù bạn làm như vậy với AJAX hay với một bài đăng đầy đủ.

— Sean Kendle

60

Sử dụng điều này để xác thực hình ảnh xác thực của google bằng javascript đơn giản.

Mã này tại phần thân 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" />

Mã này đặt ở phần đầu trên nút biểu mẫu phương thức get_action (this) gọi:

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
nguồn

<div class = "g-recaptcha" id = "rcaptcha" style = "margin-left: 90px;" data-sitekey = "my_key"> </div> mã này ngay phía trên thẻ span trong phần nội dung

— Pravin Sharma

2

Tôi nghĩ rằng đây là giải pháp tốt hơn. Bằng cách này, bạn có thể xử lý việc xác thực phản hồi trong trình xử lý gửi biểu mẫu của mình. Điều này có vẻ hợp lý hơn là cố gắng xử lý nó trên lệnh gọi lại hình ảnh xác thực. Tôi đoán nó phụ thuộc vào việc xác thực của bạn đang bay hay đang gửi.

— Lightbulb

4

Bạn nên sử dụng ===và !==; không có lý do gì để không.

— slikts

28

Giải pháp này là sai. Tôi nghĩ rằng khi bạn nhận được phản hồi, bạn phải gửi tham số (response + secretkey + ClientIp) tới google để xác thực. Sau khi xác nhận. Google trả về cho chúng tôi thành công hay thất bại. trong ví dụ của bạn, bạn không sử dụng bước thứ hai. bạn có thể giải thích cho tôi: Khóa riêng của bạn ở đâu. Khi nào bạn sẽ sử dụng?

— Mahmut EFE

3

Mahmut đúng, câu trả lời này sai và không đầy đủ một cách nguy hiểm.

— Sean Kendle

27

Câu trả lời đơn giản của Paul:

Nguồn:

<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
nguồn

13

Giống như nhiều giải pháp sai khác, bạn chỉ nhận được mã thông báo ở đây. Bạn chưa xác thực nó cho đến khi bạn gửi nó tới Google bằng khóa bí mật của mình.

— evolross

Điều này bằng cách nào đó gây ra vấn đề trong phần tử của tôi. Webpack không thể biên dịch nó tự nếu chúng tôi sử dụng dữ liệu gọi lại bên trong phần tử

— Faris Rayhan

2

Đây phải là câu trả lời được chấp nhận vì nó không yêu cầu ghi đè lên chức năng kết xuất. Đối với việc xác thực hoàn toàn trong JS, tôi nghi ngờ điều đó là có thể vì nó sẽ yêu cầu đặt khóa bí mật vào JS và do đó cho phép mọi người sử dụng nó.

— Askerman

25

Nếu bạn hiển thị Recaptcha khi gọi lại

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

sử dụng DIV trống làm trình giữ chỗ

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

thì bạn có thể chỉ định một lệnh gọi hàm tùy chọn trên một phản hồi CAPTCHA thành công

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

Phản hồi recaptcha sau đó sẽ được gửi đến chức năng 'correctCaptcha'.

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

Tất cả điều này là từ các ghi chú API của Google:

Ghi chú API Google Recaptcha v2

Tôi hơi không chắc tại sao bạn lại muốn làm điều này. Thông thường, bạn sẽ gửi trường phản hồi g-recaptcha cùng với Khóa riêng tư của mình để xác thực phía máy chủ một cách an toàn. Trừ khi bạn muốn vô hiệu hóa nút gửi cho đến khi lấy lại thành công hoặc tương tự - trong trường hợp đó, cách trên sẽ hoạt động.

Hi vọng điêu nay co ich.

Paul

— pphillips001
nguồn

1

đầu đó, tôi đã tìm ra - một phần mã của bạn không chính xác nên tôi sẽ đề xuất chỉnh sửa. Chúc mừng!

— Tiền tố

@Prefix Bạn đã đề xuất chỉnh sửa chưa? Mong phiên bản của bạn.

— thanks_in_advance,

1

Khai báo hàm gọi lại đúngCaptcha (bên trong grecaptcha.render) phải không có dấu ngoặc kép và phải được đặt trước onloadCallback.

— Pratul Sanwal

9

Tôi đã sử dụng giải pháp của HarveyEV nhưng đọc sai và đã thực hiện nó với jQuery validate thay vì 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
nguồn

6

Tôi nghĩ rằng tất cả chúng đều tuyệt vời nhưng tôi gặp khó khăn khi thực sự làm việc với javascript và c #. Đây là những gì tôi đã làm. Hy vọng nó sẽ giúp ai đó khá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
nguồn

4

bạn có thể hiển thị recaptcha của mình bằng cách sử dụng mã sau

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

Sau đó, bạn có thể xác thực recaptcha của mình bằng cách sử dụng phương thức "IsRecapchaValid ()" như sau.

 <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
nguồn

Vì vậy, như thế này: return res && res.length, đừng quên xác nhận máy chủ.

— Alex Gurskiy

1

Tôi đã sử dụng giải pháp của Palek bên trong trình xác thực Bootstrap và nó hoạt động. Tôi đã thêm nhận xét cho anh ấy nhưng tôi không có đại diện;). Phiên bản đơn giản hóa:

        $('#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
nguồn

1

Liên kết nguồn

Bạn có thể chỉ cần kiểm tra phía máy khách bằng phương thức grecaptcha.getResponse ()

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

— Code Spy
nguồn

0

Thật không may, không có cách nào để xác thực captcha chỉ ở phía máy khách (trình duyệt web), vì bản chất của captcha yêu cầu ít nhất hai tác nhân (bên) để hoàn tất quá trình. Phía máy khách - yêu cầu con người giải một số câu đố, phép toán, nhận dạng văn bản và phản hồi đang được mã hóa bởi một thuật toán cùng với một số siêu dữ liệu như dấu thời gian giải hình ảnh xác thực, mã thử thách giả ngẫu nhiên. Sau khi phía máy khách gửi biểu mẫu có mã phản hồi captcha, thì phía máy chủ cần xác thực mã phản hồi captcha này bằng một bộ quy tắc được xác định trước, tức là. nếu captcha được giải quyết trong khoảng thời gian 5 phút, nếu địa chỉ IP của khách hàng giống nhau, v.v. Đây là một mô tả rất chung chung, cách thức hoạt động của captcha, mọi triển khai đơn lẻ (như ReCaptcha của Google, một số phép toán cơ bản giải mã captcha tự tạo),

NB. Máy khách (trình duyệt web) có một tùy chọn để vô hiệu hóa việc thực thi mã JavaScript, có nghĩa là các giải pháp được đề xuất hoàn toàn vô dụng.

— vchyzhevskyi
nguồn

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

Mở rộng đoạn mã

Xác thực Captcha là bắt buộc.

— Karangiri goswami
nguồn

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

Nó sẽ hoạt động như mong đợi.

— Papun Sahoo
nguồn

-2

Google reCAPTCHA phiên bản 2 ASP.Net cho phép xác thực phản hồi Captcha ở phía máy khách bằng các chức năng Gọi lại của nó. Trong ví dụ này , reCAPTCHA mới của Google sẽ được xác thực bằng 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
nguồn