web-dev-qa-db-fra.com

Pas de CAPTCHA reCAPTCHA Redimensionnement

Bonjour, je viens d'ajouter Google No CAPTCHA reCAPTCHA à mon site Web et je rencontre un petit problème Il ne convient pas sur mon site Web mobile, et c'est un problème énorme. J'ai tout essayé tel que:

HTML

<div id="captchadisplay">
  <div class="g-recaptcha" data-sitekey="???"></div>
</div>

CSS

#captchadisplay {
  width: 50% !important;
}

et

CSS

.g-recaptcha {
  width: 50%;
}

Pourtant, je ne peux pas sembler le réduire pour mon site Web mobile. Des idées? :)

htmlcssrecaptcha
20
michael jones

En utilisant la propriété de transformation CSS, vous pouvez modifier la largeur en modifiant l'échelle complète de reCAPTCHA.

En ajoutant seulement deux styles en ligne, vous pouvez adapter le reCAPTCHA à votre appareil mobile:

<div class="g-recaptcha" 
     data-theme="light" 
     data-sitekey="XXXXXXXXXXXXX" 
     style="transform:scale(0.77);transform-Origin:0 0">
</div>`

Plus de détails peuvent être trouvés ici: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

39
Geek Goddess

J'ai implémenté avec succès Geek Goddess 'solution. Le problème principal est que cela peut ne pas fonctionner sur tous les navigateurs. Maintenant, cependant, il existe une solution simple fournie par Google.

Avec reCAPTCHA version 2.0, il existe de nouvelles règles pour l'affichage du widget et des attributs de balises ajoutés par Google qui changent la manière dont il est rendu.

La taille des données de l'étiquette peut prendre les valeurs de "normal", qui est la valeur par défaut, et de "compact", qui convient aux écrans des appareils mobiles. Voici à quoi ressemble le widget compact.

new compact reCAPTCHA v2.0

Ce n'est pas le meilleur widget, mais il nécessite moins de travail que les autres solutions.

Pour plus d'attributs, consultez la documentation de Google reCAPTCHA v2.0

13
Security Aficionado

J'utilise JQuery, car placer transform(0.77) dans l'attribut style n'était pas une solution vraiment réactive.

J'ajoute cette requête multimédia dans mon CSS, la largeur maximale étant le seuil à partir duquel la zone ReCaptcha est considérée comme trop grande une fois transmise:

@media(max-width: 390px) {
    .g-recaptcha {
        margin: 1px;
    }
}

J'ajoute alors ce JQuery:

$(window).resize(function() {
    var recaptcha = $(".g-recaptcha");
    if(recaptcha.css('margin') == '1px') {
        var newScaleFactor = recaptcha.parent().innerWidth() / 304;
        recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
        recaptcha.css('transform-Origin', '0 0');
    }
    else {
        recaptcha.css('transform', 'scale(1)');
        recaptcha.css('transform-Origin', '0 0');
    }
});

Le 304 que j'utilise est la largeur par défaut de la boîte ReCaptcha si elle n'est pas stylée.

Maintenant, le ReCaptcha sera correctement réduit, quelle que soit la taille de son conteneur parent, et il se comportera comme s'il avait une largeur maximale de son épaisseur initiale.

Notez que la requête multimédia est simplement un mécanisme permettant de détecter un changement de taille d'écran.

9
AjaxLeung

Selon la documentation de Google affiche un attribut data-size qui peut être défini et qui a fonctionné pour moi.

 <div class="g-recaptcha" data-sitekey="XXXXXXXX" data-size="compact"></div>

Cependant, la réponse de @GeekGoddess offre un peu plus de flexibilité dans le dimensionnement.

5
L_7337

Si vous n'aimez pas la solution CSS, vous pouvez essayer le JS.

L'idée est de basculer dynamiquement entre le mode compact et le mode normal du plugin recaptcha.

Je vais donner un exemple avec jQuery, mais cela ne devrait pas être beaucoup de le porter en JS pur.

Je suppose que vous avez le code HTML suivant sur le site.

<div>
    <div class="g-recaptcha" data-sitekey="[your-key-here]"></div>
</div>

Premièrement, vous devez charger explicitement gRecaptcha 2 et fournir un rappel onload:

<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?hl=en&#038;onload=recaptchaCallback&#038;render=explicit'>

Ensuite, créez votre fonction de rappel qui sera également votre requête multimédia javascript.

function recaptchaCallback()
{
    var mq = window.matchMedia("(max-width: 400px)");
    mq.addListener(recaptchaRenderer);
    recaptchaRenderer(mq);
}

La dernière chose à faire est de rendre le widget recaptcha.

function recaptchaRenderer(mq)
{
    var recaptcha = $('.g-recaptcha').eq(0);
    var data = recaptcha.data();
    var parent = recaptcha.parent();

    recaptcha.empty().remove();

    var recaptchaClone = recaptcha.clone();
    parent.append(recaptchaClone);
    recaptchaClone.data(data);

    var options = {
        'sitekey': data['sitekey'],
        'size': 'compact'
    };
    if(!mq.matches)
    {
        options['size'] = 'normal';
    }
    grecaptcha.render(recaptchaClone.get(0), options);
}

Vous vous demandez peut-être pourquoi je vide la div et clone tout le contenu de g-recaptcha. C'est parce que gRecaptcha 2 ne vous permettait pas de rendre la deuxième fois le même élément. Il pourrait y avoir un meilleur moyen, mais c'est tout ce que j'ai trouvé pour l'instant.

2
icetique

Pour moi, l'implémentation en mode compact de Google re-captcha 2.0 est boiteuse. C'est moche. 

Vient de développer la solution "Geek Goddess". 

Vous pouvez faire ce qui suit:

<div class="g-recaptcha" data-sitekey="..." style="-moz-transform:scale(0.77); -ms-transform:scale(0.77); -o-transform:scale(0.77); -moz-transform-Origin:0; -ms-transform-Origin:0; -o-transform-Origin:0; -webkit-transform:scale(0.77); transform:scale(0.77); -webkit-transform-Origin:0 0; transform-Origin:0; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.77,M12=0,M21=0,M22=0.77,SizingMethod='auto expand');"></div>

Cela redimensionnera sur presque tous les navigateurs IE, Chrome, FF, Opera (DXImageTransform est pour IE <= 8).

De plus, nous pouvons le rendre réactif en combinant cette transform scale avec CSS max-width.

Ce n'est pas la solution idéale, mais jusqu'à ce que nous obtenions le correctif réactif approprié de Google. 

2
Felix

Pour ceux qui pourraient être intéressés, j'ai changé un peu - AjaxLeung solution et suis venu avec ceci:

 function resizeReCaptcha() {
    if ($(".g-recaptcha").length) {
        var recaptcha = $(".g-recaptcha");
        recaptcha.parent().addClass('col-xs-12 padding0');
        var innerWidth = recaptcha.parent().innerWidth();
        if (innerWidth < 304) {
            var newScaleFactor = innerWidth / 304;
            recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
            recaptcha.css('-webkit-transform', 'scale(' + newScaleFactor + ')');
            recaptcha.css('transform-Origin', '0 0');
            recaptcha.css('-webkit-transform-Origin', '0 0');
        } else {
            recaptcha.css('transform', 'scale(1)');
            recaptcha.css('-webkit-transform', 'scale(1)');
            recaptcha.css('transform-Origin', '0 0');
            recaptcha.css('-webkit-transform-Origin', '0 0');
        }
    }
}

$(window).resize(function() {
    resizeReCaptcha();
});

$(document).ready(function () {
    resizeReCaptcha();
});
1
Cosmin

Espérant que ceci puisse t'être utile

@media only screen and (max-width : 480px) {
    .smallcaptcha{
        transform:scale(0.75);
        transform-Origin:50% 50%;
    }

}
1
Avi E. Koenig

Sur mon site, le re-captcha était coupé et avait l'air mauvais.

 enter image description here

Après quelques essais, j'ai pu résoudre le problème de la coupure avec cette mise à jour de style:

<style>
  .g-recaptcha>div>div>iframe {
     width: 380px;
     height: 98px;
  }
</style>

 enter image description here

1
Dave

Malheureusement, NoCaptcha utilise un iframe afin que vous puissiez au plus contrôler la hauteur/largeur et utiliser overflow:hidden; pour réduire l'excédent. Je ne recommanderais pas de couper plus de quelques pixels du Captcha pour une utilisation optimale.

Exemple:

.g-recaptcha {
max-width: 300px;
overflow: hidden;
}
1
Amy Brown Cole

J'espère que cela fonctionne pour toi.

<div class="g-recaptcha" data-theme="light" data-sitekey="XXXXXXXXXXXXX" style="transform:scale(0.77);transform-Origin:0 0"></div>

Il suffit d'ajouter style="transform:scale(0.77);transform-Origin:0 0"

0
Sumit Nayak
<div class="g-recaptcha" data-theme="light" data-sitekey="your site key" style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-Origin:0 0;-webkit-transform-Origin:0 0;"></div>

Cela fonctionne pour moi, vous l'essayez ..

0
jakasaniya mohit

Voici mon tour sur le redimensionnement:

<script>
function resizeReCaptcha() {

  var width = $( ".g-recaptcha" ).parent().width();

  if (width < 302) {
      var scale = width / 302;
  } else {
      var scale = 1;
  }

  $( ".g-recaptcha" ).css('transform', 'scale(' + scale + ')');
  $( ".g-recaptcha" ).css('-webkit-transform', 'scale(' + scale + ')');
  $( ".g-recaptcha" ).css('transform-Origin', '0 0');
  $( ".g-recaptcha" ).css('-webkit-transform-Origin', '0 0');
};

$( document ).ready(function() {

    $( window ).on('resize', function() {
        resizeReCaptcha();
    });

    resizeReCaptcha();

});
</script>
0
phoenix