Tek bir sayfada birden çok özeti nasıl gösteririm?


102

Tek bir sayfada 2 formum var. Formlardan birinde her zaman görüntülenen bir recaptcha var. Diğeri, yalnızca oturum açma girişimlerini en üst düzeye çıkarmak gibi belirli bir olaydan sonra bir recaptcha göstermelidir. Bu yüzden, aynı sayfada görünmek için 2 rekapte ihtiyacım olduğu zamanlar vardır. Mümkün mü? Muhtemelen her ikisi için de tek bir tane kullanabileceğimi biliyorum, ancak düzeni sahip olma şeklim, 2'ye sahip olmayı çok tercih ederim. Teşekkürler.

Güncelleme: Sanırım bu mümkün olmayabilir. Herhangi biri reCaptcha ile yan yana kullanmak için başka bir yakalama kitaplığı önerebilir mi? Aynı sayfada 2 captcha'ya sahip olmayı gerçekten istiyorum.

Güncelleme 2: Her formu bir iframe'e koyarsanız ne olur? Bu kabul edilebilir bir çözüm olur mu?


Aynısını iki kez gösteremez misin?
Tyler Carter

1
Bunu denedim ... captcha kodunu kopyalamaya çalıştığımda sadece ilk gelen
captcha'yı gösterecek

Yeni recaptcha API için buna rastlayanlar, bu, developer.google.com/recaptcha/docs/display#recaptcha_methods
El Yobo

3
Bir iframe mümkün olmalıdır, ancak sorunun Hüseyin Yağlıcevabında olduğu gibi JavaScript kullanmaya kıyasla, sorunu çözmenin kötü bir yoludur . Çoğu tarayıcı JavaScript'i desteklemelidir ve varsayılan reCAPTCHA yine de JavaScript kullanır. Yine de JavaScript desteği olmadan sorunu çözmek için ne yapılması gerektiğini bilmiyorum.
Edward

Yanıtlar:


14

Bunu bir ASP sayfasında ( bağlantı ) yapmakla ilgili benzer bir soru soruldu ve oradaki fikir birliği, recaptcha ile yapmanın mümkün olmadığı yönündeydi. Farklı bir captcha kullanmak istemediğiniz sürece, tek bir sayfadaki birden fazla formun captcha'yı paylaşması gerektiği anlaşılıyor. Recaptcha'ya kilitlenmediyseniz, göz atmak için iyi bir kitaplık Zend Frameworks Zend_Captcha bileşenidir ( bağlantı ). Birkaç içerir


9
Aslında reCAPTCHA ile mümkün , ancak JavaScript olmadan yapmak mümkün değil . Çoğu tarayıcı JavaScript'i desteklemelidir ve varsayılan ReCaptcha yine de JavaScript kullanır, bu nedenle bu çözüm iyidir. Hüseyin Yağlı'nin cevabı çözümü açıklıyor. Bu çözüme yönelik reCAPTCHA belgeleri, developers.google.com/recaptcha/docs/display#explicit_render adresindedir . Yine de JavaScript desteği olmadan sorunu çözmek için ne yapılması gerektiğini bilmiyorum.
Edward

ReCAPTCHA ile kesinlikle mümkün
Carlos Espinoza

210

Recaptcha'nın güncel sürümü ( reCAPTCHA API sürüm 2.0 ) ile, tek bir sayfada birden fazla recaptchas'a sahip olabilirsiniz.

Recaptcha'yı klonlamaya veya sorunu çözmeye çalışmanıza gerek yoktur. Tek yapmanız gereken, recaptchalar için birden fazla div öğesi koymalı ve recaptchaları içlerinde açıkça oluşturmalısınız.

Google recaptcha api ile bu çok kolaydır:
https://developers.google.com/recaptcha/docs/display#explicit_render

Örnek html kodu:

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

JavaScript kodunuzda, recaptcha için bir geri arama işlevi tanımlamanız gerekir:

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

Bundan sonra, recaptcha komut dosyası url'niz şöyle görünmelidir:

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

Veya recaptcha alanlarınıza kimlik vermek yerine, bir sınıf adı verebilir ve bu öğeleri sınıf seçicinizle döngüye sokabilir ve .render () çağırabilirsiniz.


1
Tesadüfen, her alan için jquery doğrulaması için gizli recaptcha alanını nasıl ekleyeceğinizi biliyor musunuz? Şu anda yalnızca 1 recaptchafield ile çalışıyorum, ancak iki recaptchas ile çalışabilir mi? <input type = "hidden" class = "hiddenRecaptcha gerekli" name = "hiddenRecaptcha" id = "hiddenRecaptcha">
Ivan Juarez

2
@IvanJuarez Bu, yeni bir soru olarak sormak için iyi bir soru.
Hüseyin Yağlı

2
Grecaptcha.getResponse () 'yi birden fazla örnekle kullanmak isteyenler için her bir render'a 0,1,2, vb. Olarak başvurabilirsiniz. Örneğin, ilk örnek grecaptcha.getResponse (0) olarak belirtilir.
Gene Kelly

1
Zamanımı onun mükemmel çözümü olarak kaydedin
Mirza Obaid

2
Vaov! Bu biraz üzerinde çalışmayı gerektirdi, ancak @ GeneKelly'nin birden fazla örneğe ilişkin notuna eklemek grecaptcha.getResponse(0)ve grecaptcha.getResponse(1)bunu doğrulamak için, indekslemenin grecaptcha.rendersıralamaya karşılık gelmesi gerektiğini ekleyeceğim . Bu örnek için, grecaptcha.render('RecaptchaField1'...ile doğrulanmış olur grecaptcha.getResponse(0)ve grecaptcha.render('RecaptchaField2'...doğrulama işlemini olur grecaptcha.getResponse(1)... vs
codacopia

75

Basit ve anlaşılır:

1) Recaptcha alanlarınızı bununla normal olarak oluşturun:

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

2) Komut dosyasını şununla yükleyin:

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

3) Şimdi bunu alanlar üzerinde yinelemek ve özetlemeleri oluşturmak için çağırın:

<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
Bu, IMO'nun doğru yoludur, bu, statik kimlikleri tanımlamadan sınırsız örneğe sahip olabilmem sayesinde dinamik hale getirir
Greg Alexander

1
Eğer (ajax istekleri gibi) elle Captcha kodunu elde gerekiyorsa bakmak cevabımı .
VanDir

Soruma bir bakar mısınız lütfen ? POST parametresi boş oluyor.
Marcio Mazzucato

3
data-sitekey="YOUR_KEY_HERE"işe yaramaz ve
div'den

3
Aslında orada bir yazım hatası var. Nitelik veri site anahtarına ihtiyaç vardır ve birden fazla site anahtarına sahip olmanız durumunda bunu daha da dinamik hale getirir, neden olmasın. Doğru satır şu olacaktırgrecaptcha.render(el, {'sitekey' : $(el).attr('data-sitekey') });
Gkiokan

13

Bu, jQuery'nin clone()işlevi ile kolayca gerçekleştirilir .

Yani recaptcha için iki sarmalayıcı div oluşturmalısınız. İlk formumun recaptcha div:

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

İkinci formun div'i boş (farklı kimlik). Yani benimki sadece:

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

O zaman javascript oldukça basittir:

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

Muhtemelen trueiçinde değeri olan ikinci parametreye ihtiyaç duymaz clone(), ancak buna sahip olmaktan zarar gelmez ... Bu yöntemle ilgili tek sorun, formunuzu ajax aracılığıyla gönderiyorsanız, sorun, sahip olduğunuz iki öğeye sahip olmanızdır. aynı isim ve bu doğru öğenin değerlerini yakalama yöntemim konusunda biraz daha akıllı olmalısınız ( #recaptcha_response_fieldreCaptcha öğeleri için iki kimlik ve birisinin ihtiyaç duyması durumunda #recaptcha_challenge_field)


Yalnızca bir recaptcha örneğini güncelleyeceği için yeni bir meydan okuma talebinde bulunduğunuzda sorunlarla karşılaşacaksınız
Ogugua Belonwu

bu işe yaramıyor ... yalnızca orijinal captcha'nın (burada <div id = "myrecap"> olarak adlandırılan ilki) yalnızca yenileneceği ve diğerleri yenilenmeyeceği anlamına gelir
Oxi

Aslında Oxi, endişen önceki
yorumumla

1
Muhtemelen yanlış yapıyorsunuz ... jsfiddle.net'te kodunuza bir bağlantıya ne dersiniz Neyse, artık bunlardan hiçbirini yapmanıza gerek yok ... Hüseyin Yağlı cevabını kullanmalısınız.
Serj Sagan

7

Bu sorunun eski olduğunu biliyorum ama gelecekte birileri arayacaksa diye. Tek sayfada iki captcha olması mümkündür. Pembe dokümantasyon burada: https://developers.google.com/recaptcha/docs/display Aşağıdaki örnek sadece bir kopya form dokümanıdır ve farklı düzenler belirtmenize gerek yoktur.

<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

Bu cevap için bir uzantısıdır @raphadko 'ın cevabı .

Captcha kodunu manuel olarak çıkarmanız gerekirse (ajax isteklerinde olduğu gibi) aramanız gerekir:

grecaptcha.getResponse(widget_id)

Ancak widget kimliği parametresini nasıl alabilirsiniz?

Her g-recaptcha kutusunun widget kimliğini (bir HTML veri özelliği olarak) saklamak için bu CaptchaCallback tanımını kullanıyorum :

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

O zaman arayabilirim:

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

kodu çıkarmak için.


1
Hey, bunun için teşekkürler. Nedir #your_recaptcha_box_id?
Lucas Bustamante

4

Altbilgide her zaman görüntülenen iletişim formum var ve ayrıca Hesap Oluştur gibi bazı sayfalarda captcha da olabilir, bu yüzden dinamik olarak ve jQuery ile bir sonraki yolu kullanıyorum:

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

Bu, raphadko ve isim tarafından sağlanan cevabın JQuery içermeyen bir versiyonudur .

1) Recaptcha alanlarınızı bununla normal olarak oluşturun:

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

2) Komut dosyasını şununla yükleyin:

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

3) Şimdi bunu alanlar üzerinde yinelemek ve özetlemeleri oluşturmak için çağırın:

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

Sayfanın kaynak koduna baktığımda reCaptcha kısmını aldım ve kodu biraz değiştirdim. İşte kod:

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>

Burada basit javascript sekmesi işlevini kullanıyorum. Yani, bu kodu eklemedi.

Kullanıcı, "Talep Bilgileri" tıklıyorsunuz zaman (#product_tabs_what)o zaman JS kontrol edecek recapExistolan falseya da bazı değere sahiptir. Bir değeri varsa, bu Recaptcha.destroy();eski yüklü reCaptcha'yı yok etmeye çağıracak ve bu sekme için yeniden oluşturacaktır. Aksi takdirde bu sadece bir reCaptcha oluşturur ve div'e yerleştirilir #more_info_recaptcha_box. "Teklif Ver" #product_tabs_whasekmesi ile aynı.


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>


2 form bölümü nerede?
MeSo2

üzgünüm seni
anlamıyorum

<div class="g-recaptcha" data-sitekey="your_site_key"></div>formlarda /
divlerde

1

İyi bir seçenek, anında her form için bir recaptcha girişi oluşturmaktır (bunu iki ile yaptım ancak muhtemelen üç veya daha fazla form yapabilirsiniz). Formu AJAX aracılığıyla, Recaptcha AJAX API ile birlikte göndermek için jQuery, jQuery doğrulama ve jQuery form eklentisi kullanıyorum -

https://developers.google.com/recaptcha/docs/display#recaptcha_methods

Kullanıcı formlardan birini gönderdiğinde:

  1. gönderime müdahale - jQuery Form Eklentisinin beforeSubmit özelliğini kullandım
  2. sayfadaki mevcut recaptcha girişlerini yok et - jQuery'nin $ .empty () yöntemini ve Recaptcha.destroy () kullandım
  3. belirli bir form için bir recaptcha alanı oluşturmak için Recaptcha.create () öğesini çağırın
  4. yanlış dönüş.

Ardından, recaptcha'yı doldurabilir ve formu yeniden gönderebilirler. Bunun yerine farklı bir form göndermeye karar verirlerse, kodunuz mevcut recaptchaları kontrol eder, böylece sayfada bir seferde yalnızca bir recaptcha'ya sahip olursunuz.


1

İçin biraz eklemek için raphadko 'ın cevabı : Eğer (bir sayfada) birden captcha'lar beri, siz (evrensel) kullanamazsınız g-recaptcha-response(yalnızca bir CAPTCHA tepkisini tutar çünkü) POST parametresi. Bunun yerine, grecaptcha.getResponse(opt_widget_id)her captcha için call kullanmalısınız . İşte kodum (her captcha kendi formunda olması koşuluyla):

HTML:

<form ... />

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

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

</form>

ve

<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) + "\"}"

         });
    });
};

Dinamik olarak değiştirilmiş tüm öğelere etkinlik yetkilendirmesini uyguladığıma ( öğe eklendikten sonra DOM yenilemesine bakın ) dikkat edin. Bu, her bir captha'nın tepkisini form submitolayına bağlar .


Vay canına, bunun için saatler arıyordum. Teşekkürler!!
Black

1

İşte mükemmel yanıtların çoğunu oluşturan bir çözüm. Bu seçenek jQuery içermez ve dinamiktir, öğeleri kimliğe göre özel olarak hedeflemenizi gerektirmez.

1) reCAPTCHA işaretlemenizi normalde yaptığınız gibi ekleyin:

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

2) Aşağıdakileri belgeye ekleyin. QuerySelectorAll API'sini destekleyen herhangi bir tarayıcıda çalışacaktır.

<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

grecaptcha.getResponse()Yöntem, isteğe bağlı belirtilmemişse oluşturulan ilk Parçacık parametre ve varsayılan "WIDGET_ID" kabul eder. grecaptcha.render()Oluşturulan her widget için yöntemden bir widget_id döndürülür , bu özellik ile ilgili değildir.id , reCAPTCHA konteynerinin !!

Her reCAPTCHA'nın kendi yanıt verileri vardır. ReCAPTCHA div'e bir kimlik vermeniz ve bunu getResponseyönteme iletmeniz gerekir :

Örneğin

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

Erişim yanıtı:

var reCaptchaResponse = grecaptcha.getResponse(0);

veya

var reCaptchaResponse = grecaptcha.getResponse(1);

0

Mümkün, sadece Recaptcha Ajax geri aramalarının üzerine yazın. Çalışma jsfiddle: http://jsfiddle.net/Vanit/Qu6kn/

Bir proxy div'e bile ihtiyacınız yok çünkü üzerine yazmalarla DOM kodu çalışmayacaktır. Geri aramaları tekrar tetiklemek istediğinizde Recaptcha.reload () öğesini çağırın.

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

İşte tam olarak bunu yapmak için güzel bir rehber:

http://mycodde.blogspot.com.ar/2014/12/multiple-recaptcha-demo-same-page.html

Temel olarak, api çağrısına bazı parametreler eklersiniz ve her bir recaptcha'yı manuel olarak işlersiniz:

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

Not: "grecaptcha.render" yöntemi bir kimlik alır


0

Görünmez recaptcha kullanırdım. Ardından, hangi formun gönderileceğini belirtmek ve bir form gönderme girişini gizlemek için düğmenizde "formname = 'formname'" gibi bir etiket kullanın.

Bunun avantajı, html5 form doğrulamasını olduğu gibi, bir recaptcha, ancak birden çok düğme arayüzünü tutmanıza izin vermesidir. Recaptcha tarafından oluşturulan token anahtarı için "captcha" giriş değerini yakalamanız yeterlidir.

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

Bu FAR'ı daha basit ve yönetmesi daha kolay buluyorum.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.