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

Program / 글쓴이

한 페이지에 두 가지 양식이 있습니다. 양식 중 하나에는 항상 표시되는 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>