Bagaimana cara memvalidasi google reCAPTCHA v2 menggunakan javascript / jQuery?

120

Saya memiliki formulir kontak sederhana di aspx. Saya ingin memvalidasi reCaptcha (sisi klien) sebelum mengirimkan formulir. Tolong bantu.

Kode sampel:

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

Saya ingin memvalidasi captcha dengan cmdSubmitmengklik.

Tolong bantu.

javascript  jquery  asp.net  google-api  recaptcha 
— Mahatma Aladdin
sumber
2
apa yang telah kamu lakukan sejauh ini? butuh info lebih lanjut, pertanyaannya terlalu kabur.
— Zaki
1
Jika Anda tidak mengirim permintaan posting ke google melalui validasi sisi server, Anda mungkin juga tidak menyertakan captcha. Validasi sisi klien yang disarankan di bawah ini akan diteruskan oleh bot.
— Virge Assault
Validasi captcha diklik di sisi klien> lakukan sesuatu> validasi sisi server data recaptcha> lakukan sesuatu.
— JPB
2
Periksa contoh contoh tutorial di sini freakyjolly.com/…
— Mata-mata Kode

Jawaban:

104

Verifikasi sisi klien ini dari reCaptcha- berikut ini berfungsi untuk saya:

jika reCaptcha tidak divalidasi pada grecaptcha.getResponse();pengembalian sisi klien null, yang lain mengembalikan nilai selain null.

Kode Javascript: 

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified
— Palak Tanejaa
sumber
113
Ini salah Captcha BELUM diverifikasi oleh JS, Anda harus mengirimkan tanggapan, bersama dengan kunci situs dan kunci rahasia Anda, ke server Google dari kode back end Anda untuk menentukan apakah Captcha berhasil dijawab. Jawaban ini sangat salah.
— Sean Kendle
9
Kutipan: Saat reCAPTCHA diselesaikan oleh pengguna akhir, bidang baru (g-recaptcha-response) akan diisi dalam HTML. developers.google.com/recaptcha/docs/verify
— CoalaWeb
6
Tapi bukan itu saja @CoalaWeb! Kutipan: Setelah mendapatkan token respons, Anda perlu memverifikasinya dengan reCAPTCHA menggunakan API berikut untuk memastikan token tersebut valid. https://developers.google.com/recaptcha/docs/verify
— Dylan Smith
14
Bagi mereka yang mengatakan jawabannya tidak benar, apakah Anda membaca pertanyaannya? Pertanyaan dan jawaban keduanya dengan jelas menentukan sisi klien - maksud yang jelas adalah untuk memeriksa bahwa captcha benar-benar diisi di sisi klien sebelum mengirim permintaan posting ke server untuk validasi lebih lanjut ..
— rococo
4
Anda hanya dapat mengetahui jika pengguna benar-benar mengisinya di sisi klien. Nilai 'g-recaptcha-response' akan diisi, tetapi itu perlu dikirim ke Google agar mereka dapat memeriksa apakah tanggapannya valid atau tidak. Misalnya, dengan pencocokan gambar, Anda dapat mengklik apa saja atau tidak sama sekali, dan mengklik kirim. Itu tidak benar, tetapi nilai 'g-recaptcha-response' sudah terisi. Anda dapat menggunakan AJAX untuk memverifikasinya, tetapi pastikan untuk menyimpan kunci rahasia Anda di kode sisi server. Jawaban singkatnya adalah server harus memeriksa apakah valid, apakah Anda melakukannya dengan AJAX atau dengan posting formulir lengkap.
— Sean Kendle
60

Gunakan ini untuk memvalidasi google captcha dengan javascript sederhana.

Kode ini di badan 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" />

Kode ini diletakkan di bagian kepala pada tombol formulir metode panggilan get_action (ini):

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
sumber
<div class = "g-recaptcha" id = "rcaptcha" style = "margin-left: 90px;" data-sitekey = "my_key"> </div> kode ini tepat di atas tag span di bagian body
— Pravin Sharma
2
Saya pikir ini adalah solusi yang lebih baik. Dengan cara ini Anda dapat menangani validasi respons di penangan pengiriman formulir Anda. Ini tampaknya lebih logis daripada mencoba menanganinya di callback captcha. Saya kira itu tergantung apakah Anda memvalidasi dengan cepat atau saat mengirimkan.
— Lightbulb1
4
Anda harus menggunakan ===dan !==; tidak ada alasan untuk tidak melakukannya.
— mulai
28
Solusi ini salah. Saya pikir ketika Anda mendapatkan respon, Anda harus mengirim parameter (respon + secretkey + ClientIp) ke google untuk validasi. Setelah validasi. Google mengembalikan kita sukses atau gagal. dalam contoh Anda, Anda tidak menggunakan langkah kedua. bisakah Anda menjelaskan kepada saya: Di mana kunci pribadi Anda. Kapan Anda akan menggunakannya?
— Mahmut EFE
3
Mahmut benar, jawaban ini sangat salah dan tidak lengkap.
— Sean Kendle
27

Jawaban Paulus yang disederhanakan:

Sumber:

<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
sumber
13
Seperti banyak solusi salah lainnya, Anda baru saja mendapatkan token di sini. Anda belum memvalidasinya sampai Anda mengirimkannya ke Google dengan kunci rahasia Anda.
— berkembang pada
Ini entah bagaimana menyebabkan masalah di elemen saya. Webpack tidak dapat dikompilasi sendiri jika kita menggunakan data-callback di dalam elemen
— Faris Rayhan
2
Ini harus menjadi jawaban yang diterima karena tidak perlu menimpa fungsi render. Adapun validasi murni di JS, saya ragu itu mungkin karena akan membutuhkan penempatan kunci rahasia ke dalam JS dan dengan demikian memungkinkan semua orang untuk mendapatkan semuanya.
— Askerman
25

Jika Anda merender Recaptcha dengan callback

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

menggunakan DIV kosong sebagai placeholder

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

lalu Anda dapat menentukan panggilan fungsi opsional pada respons CAPTCHA yang berhasil

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

Respons recaptcha kemudian akan dikirim ke fungsi 'correctCaptcha'.

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

Semua ini berasal dari catatan Google API:

Catatan API Google Recaptcha v2

Saya sedikit tidak yakin mengapa Anda ingin melakukan ini. Biasanya Anda akan mengirim bidang g-recaptcha-response bersama dengan kunci Pribadi Anda untuk memvalidasi sisi server dengan aman. Kecuali Anda ingin menonaktifkan tombol kirim sampai recaptcha berhasil atau semacamnya - dalam hal ini hal di atas akan berfungsi.

Semoga ini membantu.

Paul

— pphillips001
sumber
1
gores itu, saya menemukannya - bagian dari kode Anda salah jadi saya akan mengusulkan pengeditan. Bersulang!
— Awalan
@ Awalan Apakah Anda sudah mengusulkan pengeditan? Menantikan versi Anda.
— thanks_in_advance
1
Deklarasi fungsi panggilan balik correctCaptcha (di dalam grecaptcha.render) harus tanpa tanda kutip dan harus ditempatkan sebelum onloadCallback.
— Pratul Sanwal
9

Saya menggunakan solusi HarveyEV tetapi salah membacanya dan melakukannya dengan jQuery validate, bukan validator Bootstrap.

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

Saya pikir semuanya bagus tetapi saya mengalami masalah saat membuatnya bekerja dengan javascript dan c #. Inilah yang saya lakukan. Semoga bisa membantu orang lain.

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

Anda dapat membuat recaptcha Anda menggunakan kode berikut

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

Kemudian Anda dapat memvalidasi recaptcha Anda dengan menggunakan metode "IsRecapchaValid ()" sebagai berikut.

 <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
sumber
Jadi, seperti ini: kembalikan res && res.length jangan lupa tentang validasi server.
— Alex Gurskiy
1

Saya menggunakan solusi Palek di dalam validator Bootstrap dan berhasil. Saya akan menambahkan komentar ke dia tetapi saya tidak memiliki perwakilan;). Versi yang disederhanakan:

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

Tautan Sumber

masukkan deskripsi gambar di sini

Anda cukup memeriksa di sisi klien menggunakan metode grecaptcha.getResponse ()

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

Sayangnya, tidak ada cara untuk memvalidasi captcha hanya pada sisi klien (browser web), karena sifat captcha itu sendiri membutuhkan setidaknya dua aktor (sisi) untuk menyelesaikan prosesnya. Sisi klien - meminta manusia untuk memecahkan beberapa teka-teki, persamaan matematika, pengenalan teks, dan responsnya dikodekan oleh algoritme bersama dengan beberapa metadata seperti cap waktu penyelesaian captcha, kode tantangan pseudo-random. Setelah sisi klien mengirimkan formulir dengan kode respons captcha, sisi server perlu memvalidasi kode respons captcha ini dengan seperangkat aturan yang telah ditentukan, yaitu. jika captcha diselesaikan dalam waktu 5 menit, jika alamat IP klien sama dan seterusnya. Ini adalah deskripsi yang sangat umum, bagaimana captcha bekerja, setiap implementasi (seperti ReCaptcha Google, beberapa penyelesaian persamaan matematika dasar captcha buatan sendiri),

NB. Klien (browser web) memiliki opsi untuk menonaktifkan eksekusi kode JavaScript, yang berarti solusi yang diajukan sama sekali tidak berguna.

— vchyzhevskyi.dll
sumber
-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>
Luaskan cuplikan

Validasi captcha diperlukan.

— Karangiri goswami
sumber
-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>

Ini akan bekerja seperti yang diharapkan.

— Papun Sahoo
sumber
-2

Google reCAPTCHA versi 2 ASP.Net memungkinkan memvalidasi respons Captcha di sisi klien menggunakan fungsi Callback-nya. Dalam contoh ini , reCAPTCHA baru Google akan divalidasi menggunakan 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
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.