Bagaimana cara menampilkan beberapa recaptcha dalam satu halaman?


102

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?


Tidak bisakah Anda menampilkan yang sama dua kali?
Tyler Carter

1
Saya mencobanya .. ketika saya mencoba untuk menduplikasi kode captcha itu hanya akan menampilkan captcha yang lebih dulu
oym

Siapa pun yang menemukan ini untuk recaptcha API baru, ini dimungkinkan dengan menggunakan pemuatan eksplisit yang dijelaskan dengan contoh di dokumen di developers.google.com/recaptcha/docs/display#recaptcha_methods
El Yobo

3
Sebuah iframe seharusnya memungkinkan tetapi merupakan cara yang buruk untuk memecahkan masalah, dibandingkan dengan menggunakan JavaScript seperti di 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.
Edward

Jawaban:


14

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


9
Sebenarnya mungkin dengan reCAPTCHA , hanya saja tidak mungkin dilakukan tanpa JavaScript . Sebagian besar browser harus mendukung JavaScript dan ReCaptcha default tetap menggunakan JavaScript sehingga solusi ini bagus. 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.
Edward

Ini benar-benar mungkin dengan reCAPTCHA sebenarnya
Carlos Espinoza

208

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:

<form>
    <h1>Form 1</h1>
    <div><input type="text" name="field1" placeholder="field1"></div>
    <div><input type="text" name="field2" placeholder="field2"></div>
    <div id="RecaptchaField1"></div>
    <div><input type="submit"></div>
</form>

<form>
    <h1>Form 2</h1>
    <div><input type="text" name="field3" placeholder="field3"></div>
    <div><input type="text" name="field4" placeholder="field4"></div>
    <div id="RecaptchaField2"></div>
    <div><input type="submit"></div>
</form>

Dalam kode javascript Anda, Anda harus menentukan fungsi panggilan balik untuk recaptcha:

<script type="text/javascript">
    var CaptchaCallback = function() {
        grecaptcha.render('RecaptchaField1', {'sitekey' : '6Lc_your_site_key'});
        grecaptcha.render('RecaptchaField2', {'sitekey' : '6Lc_your_site_key'});
    };
</script>

Setelah ini, url skrip recaptcha Anda akan terlihat seperti ini:

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

Atau daripada memberikan ID ke bidang recaptcha Anda, Anda bisa memberi nama kelas dan mengulang elemen ini dengan pemilih kelas Anda dan memanggil .render ()


1
Secara kebetulan, apakah Anda tahu cara menambahkan bidang recaptcha tersembunyi untuk validasi jquery untuk setiap bidang ?, saat ini saya memilikinya hanya dengan 1 recaptchafield tetapi dapatkah itu bekerja dengan dua recaptcha? <input type = "hidden" class = "hiddenRecaptcha required" name = "hiddenRecaptcha" id = "hiddenRecaptcha">
Ivan Juarez

2
@IvanJuarez Ini adalah pertanyaan yang bagus untuk diajukan sebagai pertanyaan baru.
Hüseyin Yağlı

2
Bagi Anda yang ingin menggunakan grecaptcha.getResponse () dengan beberapa contoh, Anda cukup mereferensikan setiap render sebagai 0,1,2, dll. Misalnya contoh pertama akan direferensikan sebagai grecaptcha.getResponse (0).
Gene Kelly

1
Hemat waktu saya solusi yang sempurna
Mirza Obaid

2
Wow! Ini membutuhkan beberapa pekerjaan, tetapi untuk menambah catatan @ GeneKelly tentang grecaptcha.getResponse(0)dan grecaptcha.getResponse(1)untuk memvalidasi beberapa contoh, saya akan menambahkan bahwa pengindeksan harus sesuai dengan grecaptcha.renderpemesanan. Untuk contoh ini, grecaptcha.render('RecaptchaField1'...akan diverifikasi dengan grecaptcha.getResponse(0)dan grecaptcha.render('RecaptchaField2'...akan diverifikasi dengan grecaptcha.getResponse(1), dll ...
codacopia

75

Sederhana dan mudah:

1) Buat bidang recaptcha Anda secara normal dengan ini:

<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>

2) Muat skrip dengan ini:

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

3) Sekarang panggil ini untuk mengulangi bidang dan membuat recaptcha:

<script type="text/javascript">
  var CaptchaCallback = function() {
    jQuery('.g-recaptcha').each(function(index, el) {
        grecaptcha.render(el, {
            'sitekey' : jQuery(el).attr('data-sitekey')
            ,'theme' : jQuery(el).attr('data-theme')
            ,'size' : jQuery(el).attr('data-size')
            ,'tabindex' : jQuery(el).attr('data-tabindex')
            ,'callback' : jQuery(el).attr('data-callback')
            ,'expired-callback' : jQuery(el).attr('data-expired-callback')
            ,'error-callback' : jQuery(el).attr('data-error-callback')
        });
    });
  };
</script>

4
Ini adalah cara yang benar IMO, ini membuatnya dinamis karena saya dapat memiliki contoh tak terbatas tanpa menentukan id statis
Greg Alexander

1
Jika Anda perlu mengekstrak secara manual kode captcha (seperti dalam permintaan ajax) lihat jawaban saya .
VanDir

Bisakah Anda melihatnya pertanyaan saya ? Parameter POST akan kosong.
Marcio Mazzucato

3
data-sitekey="YOUR_KEY_HERE"tidak berguna dan dapat dihapus dari div (jika Anda perlu mengubah kunci, lebih sedikit tempat untuk mengedit)
the_nuts

3
Sebenarnya Anda salah ketik di sana. The Attribute data-sitekey dibutuhkan dan membuatnya lebih dinamis jika Anda memiliki banyak sitekey, mengapa pernah. Baris yang benar adalahgrecaptcha.render(el, {'sitekey' : $(el).attr('data-sitekey') });
Gkiokan

13

Ini mudah dilakukan dengan clone()fungsi jQuery .

Jadi, Anda harus membuat dua div pembungkus untuk recaptcha. Div recaptcha formulir pertama saya:

<div id="myrecap">
    <?php
        require_once('recaptchalib.php');
        $publickey = "XXXXXXXXXXX-XXXXXXXXXXX";
        echo recaptcha_get_html($publickey);
    ?>
</div>

Div formulir kedua kosong (ID berbeda). Jadi milikku hanya:

<div id="myraterecap"></div>

Maka javascriptnya cukup sederhana:

$(document).ready(function() {
    // Duplicate our reCapcha 
    $('#myraterecap').html($('#myrecap').clone(true,true));
});

Mungkin tidak membutuhkan parameter kedua dengan truenilai 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_fielddan #recaptcha_challenge_field kalau-kalau ada yang membutuhkannya)


Anda akan mengalami masalah saat meminta tantangan baru karena hanya akan memperbarui satu contoh recaptcha
Ogugua Belonwu

ini tidak berfungsi ... berarti hanya captcha asli (yang pertama disebut <div id = "myrecap"> di sini) hanya akan di-refresh, dan lainnya tidak di-refresh
Oxi

Sebenarnya Oxi, kekhawatiran Anda ditangani oleh komentar saya sebelumnya
Serj Sagan

1
Anda mungkin salah melakukannya ... bagaimana dengan tautan ke kode Anda di jsfiddle.net Bagaimanapun, tidak perlu lagi melakukan semua ini ... Anda harus menggunakan jawaban Hüseyin Yağlı.
Serj Sagan

7

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.

<script type="text/javascript">
  var verifyCallback = function(response) {
    alert(response);
  };
  var widgetId1;
  var widgetId2;
  var onloadCallback = function() {
    // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
    // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
    widgetId1 = grecaptcha.render('example1', {
      'sitekey' : 'your_site_key',
      'theme' : 'light'
    });
    widgetId2 = grecaptcha.render(document.getElementById('example2'), {
      'sitekey' : 'your_site_key'
    });
    grecaptcha.render('example3', {
      'sitekey' : 'your_site_key',
      'callback' : verifyCallback,
      'theme' : 'dark'
    });
  };
</script>

5

Jawaban ini merupakan perpanjangan dari jawaban @raphadko .

Jika Anda perlu mengekstrak kode captcha secara manual (seperti dalam permintaan ajax), Anda harus memanggil:

grecaptcha.getResponse(widget_id)

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

var CaptchaCallback = function() {
    jQuery('.g-recaptcha').each(function(index, el) {
        var widgetId = grecaptcha.render(el, {'sitekey' : 'your code'});
        jQuery(this).attr('data-widget-id', widgetId);
    });
};

Kemudian saya dapat menelepon:

grecaptcha.getResponse(jQuery('#your_recaptcha_box_id').attr('data-widget-id'));

untuk mengekstrak kode.


1
Hei, terima kasih untuk itu. Apa itu #your_recaptcha_box_id?
Lucas Bustamante

4

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:

<div class="g-recaptcha" id="g-recaptcha"></div>

<div class="g-recaptcha" id="g-recaptcha-footer"></div>

javascript

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit&hl=en"></script>
<script type="text/javascript">
  var CaptchaCallback = function(){        
      $('.g-recaptcha').each(function(){
        grecaptcha.render(this,{'sitekey' : 'your_site_key'});
      })
  };
</script>

4

Ini adalah versi jawaban bebas JQuery yang diberikan oleh raphadko dan kata benda .

1) Buat bidang recaptcha Anda secara normal dengan ini:

<div class="g-recaptcha"></div>

2) Muat skrip dengan ini:

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

3) Sekarang panggil ini untuk mengulangi bidang dan membuat recaptcha:

var CaptchaCallback = function() {
    var captchas = document.getElementsByClassName("g-recaptcha");
    for(var i = 0; i < captchas.length; i++) {
        grecaptcha.render(captchas[i], {'sitekey' : 'YOUR_KEY_HERE'});
    }
};

2

Melihat kode sumber halaman saya mengambil bagian reCaptcha dan mengubah kode sedikit. Berikut kodenya:

HTML:

<div class="tabs">
    <ul class="product-tabs">
        <li id="product_tabs_new" class="active"><a href="#">Detailed Description</a></li>
        <li id="product_tabs_what"><a href="#">Request Information</a></li>
        <li id="product_tabs_wha"><a href="#">Make Offer</a></li>
    </ul>
</div>

<div class="tab_content">
    <li class="wide">
        <div id="product_tabs_new_contents">
            <?php $_description = $this->getProduct()->getDescription(); ?>
            <?php if ($_description): ?>
                <div class="std">
                    <h2><?php echo $this->__('Details') ?></h2>
                    <?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_description, 'description') ?>
                </div>
            <?php endif; ?>
        </div>
    </li>

    <li class="wide">
        <label for="recaptcha">Captcha</label>
        <div id="more_info_recaptcha_box" class="input-box more_info_recaptcha_box"></div>
    </li>

    <li class="wide">
        <label for="recaptcha">Captcha</label>
        <div id="make_offer_recaptcha_box" class="input-box make_offer_recaptcha_box"></div>
    </li>
</div>

jQuery:

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        var recapExist = false;
      // Create our reCaptcha as needed
        jQuery('#product_tabs_what').click(function() {
            if(recapExist == false) {
                Recaptcha.create("<?php echo $publickey; ?>", "more_info_recaptcha_box");
                recapExist = "make_offer_recaptcha_box";
            } else if(recapExist == 'more_info_recaptcha_box') {
                Recaptcha.destroy(); // Don't really need this, but it's the proper way
                Recaptcha.create("<?php echo $publickey; ?>", "more_info_recaptcha_box");
                recapExist = "make_offer_recaptcha_box";
            }
        });
        jQuery('#product_tabs_wha').click(function() {
            if(recapExist == false) {
                Recaptcha.create("<?php echo $publickey; ?>", "make_offer_recaptcha_box");
                recapExist = "more_info_recaptcha_box";
            } else if(recapExist == 'make_offer_recaptcha_box') {
                Recaptcha.destroy(); // Don't really need this, but it's the proper way (I think :)
                Recaptcha.create("<?php echo $publickey; ?>", "make_offer_recaptcha_box");
                recapExist = "more_info_recaptcha_box";
            }
        });
    });
</script>

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 apakah recapExistada falseatau memiliki beberapa nilai. Jika memiliki nilai maka ini akan memanggil Recaptcha.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_boxdiv. Sama seperti untuk #product_tabs_whatab "Buat Penawaran" .


2

var ReCaptchaCallback = function() {
    	 $('.g-recaptcha').each(function(){
    		var el = $(this);
    		grecaptcha.render(el.get(0), {'sitekey' : el.data("sitekey")});
    	 });  
        };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallback&render=explicit" async defer></script>


ReCaptcha 1
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>

ReCaptcha 2
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>

ReCaptcha 3
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>


dimana 2 bentuk bagian?
MeSo2

maaf tidak mendapatkan Anda
surinder singh

taruh saja <div class="g-recaptcha" data-sitekey="your_site_key"></div> tempat yang Anda butuhkan, dalam bentuk / divs
surinder singh

1

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

  1. mencegat pengiriman - Saya menggunakan properti beforeSubmit dari jQuery Formulir Plugin
  2. hancurkan input recaptcha yang ada di halaman - Saya menggunakan metode $ .empty () jQuery dan Recaptcha.destroy ()
  3. panggil Recaptcha.create () untuk membuat bidang recaptcha untuk formulir tertentu
  4. return false.

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.


1

Untuk menambahkan sedikit ke jawaban raphadko : karena Anda memiliki banyak captcha (pada satu halaman), Anda tidak dapat menggunakan g-recaptcha-responseparameter 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:

<form ... />

<div id="RecaptchaField1"></div>

<div class="field">
  <input type="hidden" name="grecaptcha" id="grecaptcha" />
</div>

</form>

dan

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

JavaScript:

var CaptchaCallback = function(){
    var widgetId;

    $('[id^=RecaptchaField]').each(function(index, el) {

         widgetId = grecaptcha.render(el.id, {'sitekey' : 'your_site_key'});

         $(el).closest("form").submit(function( event ) {

            this.grecaptcha.value = "{\"" + index + "\" => \"" + grecaptcha.getResponse(widgetId) + "\"}"

         });
    });
};

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 submitperistiwa bentuknya .


Wow, saya sedang mencari berjam-jam untuk ini. Terima kasih!!
Black

1

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:

<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>

2) Tambahkan berikut ini ke dalam dokumen. Ini akan berfungsi di browser apa pun yang mendukung API querySelectorAll

<script src="https://www.google.com/recaptcha/api.js?onload=renderRecaptchas&render=explicit" async defer></script>
<script>
    window.renderRecaptchas = function() {
        var recaptchas = document.querySelectorAll('.g-recaptcha');
        for (var i = 0; i < recaptchas.length; i++) {
            grecaptcha.render(recaptchas[i], {
                sitekey: recaptchas[i].getAttribute('data-sitekey')
            });
        }
    }
</script>

1

The grecaptcha.getResponse()Metode menerima opsional "WIDGET_ID" parameter, dan default untuk widget pertama kali dibuat jika tidak ditentukan. Widget_id dikembalikan dari grecaptcha.render()metode untuk setiap widget yang dibuat, itu tidak terkait dengan atribut idwadah reCAPTCHA !!

Setiap reCAPTCHA memiliki data responsnya sendiri. Anda harus memberikan div reCAPTCHA ID dan meneruskannya ke getResponsemetode:

misalnya

<div id="reCaptchaLogin"
     class="g-recaptcha required-entry"
     data-sitekey="<?php echo $this->helper('recaptcha')->getKey(); ?>"
     data-theme="<?php echo($this->helper('recaptcha')->getTheme()); ?>"
     style="transform:scale(0.82);-webkit-transform:scale(0.82);transform-origin:0 0;-webkit-transform-origin:0 0;">
</div>


<script type="text/javascript">
  var CaptchaCallback = function() {
    jQuery('.g-recaptcha').each(function(index, el) {
        grecaptcha.render(el, {
            'sitekey' : jQuery(el).attr('data-sitekey')
            ,'theme' : jQuery(el).attr('data-theme')
            ,'size' : jQuery(el).attr('data-size')
            ,'tabindex' : jQuery(el).attr('data-tabindex')
            ,'callback' : jQuery(el).attr('data-callback')
            ,'expired-callback' : jQuery(el).attr('data-expired-callback')
            ,'error-callback' : jQuery(el).attr('data-error-callback')
        });
    });
  };
</script>

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

Tanggapan akses:

var reCaptchaResponse = grecaptcha.getResponse(0);

atau

var reCaptchaResponse = grecaptcha.getResponse(1);

0

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.

function doSomething(challenge){
    $(':input[name=recaptcha_challenge_field]').val(challenge);
    $('img.recaptcha').attr('src', '//www.google.com/recaptcha/api/image?c='+challenge);
}

//Called on Recaptcha.reload()
Recaptcha.finish_reload = function(challenge,b,c){
    doSomething(challenge);
}

//Called on page load
Recaptcha.challenge_callback = function(){
    doSomething(RecaptchaState.challenge)
}

Recaptcha.create("YOUR_PUBLIC_KEY");

0

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:

<script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>
<script>
        var recaptcha1;
        var recaptcha2;
        var myCallBack = function() {
            //Render the recaptcha1 on the element with ID "recaptcha1"
            recaptcha1 = grecaptcha.render('recaptcha1', {
                'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
                'theme' : 'light'
            });

            //Render the recaptcha2 on the element with ID "recaptcha2"
            recaptcha2 = grecaptcha.render('recaptcha2', {
                'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
                'theme' : 'dark'
            });
        };
</script>

PS: Metode "grecaptcha.render" menerima ID


0

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.

<script src="https://www.google.com/recaptcha/api.js" async defer ></script>

<div class="g-recaptcha" data-sitekey="yours" data-callback="onSubmit" data-size="invisible"></div>
<script>
var formanme = ''
$('button').on('click', function () { formname = '#'+$(this).attr('formname');
    if ( $(formname)[0].checkValidity() == true) { grecaptcha.execute(); }
    else { $(formname).find('input[type="submit"]').click() }
    });

var onSubmit = function(token) {
    $(formname).append("<input type='hidden' name='captcha' value='"+token+"' />");
    $(formname).find('input[type="submit"]').click()
    };
</script>

Menurut saya, JAUH ini lebih sederhana dan lebih mudah dikelola.

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.