Wie zeige ich mehrere Recaptchas auf einer Seite?

Ich habe 2 Formulare auf einer Seite. In einem der Formulare wird ständig ein Recaptcha angezeigt. Der andere sollte ein Recaptcha erst nach einem bestimmten Ereignis anzeigen, z. B. nach maximaler Anmeldung. Es gibt also Zeiten, in denen ich zwei Recaptchas benötige, um auf derselben Seite zu erscheinen. Ist das möglich? Ich weiß, dass ich wahrscheinlich einen einzigen für beide verwenden könnte, aber so wie ich das Layout habe, würde ich 2 lieber haben. Danke.

Update: Nun, ich denke, es ist möglicherweise nicht möglich. Kann jemand eine andere Capture-Bibliothek empfehlen, die neben reCaptcha verwendet werden kann? Ich möchte wirklich 2 Captchas auf derselben Seite haben können.

Update 2: Was ist, wenn jedes Formular in einen Iframe eingefügt wird? Wäre dies eine akzeptable Lösung?

Eine ähnliche Frage wurde dazu auf einer ASP-Seite ( Link ) gestellt, und der Konsens dort war, dass es nicht möglich war, mit Recaptcha zu tun. Es scheint, dass mehrere Formulare auf einer Seite das Captcha gemeinsam nutzen müssen, es sei denn, Sie sind bereit, ein anderes Captcha zu verwenden. Wenn Sie nicht an recaptcha gebunden sind, ist die Zend_Captcha-Komponente ( Link ) von Zend Frameworks eine gute Bibliothek, die Sie sich ansehen sollten . Es enthält einige

Mit der aktuellen Version von Recaptcha ( reCAPTCHA API Version 2.0 ) können Sie mehrere Recaptchas auf einer Seite haben.

Es ist nicht erforderlich, das Recaptcha zu klonen oder das Problem zu umgehen. Sie müssen nur mehrere div-Elemente für die Recaptchas einfügen und die Recaptchas explizit in ihnen rendern.

Dies ist mit der Google Recaptcha-API ganz einfach:
https://developers.google.com/recaptcha/docs/display#explicit_render

Hier ist der 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 müssen Sie eine Rückruffunktion 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 sollte Ihre Recaptcha-Skript-URL folgendermaßen aussehen:

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

Oder anstatt Ihren Recaptcha-Feldern IDs zu geben, können Sie einen Klassennamen eingeben und diese Elemente mit Ihrer Klassenauswahl wiederholen und .render () aufrufen.

Einfach und unkompliziert:

1) Erstellen Sie Ihre Recaptcha-Felder normalerweise folgendermaßen:

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

2) Laden Sie das Skript mit folgendem:

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

3) Rufen Sie dies nun auf, um die Felder zu durchlaufen und die Recaptchas zu 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 mit der clone()Funktion von jQuery leicht zu erreichen .

Sie müssen also zwei Wrapper-Divs für das Recaptcha erstellen. Recaptcha Div meiner ersten Form:

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

Das div des zweiten Formulars ist leer (andere ID). Also meins ist nur:

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

Dann ist das Javascript ganz einfach:

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

Wahrscheinlich brauchen Sie den zweiten Parameter mit einem trueWert in nicht clone(), aber es tut nicht weh, ihn zu haben ... Das einzige Problem bei dieser Methode ist, dass Sie zwei Elemente haben, wenn Sie Ihr Formular über Ajax senden Der gleiche Name und Sie müssen mich ein bisschen schlauer mit der Art und Weise machen, wie Sie die Werte des richtigen Elements erfassen (die beiden IDs für reCaptcha-Elemente sind #recaptcha_response_fieldund #recaptcha_challenge_field, nur für den Fall, dass jemand sie benötigt).

Ich weiß, dass diese Frage alt ist, aber für den Fall, dass jemand in Zukunft danach suchen wird. Es ist möglich, zwei Captchas auf einer Seite zu haben. Pink zur Dokumentation finden Sie hier: https://developers.google.com/recaptcha/docs/display Das folgende Beispiel ist nur ein Kopierformular und Sie müssen keine unterschiedlichen 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 den Captcha-Code manuell extrahieren müssen (wie bei Ajax-Anfragen), müssen Sie Folgendes aufrufen:

grecaptcha.getResponse(widget_id)

Aber wie können Sie den Widget-ID-Parameter abrufen?

Ich verwende diese Definition von CaptchaCallback , um die Widget-ID jeder g-recaptcha-Box (als HTML- Datenattribut) zu speichern :

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

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

um den Code zu extrahieren.

Ich habe ein Kontaktformular in der Fußzeile, das immer angezeigt wird, und auch einige Seiten, wie "Konto erstellen", können Captcha enthalten. Daher ist es dynamisch und ich verwende den nächsten Weg mit jQuery:

html:

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

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

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>

Dies ist eine JQuery-freie Version der Antwort von Raphadko und Nomen .

1) Erstellen Sie Ihre Recaptcha-Felder normalerweise folgendermaßen:

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

2) Laden Sie das Skript mit folgendem:

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

3) Rufen Sie dies nun auf, um die Felder zu durchlaufen und die Recaptchas zu 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'});
    }
};

Als ich mir den Quellcode der Seite ansah, nahm 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 einfache Javascript-Tab-Funktionen. Also, diesen Code nicht enthalten.

Wenn der Benutzer auf "Informationen anfordern" klickt, (#product_tabs_what)prüft JS, ob dies ein Wert recapExistist falseoder ist. Wenn es einen Wert hat, wird dies aufgerufen Recaptcha.destroy();, um das alte geladene reCaptcha zu zerstören und es für diese Registerkarte neu zu erstellen. Andernfalls wird nur ein reCaptcha erstellt und in das #more_info_recaptcha_boxdiv eingefügt . Gleich wie auf der #product_tabs_whaRegisterkarte "Angebot machen" .

Eine gute Option ist es, eine Recaptcha-Eingabe für jedes Formular im laufenden Betrieb zu generieren (ich habe es mit zwei gemacht, aber Sie könnten wahrscheinlich drei oder mehr Formulare machen). Ich verwende jQuery, jQuery Validation und das jQuery-Formular-Plugin, um das Formular über AJAX zusammen mit der Recaptcha AJAX-API zu veröffentlichen.

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

Wenn der Benutzer eines der Formulare einreicht:

1. Übermittlung der Übermittlung - Ich habe die beforeSubmit-Eigenschaft des jQuery Form Plugins verwendet
2. Zerstöre alle vorhandenen Recaptcha-Eingaben auf der Seite. Ich habe die $ .empty () -Methode von jQuery und Recaptcha.destroy () verwendet.
3. Rufen Sie Recaptcha.create () auf, um ein Recaptcha-Feld für das jeweilige Formular zu erstellen
4. falsch zurückgeben.

Anschließend können sie das Recaptcha ausfüllen und das Formular erneut einreichen. Wenn sie sich dafür entscheiden, stattdessen ein anderes Formular einzureichen, sucht Ihr Code nach vorhandenen Recaptchas, sodass Sie jeweils nur ein Recaptcha auf der Seite haben.

Um der Antwort von Raphadko etwas hinzuzufügen : Da Sie mehrere Captchas (auf einer Seite) haben, können Sie den (universellen) g-recaptcha-responsePOST-Parameter nicht verwenden (da er nur die Antwort eines Captchas enthält). Stattdessen sollten Sie grecaptcha.getResponse(opt_widget_id)für jedes Captcha den Aufruf verwenden. Hier ist mein Code (vorausgesetzt, jedes Captcha befindet sich in seiner Form):

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 Ereignisdelegation (siehe DOM nach Anhängen des Elements aktualisieren ) auf alle dynamisch geänderten Elemente anwende. Dies bindet die Antwort jedes einzelnen Captha auf sein Formereignis submit.

Hier ist eine Lösung, die viele der hervorragenden Antworten aufbaut. Diese Option ist jQuery-frei und dynamisch, ohne dass Sie Elemente gezielt nach ID ausrichten müssen.

1) Fügen Sie Ihr reCAPTCHA-Markup wie gewohnt hinzu:

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

2) Fügen Sie dem Dokument Folgendes hinzu. Es funktioniert in jedem Browser, der die querySelectorAll-API unterstützt

<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 Parameter "widget_id" und verwendet standardmäßig das erste Widget, das erstellt wird, wenn es nicht angegeben wird. Von der grecaptcha.render()Methode wird für jedes erstellte Widget eine widget_id zurückgegeben, die nicht mit dem Attribut iddes reCAPTCHA-Containers zusammenhängt !!

Jedes reCAPTCHA hat seine eigenen Antwortdaten. Sie müssen dem reCAPTCHA div eine ID geben und diese an die getResponseMethode übergeben:

z.B

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

Zugriffsantwort:

var reCaptchaResponse = grecaptcha.getResponse(0);

oder

var reCaptchaResponse = grecaptcha.getResponse(1);

Es ist möglich, einfach die Recaptcha Ajax-Rückrufe zu überschreiben. Working jsfiddle: http://jsfiddle.net/Vanit/Qu6kn/

Sie benötigen nicht einmal ein Proxy-Div, da der DOM-Code beim Überschreiben nicht ausgeführt wird. Rufen Sie Recaptcha.reload () auf, wenn Sie die Rückrufe erneut auslösen möchten.

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 nette Anleitung, um genau das zu tun:

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

Grundsätzlich fügen Sie dem API-Aufruf einige Parameter hinzu und rendern jedes Recaptcha manuell:

<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 Methode "grecaptcha.render" erhält eine ID

Ich würde unsichtbares Recaptcha verwenden. Verwenden Sie dann auf Ihrer Schaltfläche ein Tag wie "formname = 'yourformname'", um anzugeben, welches Formular gesendet werden soll, und verbergen Sie die Eingabe eines Formulars.

Dies hat den Vorteil, dass Sie die HTML5-Formularvalidierung intakt halten können, eine Wiederholung, aber mehrere Schaltflächen. Erfassen Sie einfach den Eingabewert "captcha" für den von recaptcha generierten Token-Schlüssel.

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

Ich finde das viel einfacher und einfacher zu verwalten.