Comment afficher plusieurs recaptchas sur une seule page?

J'ai 2 formulaires sur une seule page. L'un des formulaires a un recaptcha qui s'affiche tout le temps. L'autre ne devrait afficher un recaptcha qu'après un certain événement tel que la maximisation des tentatives de connexion. Il y a donc des moments où j'aurais besoin de 2 recaptchas pour apparaître sur la même page. Est-ce possible? Je sais que je pourrais probablement en utiliser un seul pour les deux, mais la façon dont j'ai la mise en page, je préférerais de beaucoup en avoir 2. Merci.

Mise à jour: eh bien je suppose que ce n'est peut-être pas possible. Quelqu'un peut-il recommander une autre bibliothèque de capture à utiliser côte à côte avec reCaptcha? Je veux vraiment pouvoir avoir 2 captchas sur la même page.

Mise à jour 2: Et si mettre chaque formulaire dans une iframe? Serait-ce une solution acceptable?

Une question similaire a été posée sur le fait de faire cela sur une page ASP ( lien ) et le consensus là-bas était qu'il n'était pas possible de faire avec recaptcha. Il semble que plusieurs formulaires sur une seule page doivent partager le captcha, à moins que vous ne souhaitiez utiliser un autre captcha. Si vous n'êtes pas verrouillé dans recaptcha, une bonne bibliothèque à regarder est le composant Zend Frameworks Zend_Captcha ( lien ). Il contient quelques

Avec la version actuelle de Recaptcha ( reCAPTCHA API version 2.0 ), vous pouvez avoir plusieurs recaptchas sur une seule page.

Il n'est pas nécessaire de cloner le recaptcha ni d'essayer de contourner le problème. Il vous suffit de mettre plusieurs éléments div pour les recaptchas et de rendre les recaptchas à l'intérieur d'eux explicitement.

C'est facile avec l'api google recaptcha:
https://developers.google.com/recaptcha/docs/display#explicit_render

Voici l'exemple de code 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>

Dans votre code javascript, vous devez définir une fonction de rappel pour 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>

Après cela, l'URL de votre script recaptcha devrait ressembler à ceci:

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

Ou au lieu de donner des identifiants à vos champs recaptcha, vous pouvez donner un nom de classe et boucler ces éléments avec votre sélecteur de classe et appeler .render ()

Simple et direct:

1) Créez vos champs de recaptcha normalement avec ceci:

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

2) Chargez le script avec ceci:

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

3) Appelez maintenant ceci pour parcourir les champs et créer les 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>

Ceci est facilement accompli avec la clone()fonction de jQuery .

Vous devez donc créer deux divs wrapper pour le recaptcha. Recaptcha div de mon premier formulaire:

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

Le div du deuxième formulaire est vide (ID différent). Donc le mien est juste:

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

Ensuite, le javascript est assez simple:

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

Vous n'avez probablement pas besoin du deuxième paramètre avec une truevaleur dans clone(), mais cela ne fait pas de mal de l'avoir ... Le seul problème avec cette méthode est que si vous soumettez votre formulaire via ajax, le problème est que vous avez deux éléments qui ont le même nom et vous devez être un peu plus intelligent avec la façon dont vous capturez les valeurs de cet élément correct (les deux identifiants pour les éléments reCaptcha sont #recaptcha_response_fieldet #recaptcha_challenge_field juste au cas où quelqu'un en aurait besoin)

Je sais que cette question est ancienne, mais au cas où quelqu'un la chercherait à l'avenir. Il est possible d'avoir deux captcha sur une seule page. Rose à la documentation est ici: https://developers.google.com/recaptcha/docs/display L' exemple ci-dessous est juste un document de copie de formulaire et vous n'avez pas à spécifier différentes mises en page.

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

Cette réponse est une extension de @raphadko réponse de .

Si vous avez besoin d'extraire manuellement le code captcha (comme dans les requêtes ajax), vous devez appeler:

grecaptcha.getResponse(widget_id)

Mais comment récupérer le paramètre d'id du widget?

J'utilise cette définition de CaptchaCallback pour stocker l' ID de widget de chaque boîte g-recaptcha (en tant qu'attribut de données 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);
    });
};

Ensuite, je peux appeler:

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

pour extraire le code.

J'ai un formulaire de contact dans le pied de page qui s'affiche toujours et certaines pages, comme Créer un compte, peuvent également avoir un captcha, donc c'est dynamiquement et j'utilise la prochaine manière avec 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>

Ceci est une version sans JQuery de la réponse fournie par raphadko et nom .

1) Créez vos champs de recaptcha normalement avec ceci:

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

2) Chargez le script avec ceci:

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

3) Appelez maintenant ceci pour parcourir les champs et créer les 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'});
    }
};

En regardant le code source de la page, j'ai pris la partie reCaptcha et j'ai un peu changé le code. Voici le 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>

J'utilise ici une simple fonctionnalité d'onglet javascript. Donc, n'a pas inclus ce code.

Lorsque l'utilisateur clique sur "Request Information", (#product_tabs_what)JS vérifie si recapExistc'est falseou a une certaine valeur. S'il a une valeur, cela appellera Recaptcha.destroy();à détruire l'ancien reCaptcha chargé et le recréera pour cet onglet. Sinon, cela créera simplement un reCaptcha et le placera dans le #more_info_recaptcha_boxdiv. Identique à l' #product_tabs_whaonglet "Faire une offre" .

Une bonne option est de générer une entrée recaptcha pour chaque formulaire à la volée (je l'ai fait avec deux mais vous pourriez probablement en faire trois ou plus). J'utilise jQuery, la validation jQuery et le plugin de formulaire jQuery pour publier le formulaire via AJAX, avec l'API Recaptcha AJAX -

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

Lorsque l'utilisateur soumet l'un des formulaires:

1. intercepter la soumission - j'ai utilisé la propriété beforeSubmit de jQuery Form Plugin
2. détruire toutes les entrées recaptcha existantes sur la page - j'ai utilisé la méthode $ .empty () de jQuery et Recaptcha.destroy ()
3. appelez Recaptcha.create () pour créer un champ recaptcha pour le formulaire spécifique
4. retourne false.

Ensuite, ils peuvent remplir le recaptcha et soumettre à nouveau le formulaire. S'ils décident de soumettre un formulaire différent à la place, eh bien, votre code vérifie les recaptchas existants, vous n'aurez donc qu'un seul recaptcha sur la page à la fois.

Pour ajouter un peu à raphadko réponse de : puisque vous avez plusieurs captchas (sur une seule page), vous ne pouvez pas utiliser le (universel) g-recaptcha-responseparamètre POST (car il contient qu'une seule réponse de captcha). Au lieu de cela, vous devriez utiliser l' grecaptcha.getResponse(opt_widget_id)appel pour chaque captcha. Voici mon code (à condition que chaque captcha soit dans sa forme):

HTML:

<form ... />

<div id="RecaptchaField1"></div>

<div class="field">
  <input type="hidden" name="grecaptcha" id="grecaptcha" />
</div>

</form>

et

<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) + "\"}"

         });
    });
};

Notez que j'applique la délégation d'événement (voir actualiser le DOM après ajouter l'élément ) à tous les éléments modifiés dynamiquement. Cela lie la réponse de chaque captha individuel à son submitévénement de forme .

Voici une solution qui s'appuie sur plusieurs des excellentes réponses. Cette option est libre de jQuery et dynamique, ne vous obligeant pas à cibler spécifiquement les éléments par id.

1) Ajoutez votre balisage reCAPTCHA comme vous le feriez normalement:

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

2) Ajoutez ce qui suit dans le document. Il fonctionnera dans n'importe quel navigateur prenant en charge l' API querySelectorAll

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

La grecaptcha.getResponse()méthode accepte un paramètre facultatif "widget_id" et utilise par défaut le premier widget créé s'il n'est pas spécifié. Un widget_id est retourné par la grecaptcha.render()méthode pour chaque widget créé, il n'est pas lié à l'attribut iddu conteneur reCAPTCHA !!

Chaque reCAPTCHA a ses propres données de réponse. Vous devez donner un identifiant au reCAPTCHA div et le transmettre augetResponse méthode:

par exemple

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

Réponse d'accès:

var reCaptchaResponse = grecaptcha.getResponse(0);

ou

var reCaptchaResponse = grecaptcha.getResponse(1);

C'est possible, il suffit de remplacer les rappels Recaptcha Ajax. Jsfiddle fonctionnant: http://jsfiddle.net/Vanit/Qu6kn/

Vous n'avez même pas besoin d'un proxy div car avec les écrasements, le code DOM ne s'exécutera pas. Appelez Recaptcha.reload () chaque fois que vous souhaitez déclencher à nouveau les rappels.

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");

Voici un bon guide pour faire exactement cela:

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

En gros, vous ajoutez quelques paramètres à l'appel de l'API et effectuez manuellement le rendu de chaque 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>

PS: La méthode "grecaptcha.render" reçoit un identifiant

J'utiliserais recaptcha invisible. Ensuite, sur votre bouton, utilisez une balise comme "formname = 'yourformname'" pour spécifier le formulaire à soumettre et masquer une entrée de formulaire d'envoi.

L'avantage de ceci est qu'il vous permet de garder la validation du formulaire html5 intacte, une recaptcha, mais plusieurs interfaces de boutons. Capturez simplement la valeur d'entrée "captcha" pour la clé de jeton générée par 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>

Je trouve cela beaucoup plus simple et plus facile à gérer.