Saya memiliki 2 formulir dalam satu halaman. Salah satu formulir memiliki recaptcha yang ditampilkan sepanjang waktu. Yang lain harus menampilkan recaptcha hanya setelah peristiwa tertentu seperti memaksimalkan upaya login. Jadi ada kalanya saya membutuhkan 2 recaptcha untuk muncul di halaman yang sama. Apakah ini mungkin? Saya tahu saya mungkin bisa menggunakan satu untuk keduanya, tetapi cara saya memiliki tata letak, saya lebih suka memiliki 2. Terima kasih.
Pembaruan: baik saya kira itu mungkin tidak mungkin. Adakah yang bisa merekomendasikan pustaka pengambilan lain untuk digunakan berdampingan dengan reCaptcha? Saya sangat ingin memiliki 2 captcha di halaman yang sama.
Pembaruan 2: Bagaimana jika meletakkan setiap formulir dalam iframe? Apakah ini solusi yang dapat diterima?
Hüseyin Yağlı
jawaban . Sebagian besar browser harus mendukung JavaScript dan reCAPTCHA default tetap menggunakan JavaScript. Saya tidak tahu apa yang perlu dilakukan untuk menyelesaikan masalah tanpa dukungan JavaScript.Jawaban:
Pertanyaan serupa ditanyakan tentang melakukan ini di halaman ASP ( link ) dan konsensus di sana adalah bahwa hal itu tidak mungkin dilakukan dengan recaptcha. Tampaknya beberapa formulir di satu halaman harus menggunakan captcha yang sama, kecuali Anda ingin menggunakan captcha yang berbeda. Jika Anda tidak terkunci pada recaptcha, perpustakaan yang bagus untuk dilihat adalah komponen Zend Frameworks Zend_Captcha ( tautan ). Ini berisi beberapa
sumber
Hüseyin Yağlı
Jawabannya menjelaskan solusinya. Dokumentasi reCAPTCHA untuk solusi ini ada di developers.google.com/recaptcha/docs/display#explicit_render . Saya tidak tahu apa yang perlu dilakukan untuk menyelesaikan masalah tanpa dukungan JavaScript.Dengan versi Recaptcha saat ini ( reCAPTCHA API versi 2.0 ), Anda dapat memiliki beberapa recaptcha dalam satu halaman.
Tidak perlu mengkloning recaptcha atau mencoba menyelesaikan masalah. Anda hanya perlu meletakkan beberapa elemen div untuk recaptcha dan merender recaptcha di dalamnya secara eksplisit.
Ini mudah dengan google recaptcha api:
https://developers.google.com/recaptcha/docs/display#explicit_render
Berikut adalah contoh kode html:
Dalam kode javascript Anda, Anda harus menentukan fungsi panggilan balik untuk recaptcha:
Setelah ini, url skrip recaptcha Anda akan terlihat seperti ini:
Atau daripada memberikan ID ke bidang recaptcha Anda, Anda bisa memberi nama kelas dan mengulang elemen ini dengan pemilih kelas Anda dan memanggil .render ()
sumber
grecaptcha.getResponse(0)
dangrecaptcha.getResponse(1)
untuk memvalidasi beberapa contoh, saya akan menambahkan bahwa pengindeksan harus sesuai dengangrecaptcha.render
pemesanan. Untuk contoh ini,grecaptcha.render('RecaptchaField1'...
akan diverifikasi dengangrecaptcha.getResponse(0)
dangrecaptcha.render('RecaptchaField2'...
akan diverifikasi dengangrecaptcha.getResponse(1)
, dll ...Sederhana dan mudah:
1) Buat bidang recaptcha Anda secara normal dengan ini:
2) Muat skrip dengan ini:
3) Sekarang panggil ini untuk mengulangi bidang dan membuat recaptcha:
sumber
data-sitekey="YOUR_KEY_HERE"
tidak berguna dan dapat dihapus dari div (jika Anda perlu mengubah kunci, lebih sedikit tempat untuk mengedit)grecaptcha.render(el, {'sitekey' : $(el).attr('data-sitekey') });
Ini mudah dilakukan dengan
clone()
fungsi jQuery .Jadi, Anda harus membuat dua div pembungkus untuk recaptcha. Div recaptcha formulir pertama saya:
Div formulir kedua kosong (ID berbeda). Jadi milikku hanya:
Maka javascriptnya cukup sederhana:
Mungkin tidak membutuhkan parameter kedua dengan
true
nilai dalamclone()
, tetapi tidak ada salahnya untuk memilikinya ... Satu-satunya masalah dengan metode ini adalah jika Anda mengirimkan formulir Anda melalui ajax, masalahnya adalah Anda memiliki dua elemen yang memiliki nama yang sama dan Anda harus saya sedikit lebih pintar dengan cara Anda menangkap nilai elemen yang benar (dua id untuk elemen reCaptcha adalah#recaptcha_response_field
dan #recaptcha_challenge_field kalau-kalau ada yang membutuhkannya)sumber
Saya tahu pertanyaan ini sudah tua tetapi jika ada yang akan mencarinya di masa depan. Dimungkinkan untuk memiliki dua captcha dalam satu halaman. Dokumentasi berwarna merah muda ada di sini: https://developers.google.com/recaptcha/docs/display Contoh di bawah ini hanyalah dokumen formulir salinan dan Anda tidak perlu menentukan tata letak yang berbeda.
sumber
Jawaban ini merupakan perpanjangan dari jawaban @raphadko .
Jika Anda perlu mengekstrak kode captcha secara manual (seperti dalam permintaan ajax), Anda harus memanggil:
Tetapi bagaimana Anda bisa mengambil parameter id widget?
Saya menggunakan definisi CaptchaCallback ini untuk menyimpan id widget dari setiap kotak g-recaptcha (sebagai atribut data HTML):
Kemudian saya dapat menelepon:
untuk mengekstrak kode.
sumber
#your_recaptcha_box_id
?Saya memiliki formulir kontak di footer yang selalu ditampilkan dan juga beberapa halaman, seperti Buat Akun, dapat memiliki captcha juga, jadi secara dinamis dan saya menggunakan cara selanjutnya dengan jQuery:
html:
javascript
sumber
Ini adalah versi jawaban bebas JQuery yang diberikan oleh raphadko dan kata benda .
1) Buat bidang recaptcha Anda secara normal dengan ini:
2) Muat skrip dengan ini:
3) Sekarang panggil ini untuk mengulangi bidang dan membuat recaptcha:
sumber
Melihat kode sumber halaman saya mengambil bagian reCaptcha dan mengubah kode sedikit. Berikut kodenya:
HTML:
jQuery:
Saya menggunakan fungsionalitas tab javascript sederhana di sini. Jadi, tidak termasuk kode itu.
Ketika pengguna akan mengklik "Minta Informasi"
(#product_tabs_what)
maka JS akan memeriksa apakahrecapExist
adafalse
atau memiliki beberapa nilai. Jika memiliki nilai maka ini akan memanggilRecaptcha.destroy();
untuk menghancurkan reCaptcha lama yang dimuat dan akan membuatnya kembali untuk tab ini. Jika tidak, ini hanya akan membuat reCaptcha dan akan ditempatkan ke#more_info_recaptcha_box
div. Sama seperti untuk#product_tabs_wha
tab "Buat Penawaran" .sumber
sumber
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
tempat yang Anda butuhkan, dalam bentuk / divsPilihan yang baik adalah menghasilkan masukan recaptcha untuk setiap formulir dengan cepat (saya telah melakukannya dengan dua tetapi Anda mungkin dapat melakukan tiga atau lebih formulir). Saya menggunakan jQuery, validasi jQuery, dan plugin formulir jQuery untuk mengirim formulir melalui AJAX, bersama dengan API Recaptcha AJAX -
https://developers.google.com/recaptcha/docs/display#recaptcha_methods
Saat pengguna mengirimkan salah satu formulir:
Kemudian, mereka dapat mengisi recaptcha dan mengirimkan kembali formulir tersebut. Jika mereka memutuskan untuk mengirimkan formulir yang berbeda, ya, kode Anda akan memeriksa recaptcha yang ada sehingga Anda hanya akan memiliki satu recaptcha di halaman dalam satu waktu.
sumber
Untuk menambahkan sedikit ke jawaban raphadko : karena Anda memiliki banyak captcha (pada satu halaman), Anda tidak dapat menggunakan
g-recaptcha-response
parameter POST (universal) (karena hanya menampung satu respons captcha). Sebaliknya, Anda harus menggunakangrecaptcha.getResponse(opt_widget_id)
panggilan untuk setiap captcha. Inilah kode saya (asalkan setiap captcha ada di dalam bentuknya):HTML:
dan
JavaScript:
Perhatikan bahwa saya menerapkan delegasi acara (lihat menyegarkan DOM setelah menambahkan elemen ) ke semua elemen yang dimodifikasi secara dinamis. Ini mengikat respons setiap captha individu terhadap
submit
peristiwa bentuknya .sumber
Inilah solusi yang membangun banyak jawaban luar biasa. Opsi ini bebas jQuery, dan dinamis, tidak mengharuskan Anda untuk secara khusus menargetkan elemen berdasarkan id.
1) Tambahkan markup reCAPTCHA Anda seperti biasa:
2) Tambahkan berikut ini ke dalam dokumen. Ini akan berfungsi di browser apa pun yang mendukung API querySelectorAll
sumber
The
grecaptcha.getResponse()
Metode menerima opsional "WIDGET_ID" parameter, dan default untuk widget pertama kali dibuat jika tidak ditentukan. Widget_id dikembalikan darigrecaptcha.render()
metode untuk setiap widget yang dibuat, itu tidak terkait dengan atributid
wadah reCAPTCHA !!Setiap reCAPTCHA memiliki data responsnya sendiri. Anda harus memberikan div reCAPTCHA ID dan meneruskannya ke
getResponse
metode:misalnya
Tanggapan akses:
atau
sumber
Mungkin, cukup timpa callback Recaptcha Ajax. Bekerja jsfiddle: http://jsfiddle.net/Vanit/Qu6kn/
Anda bahkan tidak memerlukan div proxy karena dengan menimpa kode DOM tidak akan dijalankan. Panggil Recaptcha.reload () setiap kali Anda ingin memicu panggilan balik lagi.
sumber
Berikut adalah panduan yang bagus untuk melakukan hal itu:
http://mycodde.blogspot.com.ar/2014/12/multiple-recaptcha-demo-same-page.html
Pada dasarnya Anda menambahkan beberapa parameter ke panggilan api dan secara manual membuat setiap recaptcha:
PS: Metode "grecaptcha.render" menerima ID
sumber
Saya akan menggunakan recaptcha tak terlihat. Kemudian pada tombol Anda gunakan tag seperti "formname = 'yourformname'" untuk menentukan formulir mana yang akan dikirim dan menyembunyikan masukan formulir pengiriman.
Keuntungannya adalah memungkinkan Anda untuk menjaga validasi formulir html5 tetap utuh, satu recaptcha, tetapi beberapa tombol antarmuka. Cukup tangkap nilai input "captcha" untuk kunci token yang dihasilkan oleh recaptcha.
Menurut saya, JAUH ini lebih sederhana dan lebih mudah dikelola.
sumber