Bagaimana cara menampilkan beberapa recaptcha dalam satu halaman?

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?

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

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

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>

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)

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>

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.

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>

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'});
    }
};

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

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.

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 .

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>

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

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");

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

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.