한 페이지에 여러 개의 리캡처를 표시하려면 어떻게 해야 하나요?
한 페이지에 두 개의 양식이 있습니다.그 양식 중 하나는 탈환차가 항상 표시된다.다른 한쪽은 로그인 시도 최대값 등 특정 이벤트가 발생한 후에만 retailcha를 표시해야 합니다.그래서 같은 페이지에 두 개의 리캡처가 필요할 때가 있습니다.이게 가능합니까?둘 다 싱글로 할 수 있다는 것은 알지만, 레이아웃을 보면 2개가 더 좋습니다.감사해요.
업데이트: 불가능할 수도 있습니다.reCaptcha와 함께 사용할 다른 캡처 라이브러리를 추천해 주실 수 있습니까?꼭 2개의 캡처를 같은 페이지에 넣을 수 있으면 좋겠습니다.
업데이트 2: 각 폼을 iframe에 넣으면 어떻게 됩니까?이것이 수용 가능한 해결책일까요?
현재 버전의 Recapcha(reCAPTCHA API 버전 2.0)에서는 여러 개의 Recapcha를 한 페이지에 표시할 수 있습니다.
retackcha를 복제하거나 문제를 해결할 필요가 없습니다.리캡처용 여러 div 요소를 넣고 그 안에 리캡처를 명시적으로 렌더링하기만 하면 됩니다.
Google retapcha api.
https://developers.google.com/recaptcha/docs/display#explicit_renderhttpsdevelopers.google.com/recaptcha/docs/display#
다음은 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>
javascript 코드에서 retcha를 위한 콜백 함수를 정의해야 합니다.
<script type="text/javascript">
var CaptchaCallback = function() {
grecaptcha.render('RecaptchaField1', {'sitekey' : '6Lc_your_site_key'});
grecaptcha.render('RecaptchaField2', {'sitekey' : '6Lc_your_site_key'});
};
</script>
이후 retailcha 스크립트 URL은 다음과 같습니다.
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
또는 retapcha 필드에 ID를 지정하는 대신 클래스 이름을 지정하고 클래스 셀렉터로 이러한 요소를 루프하여 .render()를 호출할 수 있습니다.
심플하고 알기 쉽게:
1) 보통 리셉차 필드를 만듭니다.
<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) 이것을 호출하고 필드에 반복하여 리캡처를 만듭니다.
<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>
(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'));
코드를 추출합니다.
ASP 페이지(링크)에서 이와 유사한 질문을 받았는데, 리캡카에서는 불가능하다는 의견이 일치했습니다.다른 captcha를 사용할 의사가 없는 한, 한 페이지에 있는 여러 개의 양식이 captcha를 공유해야 할 것 같습니다.retcha에 잠겨 있지 않은 경우 살펴보기 좋은 라이브러리는 Zend Frameworks Zend_Captcha 컴포넌트(링크)입니다.몇 개 들어 있습니다.
jQuery를 사용하면 할 수 .clone()★★★★★★ 。
탈환차용 래퍼 디바를 2개 작성해야 합니다.내 첫 번째 폼은 탈환차 div:
<div id="myrecap">
<?php
require_once('recaptchalib.php');
$publickey = "XXXXXXXXXXX-XXXXXXXXXXX";
echo recaptcha_get_html($publickey);
?>
</div>
두 번째 양식의 div가 비어 있습니다(다른 ID).그래서 저는 그냥...
<div id="myraterecap"></div>
javascript는 매우 간단합니다.
$(document).ready(function() {
// Duplicate our reCapcha
$('#myraterecap').html($('#myrecap').clone(true,true));
});
두 는 필요예요.true.clone()하지만 가지고 있다고 해서 나쁠 건 없어...는 에이잭스를는 이름이 가 있다는 이 을 캡처하는 방법에 좀더하게 대처해야 는 "Ajax"입니다).문제는 이름이 같은 두 요소가 있다는 것입니다.또한 올바른 요소의 값을 캡처하는 방법에 대해 좀 더 현명하게 설명해야 합니다(reCaptcha 요소의 두 ID는#recaptcha_response_field#secha_field)
오래된 질문인 건 알지만 나중에 누가 찾을지 모르니까.한 페이지에 두 개의 캡차가 있을 수 있습니다.설명서에 대한 분홍색은 다음과 같습니다.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>
grecaptcha.getResponse()method는 선택적 "syslog_id" 매개 변수를 허용하며 지정되지 않은 경우 기본적으로 첫 번째 위젯으로 작성됩니다.는 widget_id에서 됩니다.grecaptcha.render()작성된 각 위젯에 대한 메서드는 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);
바닥글에 항상 표시되는 연락처 폼이 있으며, Create Account와 같은 일부 페이지도 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 프리 버전입니다.
1) 보통 리셉차 필드를 만듭니다.
<div class="g-recaptcha"></div>
2) 다음과 같이 스크립트를 로드합니다.
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
3) 이것을 호출하고 필드에 반복하여 리캡처를 만듭니다.
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>
j쿼리:
<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>
간단한 javascript 탭 기능을 사용하고 있습니다.그래서 그 코드를 넣지 않았군요.
가 [ Information]를했을 때 [Request Information ( 보보"" ) ]를 클릭합니다.(#product_tabs_what)그러면 JS가 체크합니다.recapExist이false또는 가치가 있습니다.값이 있는 경우 호출됩니다.Recaptcha.destroy();이전 로드된 reCaptcha를 파기하고 이 탭에서 다시 만듭니다.그렇지 않으면 reCaptcha가 생성되어 에 배치됩니다.#more_info_recaptcha_boxdiv. "Make Offer"와 동일#product_tabs_wha탭을 클릭합니다.
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>Raphadko의 답변에 조금 더 덧붙이자면, (한 페이지에) 여러 개의 캡처를 가지고 있기 때문에 (범용)을 사용할 수 없습니다.g-recaptcha-responsePOST 파라미터(Captcha의 응답은 1개뿐이기 때문에).그 대신에,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>
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) + "\"}"
});
});
};
동적으로 변경된 모든 요소에 이벤트 위임을 적용합니다(「refresh DOM after append element」를 참조).이것은 모든 카프타의 반응을 형태와 결합시킨다.submit이벤트입니다.
각 폼에 대해 즉시 리캡차 입력을 생성하는 것이 좋습니다(두 개로 해봤지만 세 개 이상의 폼을 수행할 수 있습니다).JQuery, jQuery validation 및 jQuery 형식의 플러그인을 사용하여 폼을 리캡차 AJAX API와 함께 AJAX를 통해 게시합니다.
https://developers.google.com/recaptcha/docs/display#recaptcha_methods
사용자가 다음 중 하나의 양식을 제출하면
- 송신 가로채기 - jQuery Form Plugin의 beforeSubmit 속성을 사용했습니다.
- 페이지의 기존 retailcha 입력을 파기합니다.jQuery의 $.empty() 메서드와 Recapcha.destroy()를 사용했습니다.
- Recapcha.create()를 호출하여 특정 형식의 Recapcha 필드를 만듭니다.
- 거짓으로 답하다
그런 다음 탈환차를 작성해서 다시 제출하면 됩니다.만약 그들이 다른 양식을 제출하기로 결정한다면, 음, 당신의 코드는 기존의 탈환을 체크하기 때문에 당신은 한 번에 하나의 탈환차만 페이지에 남습니다.
여기 많은 훌륭한 답변을 바탕으로 한 솔루션이 있습니다.이 옵션은 jQuery free로 동적이며 id별로 특정 요소를 대상으로 지정할 필요가 없습니다.
1) reCAPTCHA 마크업을 통상대로 추가합니다.
<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>
2) 문서에 다음 사항을 추가한다.querySelector를 지원하는 모든 브라우저에서 작동합니다.모든 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>
가능합니다. Recapcha Ajax 콜백을 덮어쓰기만 하면 됩니다.작업 중인 jsfiddle: http://jsfiddle.net/Vanit/Qu6kn/
덮어쓰기를 하면 DOM 코드가 실행되지 않기 때문에 프록시 div도 필요하지 않습니다.콜백을 다시 트리거하려면 언제든지 Recapcha.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 호출에 몇 가지 파라미터를 추가하고 각 리캡차를 수동으로 렌더링합니다.
<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 형식의 검증을 그대로 유지할 수 있다는 것입니다.하나의 리캡차이지만 여러 개의 버튼 인터페이스를 사용할 수 있습니다.retcha에 의해 생성된 토큰 키의 "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>
나는 이것이 훨씬 더 간단하고 관리하기 쉽다고 생각한다.
언급URL : https://stackoverflow.com/questions/1241947/how-do-i-show-multiple-recaptchas-on-a-single-page
'sourcecode' 카테고리의 다른 글
| phpMyAdmin 설치 - 오류 1045:접근 거부됨(사용: 비밀번호: NO) (0) | 2022.12.26 |
|---|---|
| Java에서 현재 실행 중인 모든 스레드 목록 가져오기 (0) | 2022.12.26 |
| mysql 테이블이 mysql을 사용하고 있는지 어떻게 알 수 있습니까?ISAM 또는 InnoDB 엔진 (0) | 2022.12.06 |
| 목록 요소의 가능한 모든 조합을 가져오려면 어떻게 해야 합니까? (0) | 2022.12.06 |
| ehcache에서 존속 가능 시간과 아이돌 시간을 구별하는 방법 (0) | 2022.12.06 |