Wie kann ich mehrere reCaptchas auf einer einzigen Seite?
https://stackoverflow.com/questions/1241947
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe 2 Formen auf einer einzigen Seite. Eine der Formen hat eine recaptcha die ganze Zeit angezeigt wird. Der andere sollte erst nach einem bestimmten Ereignis wie maxing Anmeldeversuche einen recaptcha anzuzeigen. So gibt es Zeiten, in denen ich 2 reCaptchas auf derselben Seite angezeigt werden müsste. Ist das möglich? Ich weiß, dass ich wahrscheinlich eine einzige für beide verwenden könnte, aber die Art, wie ich das Layout haben, würde ich viel lieber 2. Dank haben.
Update: und ich denke, es ist nicht möglich. Kann jemand eine andere Capture-Bibliothek zu verwenden, Seite an Seite mit reCaptcha empfehlen? Ich mag wirklich in der Lage sein 2 Captchas auf der gleichen Seite zu haben.
Update 2: Was passiert, wenn jede Form in einem Iframe setzen? Wäre dies eine akzeptable Lösung sein?
Lösung
Eine ähnliche Frage wurde über das tun dies auf einer ASP-Seite ( Link fragte ) und der Konsens da drüben war, dass es nicht möglich war, mit recaptcha zu tun. Es scheint, dass mehrere Formen auf einer einzigen Seite muss das Captcha teilen, es sei denn, Sie bereit sind, eine andere Captcha zu verwenden. Wenn Sie nicht in recaptcha eine gute Bibliothek gesperrt sind einen Blick nehmen auf die Zend Framework ist Zend_Captcha Komponente (
Andere Tipps
Mit der aktuellen Version von Recaptcha ( reCAPTCHA API Version 2.0 ), können Sie mehrere reCaptchas auf einer Seite haben.
Es gibt keine Notwendigkeit, die recaptcha zu klonen noch versuchen, das Problem zu umgehen. Sie müssen nur mehrere div Elemente für den reCaptchas setzen und den reCaptchas in sie explizit machen.
Das ist einfach mit dem Google recaptcha api:
https://developers.google.com/recaptcha/docs/display#explicit_render
Hier ist das Beispiel HTML-Code:
<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>
In Ihrem JavaScript-Code, haben Sie eine Callback-Funktion für recaptcha definieren:
<script type="text/javascript">
var CaptchaCallback = function() {
grecaptcha.render('RecaptchaField1', {'sitekey' : '6Lc_your_site_key'});
grecaptcha.render('RecaptchaField2', {'sitekey' : '6Lc_your_site_key'});
};
</script>
Danach wird Ihr recaptcha Skript-URL sollte wie folgt aussehen:
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
oder anstelle von IDs auf Ihre recaptcha Felder geben, können Sie einen Klassennamen und Schleife geben, diese Elemente mit dem Klassenauswahl und rufen .render ()
Einfach und unkompliziert:
1) Erstellen Sie Ihre recaptcha Felder normalerweise mit diesem:
<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>
2) Legen Sie das Skript mit diesem:
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
3) Nun nennen dies über die Felder zu durchlaufen und die reCaptchas erstellen:
<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>
Dies ist leicht mit jQuery clone() Funktion erreicht.
So Sie zwei Wrapper div-Tags für die recaptcha erstellen müssen. Meine erste Form der recaptcha div:
<div id="myrecap">
<?php
require_once('recaptchalib.php');
$publickey = "XXXXXXXXXXX-XXXXXXXXXXX";
echo recaptcha_get_html($publickey);
?>
</div>
Die div zweite Form ist leer (verschiedene ID). Also mir ist nur:
<div id="myraterecap"></div>
Dann ist die Javascript ganz einfach:
$(document).ready(function() {
// Duplicate our reCapcha
$('#myraterecap').html($('#myrecap').clone(true,true));
});
Wahrscheinlich mit einem true Wert in clone() den zweiten Parameter nicht benötigen, aber nicht schaden, es zu haben ... Das einzige Problem mit dieser Methode ist, wenn Sie Ihr Formular über Ajax einreichen, das Problem ist, dass Sie haben zwei Elemente, die den gleichen Namen haben und Sie müssen mich ein bisschen schlauer mit der Art und Weise erfassen Sie, dass die Werte des richtigen Element (die beiden IDs für reCaptcha Elemente sind #recaptcha_response_field und #recaptcha_challenge_field nur falls jemand sie braucht)
Ich weiß, diese Frage ist alt, aber in dem Fall, wenn jemand für sie in der Zukunft aussehen wird. Es ist möglich, zwei captcha die auf einer Seite zu haben. Pink Dokumentation ist hier: https://developers.google.com/recaptcha/docs/display Beispiel unten ist nur eine Kopie Form doc und Sie nicht verschiedene Layouts angeben.
<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>
Diese Antwort ist eine Erweiterung @raphadko 's Antwort .
Wenn Sie manuell den Captcha-Code extrahieren (wie in AJAX-Anfragen) Sie rufen müssen:
grecaptcha.getResponse(widget_id)
Aber wie kann man die Widget-ID-Parameter abrufen?
Ich benutze diese Definition von CaptchaCallback zu speichern, die Widget-ID jeder g-recaptcha Box (als HTML-Daten-Attribute):
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);
});
};
Dann kann ich nennen:
grecaptcha.getResponse(jQuery('#your_recaptcha_box_id').attr('data-widget-id'));
, um den Code zu extrahieren.
Dies ist eine JQuery-freie Version der Antwort zur Verfügung gestellt von raphadko und Nomen .
1) Erstellen Sie Ihre recaptcha Felder normalerweise mit diesem:
<div class="g-recaptcha"></div>
2) Legen Sie das Skript mit diesem:
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
3) Nun nennen dies über die Felder zu durchlaufen und die reCaptchas erstellen:
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'});
}
};
Ich habe Kontaktformular in Fußzeile, die immer angezeigt und auch einigen Seiten, wie Konto erstellen, captcha haben, so ist es dynamisch und ich bin mit folgenden Art und Weise mit jQuery:
html:
<div class="g-recaptcha" id="g-recaptcha"></div>
<div class="g-recaptcha" id="g-recaptcha-footer"></div>
Sie 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>
Mit Blick auf den Quellcode der Seite habe ich den reCaptcha Teil und änderte den Code ein wenig. Hier ist der Code:
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>
Ich verwende hier einfach Javascript Tab-Funktionalität. Also, nicht, dass Code enthalten.
Wenn der Benutzer auf „Informationen anfordern“ (#product_tabs_what) klicken würde dann JS wird überprüfen, ob recapExist false ist oder einen gewissen Wert hat. Wenn es einen Wert hat, dann wird diese Recaptcha.destroy(); ruft die alte geladene reCaptcha zu zerstören und es wird für diese Registerkarte neu erstellen. Sonst wird dies nur eine reCaptcha erstellen und in die #more_info_recaptcha_box div platzieren wird. Die gleiche wie für "Angebot abgeben" #product_tabs_wha Tab.
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>
Eine gute Möglichkeit ist es, einen recaptcha Eingang für jede Form on the fly zu generieren (ich habe es mit zwei getan, aber Sie könnten wahrscheinlich drei oder mehr Formen tun). Ich bin mit jQuery, jQuery Validierung und jQuery Form Plugin das Formular über AJAX, zusammen mit dem Recaptcha AJAX API schreiben -
https://developers.google.com/recaptcha/docs/display#recaptcha_methods
Wenn der Benutzer sendet eine der Formen:
- Intercept die Vorlage - Ich habe jQuery Formular Plugin der beforeSubmit Eigenschaft
- zerstören alle vorhandenen recaptcha Eingänge auf der Seite - verwendete ich jQuery $ .empty () -Methode und Recaptcha.destroy ()
- nennen Recaptcha.create () ein recaptcha Feld für die spezifische Form erstellen
- return false.
Dann können sie die recaptcha ausfüllen und das Formular erneut vorlegen. Wenn sie sich entscheiden, stattdessen eine andere Form einreichen, na ja, Ihr Code überprüft bestehende reCaptchas so werden Sie zu einem Zeitpunkt nur ein recaptcha auf der Seite haben.
ein wenig in den raphadko 's Antwort : da Sie mehrere Captchas ( auf einer Seite), können Sie nicht die (universal) g-recaptcha-response POST-Parameter verwenden (weil es nur eine captcha-Antwort) hält. Stattdessen sollten Sie grecaptcha.getResponse(opt_widget_id) Aufruf für jedes Captcha verwenden. Hier ist mein Code (jedes Captcha, die innerhalb seiner Form ist):
HTML:
<form ... />
<div id="RecaptchaField1"></div>
<div class="field">
<input type="hidden" name="grecaptcha" id="grecaptcha" />
</div>
</form>
und
<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) + "\"}"
});
});
};
Beachten Sie, dass ich die Veranstaltung Delegation anwenden (siehe Refresh-DOM nach Anfügen Elemente ) an die alle Elemente dynamisch modifiziert. Dies bindet jedes einzelne captha Antwort auf seine Form submit Ereignis.
Hier ist eine Lösung, die viele der ausgezeichneten Antworten baut ab. Diese Option ist jQuery frei und dynamisch, nicht erfordern Sie gezielt Elemente von id Ziel.
1) Fügen Sie Ihre reCAPTCHA Markup wie gewohnt:
<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>
2) Fügen Sie den folgenden in das Dokument. Es wird in jedem Browser, der die 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>
Die grecaptcha.getResponse() Methode akzeptiert einen optionalen „widget_id“ Parameter und standardmäßig das erste Widget, wenn nicht spezifiziert geschaffen. A widget_id vom grecaptcha.render() Verfahren für jedes Widget erstellt, zurückgegeben wird, ist sie nicht auf das Attribut id des ReCAPTCHA Behälters bezogen !!
Jeder reCAPTCHA hat seine eigenen Antwortdaten.
Sie haben die reCAPTCHA div eine ID geben und an die getResponse Methode übergeben:
z.
<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>
Zugriffs Antwort:
var reCaptchaResponse = grecaptcha.getResponse(0);
oder
var reCaptchaResponse = grecaptcha.getResponse(1);
Es ist möglich, überschreiben Sie einfach die Recaptcha Ajax Rückrufe. Arbeits jsfiddle: http://jsfiddle.net/Vanit/Qu6kn/
Sie brauchen nicht einmal einen Proxy-div, weil mit den Überschreibungen des DOM-Code wird nicht ausgeführt. Rufen Sie Recaptcha.reload (), wann immer Sie wollen wieder die Rückrufe auslösen.
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");
Hier ist eine schöne Anleitung dafür genau das:
http: //mycodde.blogspot .com.ar / 2014/12 / multiple-recaptcha-Demo-same-seite.html
Grundsätzlich Sie einige Parameter des API-Aufruf hinzufügen und manuell jede recaptcha machen:
<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: Die "grecaptcha.render" Methode erhält eine ID
würde ich unsichtbar recaptcha verwenden. Dann auf dem Knopf einen Tag wie „formname =‚yourformname‘“ verwenden, um festzulegen, welche Form vorgelegt werden soll, und verstecken eine Formulareingabe einreichen.
Der Vorteil dabei ist, es ermöglicht Ihnen die html5 Formularvalidierung intakt, einen recaptcha zu halten, aber mehrere Knopf-Schnittstellen. erfassen Sie einfach das „Captcha“ Eingangswert für den Token-Schlüssel generiert durch 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>
Das finde ich viel einfacher und leichter zu verwalten.
