Bagaimana cara memuat ulang ReCaptcha menggunakan JavaScript?

177

Saya memiliki formulir pendaftaran dengan AJAX sehingga saya ingin menyegarkan gambar Recaptcha kapan saja terjadi kesalahan (yaitu nama pengguna sudah digunakan).

Saya mencari kode yang kompatibel dengan ReCaptcha untuk memuat ulang menggunakan JavaScript.

javascript recaptcha AhmetB - Google
sumber
1
Jangan repot-repot. Mengapa mengganti CAPTCHA jika nama pengguna diambil?
SLaks
18
@SLaks : mungkin karena ia pertama kali memeriksa captcha dan kemudian memeriksa pengguna - dan begitu captcha digunakan, itu tidak lagi valid. Melakukan hal ini sebaliknya pengguna jahat dapat dengan mudah merusak server dan mendapatkan daftar semua pengguna menggunakan kekuatan kasar tanpa terganggu dengan captcha.
Tomasz Nurkiewicz
1
@TomaszNurkiewicz PEMBARUAN: pengguna jahat tidak akan dapat mengirim captcha yang sama untuk validasi lebih dari satu kali. Jadi tidak, bruteforce tidak mungkin di sini. Alasan untuk menyegarkan captcha adalah untuk hanya mengizinkan pengguna untuk memasukkannya lagi.
Tony Sepia
Saya percaya penyerang yang terampil dapat mengeksploitasi serangan waktu untuk menemukan data apa yang salah tergantung di mana validasi bot; Saya lebih suka menyimpan milik saya sebagai cek pertama dan segera menolak apa pun jika gagal, juga membantu mengurangi beban di server saya jadi saya tidak melakukan permintaan DB ketika mereka akan ditolak
Steve Byrne

Jawaban:

370

Untuk reCaptcha v2, gunakan:

grecaptcha.reset();

Jika Anda menggunakan reCaptcha v1 ( mungkin tidak ):

Recaptcha.reload();

Ini akan dilakukan jika ada Recaptcha yang sudah dimuat di Internet window.

(Diperbarui berdasarkan komentar @ SebiH di bawah.)

AhmetB - Google
sumber
20
Untuk siapa saja yang menggunakan reCAPTCHA baru: Jalur ini sekarang berubah menjadi grecaptcha.reset();( documenation )
SebiH
Saya menggunakan ini grecaptcha.reset();untuk aplikasi reaksi saya, dan berfungsi dengan baik
yussan
4
jika Anda tidak yakin grecaptcha dimuat, gunakanif (window.grecaptcha) grecaptcha.reset();
fred727
Meskipun ini memuat ulang captcha, nilai bidang untuk respons captcha tampaknya tidak dihapus, meninggalkan formulir saya valid.
Damian Green
58

Jika Anda menggunakan versi 1

Recaptcha.reload();

Jika Anda menggunakan versi 2

grecaptcha.reset();
Dasun
sumber
1
Menyalin jawaban yang diterima dan mem-posting ulang 3 tahun kemudian. Urg.
PR Whitehead
@PRWhitehead Silakan lihat riwayat edit. BTW, terima kasih atas suaranya.
Dasun
Ya, Anda belum mengedit milik Anda, dan Anda pertama kali menambahkannya 3 bulan setelah jawaban yang diterima diperbarui untuk mencerminkan perubahan pada API - memengaruhi relevansi jawaban awal dan bertahun-tahun setelah ditambahkan pertama kali. Saya menurunkannya karena ini jawaban yang diterima lebih berguna.
PR Whitehead
2
Saya menambahkan jawaban ini karena saya menghadapi masalah yang sama. Meskipun jawaban yang diterima mencerminkan jawaban yang benar pada saat itu, itu tidak cukup jelas. Setidaknya bagi saya, itu sebabnya saya memutuskan untuk menambahkan sebagai jawaban baru dengan pemisahan yang jelas (jawaban yang diterima gagal untuk mencatat perbedaan terhadap versi).
Dasun
8 
grecaptcha.reset(opt_widget_id)

Atur ulang widget reCAPTCHA. Id widget opsional dapat dilewati, jika tidak maka fungsi akan mengatur ulang widget pertama yang dibuat. (dari halaman web Google)

Kutalia
sumber
itu hanya mereset captcha pertama pada halaman
Maxwell sc
@ Maxwells.c Apakah Anda bahkan membaca posting? Secara opsional Anda dapat melewati id widget dan menghapus widget ke-n. Jika Anda tidak lulus, maka yang pertama diatur ulang.
Kutalia
1
Apa sebenarnya id widget itu? Saya mencoba meneruskan id html dari recaptcha <div> tetapi mendapat kesalahan "id klien recaptcha tidak valid". Saya pikir saya perlu membuat widget secara eksplisit karena saya pikir metode render () mengembalikan id yang saya butuhkan.
Pete
6

Coba ini 

<script type="text/javascript" src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
          function showRecaptcha() {
            Recaptcha.create("YOURPUBLICKEY", 'captchadiv', {
              theme: 'red',
              callback: Recaptcha.focus_response_field
            });
          }
 </script>

<div id="captchadiv"></div>

Jika Anda memanggil showRecaptcha, captchadiv akan diisi dengan instance recaptcha baru.

Tim
sumber
Anda dapat mengubah kode dan memanggil showRecaptcha onload? Apakah ini membantumu?
Tim
6

Atau Anda bisa mensimulasikan klik pada tombol refresh

// If recaptcha object exists, refresh it
    if (typeof Recaptcha != "undefined") {
      jQuery('#recaptcha_reload').click();
    }
AlxVallejo
sumber
1
Untuk beberapa alasan, Recaptchadan grecaptchakeduanya tidak ditentukan pada halaman saya. Ini bekerja untuk saya, dengan sedikit modifikasi:if( $("#recaptcha_reload").length > 0 ){ ....
Nate-Bit Int
Saya menggunakannya untuk mengetahui kapan selesai iterasi array tanpa menghitung elemen-elemennya.
m3nda
3

Untuk pengguna AngularJS:

$window.grecaptcha.reset();
Marcelo C.
sumber
1
Dalam kasus saya tanpa $ - window.grecaptcha.reset ();
Tony Sepia
3

Untuk versi baru reCaptcha v2 gunakan:

grecaptcha.reset();
Tujuan perusahaan
sumber
2

Jika Anda menggunakan Versi 1.0 API reCAPTCHA, harap tingkatkan ke Versi 2.0 (Versi 1.0 tidak lagi didukung)

Gunakan grecaptcha.reset();untuk mengatur ulang captcha.

s sharif
sumber
0

jika Anda menggunakan recaptcha 2.0 baru gunakan ini: untuk kode di belakang:

ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);

untuk javascript sederhana

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>
Sara Khan
sumber