ฉันจะแสดงคำซ้ำหลายรายการในหน้าเดียวได้อย่างไร

ฉันมี 2 แบบในหน้าเดียว รูปแบบใดรูปแบบหนึ่งจะมีการแสดงรายการซ้ำอยู่ตลอดเวลา อีกรายการควรแสดง recaptcha หลังจากเหตุการณ์บางอย่างเท่านั้นเช่นการพยายามเข้าสู่ระบบสูงสุด มีหลายครั้งที่ฉันต้องการให้คำบรรยาย 2 รายการปรากฏในหน้าเดียวกัน เป็นไปได้หรือไม่ ฉันรู้ว่าฉันอาจจะใช้อันเดียวสำหรับทั้งสอง แต่วิธีที่ฉันมีเลย์เอาต์ฉันอยากจะมี 2 มากขอบคุณ

อัปเดต:ฉันเดาว่าอาจเป็นไปไม่ได้ มีใครแนะนำคลังการจับภาพอื่นให้ใช้ร่วมกับ reCaptcha ได้ไหม ฉันต้องการให้มี 2 captchas ในหน้าเดียวกัน

อัปเดต 2:จะเกิดอะไรขึ้นถ้าใส่แต่ละรูปแบบใน iframe? นี่จะเป็นทางออกที่ยอมรับได้หรือไม่?

มีการถามคำถามที่คล้ายกันเกี่ยวกับการทำสิ่งนี้บนหน้า ASP ( ลิงก์ ) และฉันทามติตรงนั้นคือไม่สามารถทำกับ recaptcha ได้ ดูเหมือนว่าหลายรูปแบบในหน้าเดียวจะต้องแชร์แคปต์ชาเว้นแต่คุณจะเต็มใจใช้แคปต์ชาอื่น หากคุณไม่ได้ล็อกไว้ใน recaptcha ไลบรารีที่ดีที่จะดูคือคอมโพเนนต์ Zend Frameworks Zend_Captcha ( ลิงก์ ) มันมีไม่กี่

ด้วย Recaptcha เวอร์ชันปัจจุบัน ( reCAPTCHA API เวอร์ชัน 2.0 ) คุณสามารถมีRecaptcha หลายรายการในหน้าเดียว

ไม่จำเป็นต้องโคลน recaptcha หรือพยายามแก้ไขปัญหา คุณเพียงแค่ต้องใส่องค์ประกอบ div หลายรายการสำหรับการรีแคปต์และแสดงรายการรีแคปต์ภายในอย่างชัดเจน

ทำได้ง่ายๆด้วย google recaptcha api:
https://developers.google.com/recaptcha/docs/display#explicit_render

นี่คือตัวอย่างโค้ด 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>

ในโค้ดจาวาสคริปต์ของคุณคุณต้องกำหนดฟังก์ชันเรียกกลับสำหรับ 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>

หลังจากนี้ url สคริปต์ recaptcha ของคุณควรมีลักษณะดังนี้:

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

หรือแทนที่จะให้ ID ในช่อง recaptcha ของคุณคุณสามารถตั้งชื่อคลาสและวนซ้ำองค์ประกอบเหล่านี้ด้วยตัวเลือกคลาสของคุณและเรียก .render ()

ง่ายและตรงไปตรงมา:

1) สร้างช่อง recaptcha ของคุณตามปกติด้วยสิ่งนี้:

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

2) โหลดสคริปต์ด้วยสิ่งนี้:

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

3) ตอนนี้เรียกสิ่งนี้เพื่อวนซ้ำในฟิลด์และสร้าง recaptchas:

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

สิ่งนี้ทำได้อย่างง่ายดายด้วยclone()ฟังก์ชั่นของ jQuery

ดังนั้นคุณต้องสร้าง div wrapper สองรายการสำหรับ recaptcha รูปแบบแรกของฉัน Recaptcha Div:

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

div ของรูปแบบที่สองว่างเปล่า (ID ต่างกัน) ของฉันเป็นเพียง:

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

จาวาสคริปต์นั้นค่อนข้างง่าย:

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

อาจไม่ต้องการพารามิเตอร์ที่สองที่มีtrueค่าเป็นclone()แต่ก็ไม่เจ็บที่จะมี ... ปัญหาเดียวของวิธีนี้คือถ้าคุณส่งแบบฟอร์มผ่าน ajax ปัญหาคือคุณมีสององค์ประกอบที่มี ชื่อเดียวกันและคุณต้องให้ฉันฉลาดกว่านี้ด้วยวิธีที่คุณจับค่าขององค์ประกอบที่ถูกต้องนั้น (รหัสสองรายการสำหรับองค์ประกอบ reCaptcha คือ#recaptcha_response_fieldและ #recaptcha_challenge_field ในกรณีที่มีคนต้องการ)

ฉันรู้ว่าคำถามนี้เก่า แต่เผื่อว่าใครจะมองหาในอนาคต เป็นไปได้ที่จะมี captcha สองรายการในหนึ่งหน้า Pink to documentation อยู่ที่นี่: https://developers.google.com/recaptcha/docs/display ตัวอย่างด้านล่างนี้เป็นเพียงแบบฟอร์มสำเนาเอกสารและคุณไม่จำเป็นต้องระบุรูปแบบอื่น

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

คำตอบนี้เป็นส่วนขยายไป@raphadko 's คำตอบ

หากคุณต้องการแยกรหัส captcha ด้วยตนเอง (เช่นในคำขอ ajax) คุณต้องโทร:

grecaptcha.getResponse(widget_id)

แต่คุณจะดึงพารามิเตอร์ id วิดเจ็ตได้อย่างไร?

ฉันใช้คำจำกัดความของCaptchaCallbackเพื่อเก็บรหัสวิดเจ็ตของแต่ละกล่อง g-recaptcha (เป็นแอตทริบิวต์ข้อมูล 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);
    });
};

จากนั้นฉันสามารถโทร:

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

เพื่อแยกรหัส

ฉันมีแบบฟอร์มการติดต่อในส่วนท้ายที่แสดงอยู่เสมอและบางเพจเช่นสร้างบัญชีสามารถมี captcha ได้เช่นกันดังนั้นจึงเป็นแบบไดนามิกและฉันใช้วิธีถัดไปกับ jQuery:

html:

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

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

จาวาสคริปต์

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

นี้เป็นรุ่น JQuery ฟรีของคำตอบที่ได้รับจากraphadkoและเป็นรูปธรรม

1) สร้างช่อง recaptcha ของคุณตามปกติด้วยสิ่งนี้:

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

2) โหลดสคริปต์ด้วยสิ่งนี้:

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

3) ตอนนี้เรียกสิ่งนี้เพื่อวนซ้ำในฟิลด์และสร้าง recaptchas:

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

เมื่อดูที่ซอร์สโค้ดของหน้าฉันใช้ส่วน reCaptcha และเปลี่ยนโค้ดเล็กน้อย นี่คือรหัส:

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>

ฉันใช้ฟังก์ชันแท็บจาวาสคริปต์ที่เรียบง่ายที่นี่ ดังนั้นไม่รวมรหัสนั้น

เมื่อผู้ใช้คลิกที่ "ขอข้อมูล" (#product_tabs_what)JS จะตรวจสอบว่าrecapExistมีfalseหรือมีค่าอยู่หรือไม่ หากมีค่าสิ่งนี้จะเรียกRecaptcha.destroy();ให้ทำลาย reCaptcha ที่โหลดเก่าและจะสร้างขึ้นใหม่สำหรับแท็บนี้ มิฉะนั้นนี่จะเป็นการสร้าง reCaptcha และจะใส่ลงใน#more_info_recaptcha_boxdiv เช่นเดียวกับ#product_tabs_whaแท็บ"Make Offer"

ตัวเลือกที่ดีคือการสร้างการป้อนข้อมูลแบบรีแคปชาสำหรับแต่ละรูปแบบได้ทันที (ฉันทำสองแบบ แต่คุณอาจทำได้สามรูปแบบขึ้นไป) ฉันใช้ jQuery, jQuery validation และ jQuery form plugin เพื่อโพสต์แบบฟอร์มผ่าน AJAX พร้อมกับ Recaptcha AJAX API -

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

เมื่อผู้ใช้ส่งแบบฟอร์มอย่างใดอย่างหนึ่ง:

1. สกัดกั้นการส่ง - ฉันใช้คุณสมบัติ beforeSubmit ของ jQuery Form Plugin
2. ทำลายอินพุต recaptcha ที่มีอยู่บนหน้า - ฉันใช้วิธี $ .empty () ของ jQuery และ Recaptcha.destroy ()
3. เรียก Recaptcha.create () เพื่อสร้างฟิลด์ recaptcha สำหรับแบบฟอร์มเฉพาะ
4. กลับเท็จ

จากนั้นพวกเขาสามารถกรอก recaptcha และส่งแบบฟอร์มอีกครั้ง หากพวกเขาตัดสินใจที่จะส่งแบบฟอร์มอื่นแทนรหัสของคุณจะตรวจหาแคปต์ชาที่มีอยู่ดังนั้นคุณจะมีแคปต์ชาเพียงรายการเดียวในหน้าต่อครั้ง

หากต้องการเพิ่มคำตอบของraphadko : เนื่องจากคุณมีcaptchaหลายรายการ (ในหน้าเดียว) คุณจึงไม่สามารถใช้g-recaptcha-responseพารามิเตอร์ POST (สากล) ได้(เนื่องจากมีการตอบสนองของ captcha เพียงรายการเดียว) คุณควรใช้การgrecaptcha.getResponse(opt_widget_id)โทรสำหรับแต่ละ captcha แทน นี่คือรหัสของฉัน (หากแต่ละ captcha อยู่ในรูปแบบของมัน):

HTML:

<form ... />

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

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

</form>

และ

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

         });
    });
};

สังเกตว่าฉันใช้การมอบหมายเหตุการณ์ (ดูรีเฟรช DOM หลังจากผนวกองค์ประกอบ ) กับองค์ประกอบที่แก้ไขแบบไดนามิกทั้งหมด สิ่งนี้จะผูกการตอบสนองของแคปธาทุกคนกับรูปแบบของมันsubmitเหตุการณ์ใน

นี่คือวิธีแก้ปัญหาที่สร้างคำตอบที่ยอดเยี่ยมมากมาย ตัวเลือกนี้เป็น jQuery ฟรีและเป็นแบบไดนามิกไม่ต้องการให้คุณกำหนดเป้าหมายองค์ประกอบโดยเฉพาะตามรหัส

1) เพิ่มมาร์กอัป reCAPTCHA ของคุณตามปกติ:

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

2) เพิ่มสิ่งต่อไปนี้ลงในเอกสาร มันจะทำงานในเบราว์เซอร์ใดก็ได้ที่รองรับquerySelectorAll API

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

grecaptcha.getResponse()วิธีการยอมรับตัวเลือก "WIDGET_ID" พารามิเตอร์และค่าเริ่มต้นเครื่องมือสร้างขึ้นครั้งแรกถ้าไม่ระบุรายละเอียด widget_id ถูกส่งคืนจากgrecaptcha.render()วิธีการสำหรับแต่ละวิดเจ็ตที่สร้างขึ้นซึ่งไม่เกี่ยวข้องกับแอตทริบิวต์idของคอนเทนเนอร์ reCAPTCHA !!

reCAPTCHA แต่ละรายการมีข้อมูลการตอบสนองของตัวเอง คุณต้องให้รหัส reCAPTCHA div และส่งต่อไปยังgetResponseเมธอด:

เช่น

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

การตอบสนองการเข้าถึง:

var reCaptchaResponse = grecaptcha.getResponse(0);

หรือ

var reCaptchaResponse = grecaptcha.getResponse(1);

เป็นไปได้เพียงเขียนทับการเรียกกลับของ Recaptcha Ajax การทำงาน jsfiddle: http://jsfiddle.net/Vanit/Qu6kn/

คุณไม่จำเป็นต้องใช้พร็อกซี Div ด้วยซ้ำเพราะการเขียนทับโค้ด DOM จะไม่ทำงาน เรียก Recaptcha.reload () เมื่อใดก็ตามที่คุณต้องการเรียกใช้การโทรกลับอีกครั้ง

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

นี่คือคำแนะนำที่ดีสำหรับการทำเช่นนั้น:

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

โดยทั่วไปคุณจะเพิ่มพารามิเตอร์บางอย่างในการเรียก api และแสดงผลแต่ละ 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: เมธอด "grecaptcha.render" ได้รับ ID

ฉันจะใช้รีแคปชาที่มองไม่เห็น จากนั้นบนปุ่มของคุณให้ใช้แท็กเช่น "formname = 'yourformname'" เพื่อระบุว่าจะส่งแบบฟอร์มใดและซ่อนการป้อนข้อมูลแบบฟอร์ม

ข้อดีของสิ่งนี้คือช่วยให้คุณสามารถคงการตรวจสอบความถูกต้องของฟอร์ม html5 ไว้ได้อย่างสมบูรณ์แบบหนึ่ง recaptcha แต่มีอินเทอร์เฟซปุ่มหลายปุ่ม เพียงจับค่าอินพุต "captcha" สำหรับคีย์โทเค็นที่สร้างโดย 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>

ฉันพบว่า FAR นี้ง่ายกว่าและจัดการได้ง่ายกว่า