한 페이지에 여러 리 캡차를 표시하려면 어떻게합니까?

한 페이지에 두 가지 양식이 있습니다. 양식 중 하나에는 항상 표시되는 recaptcha가 있습니다. 다른 하나는 최대 로그인 시도와 같은 특정 이벤트 이후에만 recaptcha를 표시해야합니다. 따라서 동일한 페이지에 2 개의 리캡 차가 표시되어야하는 경우가 있습니다. 이게 가능해? 두 가지 모두에 대해 하나를 사용할 수 있다는 것을 알고 있지만 레이아웃 방식에서는 2 개를 선호합니다. 감사합니다.

업데이트 : 가능하지 않을 수도 있습니다. 누구든지 reCaptcha와 함께 사용할 다른 캡처 라이브러리를 추천 할 수 있습니까? 나는 정말로 같은 페이지에 2 개의 캡차를 가질 수 있기를 원합니다.

업데이트 2 : 각 양식을 iframe에 넣으면 어떻게 되나요? 이것이 허용 가능한 솔루션입니까?

ASP 페이지 ( link ) 에서이 작업을 수행하는 것에 대해 비슷한 질문이 제기되었으며 거기에있는 합의는 recaptcha로 할 수 없다는 것입니다. 다른 보안 문자를 사용하지 않는 한 단일 페이지의 여러 양식이 보안 문자를 공유해야하는 것 같습니다. recaptcha에 잠겨 있지 않은 경우 살펴볼 좋은 라이브러리는 Zend Frameworks Zend_Captcha 구성 요소 ( 링크 )입니다. 그것은 몇 가지를 포함합니다

현재 버전의 Recaptcha ( reCAPTCHA API 버전 2.0 )를 사용하면 한 페이지에 여러 개의 recaptcha가있을 수 있습니다.

recaptcha를 복제하거나 문제 해결을 시도 할 필요가 없습니다. recaptcha에 여러 div 요소를 넣고 그 안에 recaptcha를 명시 적으로 렌더링하면됩니다.

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>

그 후, recaptcha 스크립트 URL은 다음과 같습니다.

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

또는 recaptcha 필드에 ID를 제공하는 대신 클래스 이름을 제공하고 클래스 선택기로 이러한 요소를 반복하고 .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>

이것은 jQuery의 clone()기능으로 쉽게 수행됩니다 .

따라서 recaptcha에 대해 두 개의 래퍼 div를 만들어야합니다. 내 첫 번째 양식의 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 요소의 두 ID는 #recaptcha_response_field누군가가 필요할 경우를 대비하여 #recaptcha_challenge_field입니다).

나는이 질문이 오래되었다는 것을 알고 있지만 누군가가 미래에 그것을 찾을 경우를 대비하여. 한 페이지에 두 개의 보안 문자가있을 수 있습니다. 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 의 대답에 대한 확장 입니다.

ajax 요청과 같이 captcha 코드를 수동으로 추출해야하는 경우 다음을 호출해야합니다.

grecaptcha.getResponse(widget_id)

그러나 위젯 ID 매개 변수를 어떻게 검색 할 수 있습니까?

이 CaptchaCallback 정의 를 사용하여 각 g-recaptcha 상자 의 위젯 ID 를 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'));

코드를 추출합니다.

항상 표시되는 바닥 글에 연락처 양식이 있고 계정 만들기와 같은 일부 페이지에도 보안 문자가있을 수 있으므로 동적이며 다음 방법으로 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>

이것은 raphadko 및 명사에서 제공하는 JQuery가없는 버전의 답변 입니다.

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에 배치됩니다 . "Make Offer" #product_tabs_wha탭 과 동일합니다 .

좋은 옵션은 즉석에서 각 양식에 대한 recaptcha 입력을 생성하는 것입니다 (2 개로 수행했지만 3 개 이상의 양식을 수행 할 수 있음). Recaptcha AJAX API와 함께 AJAX를 통해 양식을 게시하기 위해 jQuery, jQuery 유효성 검사 및 jQuery 양식 플러그인을 사용하고 있습니다.

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

사용자가 양식 중 하나를 제출하는 경우 :

1. 제출 가로 채기-jQuery Form Plugin의 beforeSubmit 속성을 사용했습니다.
2. 페이지의 기존 recaptcha 입력을 파괴하십시오-jQuery의 $ .empty () 메서드와 Recaptcha.destroy ()를 사용했습니다.
3. Recaptcha.create ()를 호출하여 특정 양식에 대한 recaptcha 필드를 만듭니다.
4. false를 반환합니다.

그런 다음 recaptcha를 작성하고 양식을 다시 제출할 수 있습니다. 대신 다른 양식을 제출하기로 결정한 경우 코드에서 기존 recaptcha를 확인하므로 한 번에 하나의 recaptcha 만 페이지에 표시됩니다.

raphadko 의 답변에 약간을 추가하려면 : 한 페이지에 여러 개의 captchas가 있으므로 (범용) g-recaptcha-responsePOST 매개 변수를 사용할 수 없습니다 ( 하나의 captcha 응답 만 보유하기 때문에). 대신 grecaptcha.getResponse(opt_widget_id)각 보안 문자에 대해 호출을 사용해야합니다 . 다음은 내 코드입니다 (각 보안 문자가 해당 양식에있는 경우).

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>

자바 스크립트 :

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가없고 동적이므로 ID별로 요소를 구체적으로 타겟팅 할 필요가 없습니다.

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()생성 된 각 위젯 의 메서드 에서 반환되며 reCAPTCHA 컨테이너 의 속성과 관련이 없습니다 id!!

각 reCAPTCHA에는 자체 응답 데이터가 있습니다. reCAPTCHA div에 ID를 제공하고 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/

덮어 쓰기로 DOM 코드가 실행되지 않기 때문에 프록시 div가 필요하지 않습니다. 콜백을 다시 트리거 할 때마다 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>

추신 : "grecaptcha.render"메소드는 ID를받습니다.

나는 보이지 않는 recaptcha를 사용할 것입니다. 그런 다음 버튼에서 "formname = 'yourformname'"과 같은 태그를 사용하여 제출할 양식을 지정하고 제출 양식 입력을 숨 깁니다.

이것의 장점은 html5 양식 유효성 검사를 그대로 유지하고 하나의 recaptcha이지만 여러 개의 버튼 인터페이스를 유지할 수 있다는 것입니다. recaptcha에 의해 생성 된 토큰 키의 "captcha"입력 값을 캡처하십시오.

<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이 더 간단하고 관리하기 쉽습니다.