Comment afficher plusieurs recaptchas sur une même page ?

Question

J'ai 2 formulaires sur une seule page. L'un des formulaires a un Recaptcha qui s'affiche en permanence. L'autre ne doit afficher un Recaptcha qu'après un certain événement, par exemple lorsque le nombre de tentatives de connexion a atteint son maximum. Il y a donc des moments où j'aurais besoin que 2 Recaptchas apparaissent sur la même page. Est-ce possible ? Je sais que je pourrais probablement utiliser un seul Recaptcha pour les deux, mais de la façon dont j'ai la mise en page, je préférerais de loin avoir 2 Recaptchas. Je vous remercie.

Mise à jour : Je suppose que ce n'est pas possible. Quelqu'un peut-il recommander une autre bibliothèque de capture à utiliser en parallèle avec reCaptcha ? Je voudrais vraiment pouvoir avoir 2 captchas sur la même page.

Mise à jour 2 : Que se passe-t-il si je place chaque formulaire dans une iframe ? Est-ce une solution acceptable ?

Answer 1

Avec la version actuelle de Recaptcha ( reCAPTCHA API version 2.0 ), vous pouvez avoir plusieurs Recaptchas sur une même 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 <div> pour les Recaptchas et rendre les Recaptchas à l'intérieur de ceux-ci de manière explicite.

C'est facile avec l'API Google Recaptcha . 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, votre URL Recaptcha script 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 ID à vos champs Recaptcha, vous pouvez donner un nom de classe et boucler ces éléments avec votre sélecteur de classe et appeler .render() .

Answer 2

Simple et direct :

1. Créez vos champs 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. Maintenant, appelez ceci pour itérer sur 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>

Answer 3

Cette réponse est une extension de @raphadko Réponse de la Commission .

Si vous devez 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 id du widget ?

J'utilise cette définition de CaptchaCallback pour stocker les id du 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);
    });
};

Je peux alors appeler :

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

pour extraire le code.

Answer 4

Une question similaire a été posée à propos de la réalisation de cette opération sur une page ASP ( lien ) et le consensus était que ce n'était pas possible de le faire avec recaptcha. Il semble que plusieurs formulaires sur une même page doivent partager le captcha, à moins que vous ne soyez prêt à utiliser un captcha différent. Si vous n'êtes pas bloqué par recaptcha, une bonne bibliothèque à regarder est le composant Zend Frameworks Zend_Captcha ( lien ). Il contient quelques

Answer 5

Ceci est facilement réalisable grâce à la fonction clone() fonction.

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

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

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

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

Ensuite, le javascript est très simple :

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

Il est probable que le deuxième paramètre ne soit pas nécessaire dans le cas d'un true valeur en clone() mais ça 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 l'élément correct (les deux ids pour les éléments reCaptcha sont #recaptcha_response_field et #recaptcha_challenge_field au cas où quelqu'un en aurait besoin)