Ce tutoriel à pour but de vous expliquer comment faire pour avoir le code de sécurité ReCaptcha de Google qui soit responsive. En effet, par défaut, le module de vérification de robot n'est pas "responsive", c'est-à-dire que ses dimensions ne s'adaptent pas à ce qui l'entoure.

La nouvelle version de "noCaptcha" ReCaptcha est très pratique à utiliser et intégrer, mais ne s'adapte pas à toutes les situations, notamment aux supports mobiles.
Comme on peut le voir sur cet exemple :



Ce qu'on va faire pour résoudre ce problème de largeur du module reCaptcha, c'est qu'on va modifier son échelle. Dans un premier temps on va appliquer directement le style sur la base ayant la class .g-recaptcha, cela correspond à la div dans laquelle le formulaire de vérification de Google est affiché.

Pour valider le fonctionnement on va réduire par 2 sa taille comme ceci :

<div class="g-recaptcha" data-sitekey="your_key" style="transform:scale(0.50);-webkit-transform:scale(0.50);transform-origin:0 0;-webkit-transform-origin:0 0;"></div>

Voici le résultat :



Maintenant que l'on voit que ça fonctionne, on va essayer de rendre cette valeur de scale dynamique en utilisant jQuery.

Pour ce faire, on va sélectionner la div .g-recaptcha puis son parent pour prendre sa largeur. Ainsi on va connaître la largeur disponible que l'on a. Ensuite on va diviser la par largeur dont on dispose par la largeur de notre module reCaptcha (qui fait 302 pixels de largeur) pour obtenir notre échelle "scale".

Voici un exemple du code javascript, utilisant jQuery, que cela pourrait donner :

var width = $('.g-recaptcha').parent().width();
if (width < 302) {
	var scale = width / 302;
	$('.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');
}

On peut voir que nos dimensions sont maintenant parfaitement adaptées :



Maintenant pour aller plus loin, vous pouvez rajouter un recalcul de cette valeur quand le mobile passe de landscape à portrait ou tout changement de largeur de l'écran. De plus, il faudra peut-être prendre en compte des padding ou margin venant affecter la largeur disponible.

  Commentaires

Ajouter un commentaire

Nom / Pseudo

Mail

Commentaire

Informez moi quand il y a un nouveau commentaire

Ajouter