ReCaptcha API v2 Styling
Je n'ai pas eu beaucoup de succès à trouver le style du nouveau recaptcha (v2) de Google. Le but ultime est de le rendre réactif, mais j’ai du mal à appliquer un style même pour des choses simples comme la largeur.
Leur documentation API ne semble pas donner de détails sur la manière de contrôler le style sauf le paramètre theme, et les solutions simples CSS et JavaScript ne fonctionnent pas pour moi.
En gros, je dois pouvoir appliquer le CSS à la nouvelle version de reCaptcha de Google. L'utilisation de JavaScript avec cela est acceptable.
Vue d'ensemble:
Désolé de répondre aux mauvaises nouvelles, mais après des recherches et un débogage, il est clair qu'il est impossible de personnaliser le style des nouvelles commandes reCAPTCHA. Les contrôles sont entourés d'une iframe, ce qui empêche l'utilisation de CSS pour les styler, et Stratégie de même origine empêche JavaScript d'accéder au contenu, excluant même une solution bidirectionnelle.
Pourquoi aucune API personnalisée ?:
Contrairement à reCAPTCHA API Version 1.0 , il n'y a pas d'options de personnalisation dans API Version 2.0 . Si nous examinons le fonctionnement de cette nouvelle API, nous n’avons pas de surprise.
Extrait de Es-tu un robot? Présentation de “No CAPTCHA reCAPTCHA” :
Bien que la nouvelle API reCAPTCHA puisse paraître simple, cette modeste case à cocher comporte un degré élevé de sophistication. Les CAPTCHA comptent depuis longtemps sur l'incapacité des robots à résoudre les textes déformés. Cependant, nos recherches ont récemment montré que la technologie d’intelligence artificielle d’aujourd’hui peut résoudre même la variante la plus difficile du texte déformé avec une précision de 99,8%. Ainsi, le texte déformé, à lui seul, n’est plus un test fiable.
Pour y remédier, l’année dernière, nous avons développé pour reCAPTCHA un système d’analyse avancée des risques qui prend en compte l’intégralité de la relation d’un utilisateur avec CAPTCHA - avant, pendant et après - pour déterminer s’il s’agit d’un humain. Cela nous permet de moins nous baser sur la saisie de texte déformé et d’offrir une meilleure expérience aux utilisateurs. Nous en avons parlé dans notre article de la Saint-Valentin plus tôt cette année.
Si vous pouviez manipuler directement le style des éléments de contrôle, vous pourriez facilement interférer avec la logique de profilage de l'utilisateur rendant le nouveau reCAPTCHA possible.
Qu'en est-il d'un thème personnalisé ?:
Maintenant, la nouvelle API offre une option theme , grâce à laquelle vous pouvez choisir un thème prédéfini tel que light et dark. Cependant, il n’existe actuellement aucun moyen de créer un thème personnalisé. Si nous inspectons la iframe, nous découvrirons que le nom theme est passé dans la chaîne de requête de l'attribut src. Cette URL ressemble à ce qui suit.
https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...
Ce paramètre détermine quel nom de classe CSS est utilisé sur l'élément wrapper dans la variable iframe et détermine le thème prédéfini à utiliser.
En fouillant dans la source minifiée, j'ai constaté qu'il existe en fait 4 valeurs de thème valides, ce qui est supérieur aux 2 répertoriées dans la documentation, mais default et standard sont identiques à light.
Nous pouvons voir le code qui sélectionne le nom de la classe à partir de cet objet ici.
Il n'y a pas de code pour un thème personnalisé et si une autre valeur theme est spécifiée, le thème standard sera utilisé.
En conclusion:
À l'heure actuelle, il n'est pas possible de styliser complètement les nouveaux éléments reCAPTCHA; seuls les éléments enveloppants autour de iframe peuvent être stylisés. Cela a presque certainement été fait intentionnellement, afin d'empêcher les utilisateurs de casser la logique de profilage d'utilisateur qui rend possible la nouvelle case à cocher sans captcha. Il est possible que Google puisse implémenter une API de thème personnalisé limitée, vous permettant peut-être de choisir des couleurs personnalisées pour les éléments existants, mais je ne m'attendrais pas à ce que Google mette en œuvre un style CSS complet.
Comme les gars mentionnés ci-dessus, il n'y a aucun moyen ATM. Néanmoins, si vous êtes intéressé, vous pouvez au moins, en ajoutant deux lignes, donner l’impression raisonnable, s’il casse sur un écran. vous pouvez attribuer une valeur différente à la requête @media.
<div id="recaptchaContainer" style="transform:scale(0.8);transform-Origin:0 0"></div>
J'espère que cela aide quelqu'un :-).
Malheureusement, nous ne pouvons pas appeler reCaptcha v2, mais il est possible de le rendre meilleur, voici le code:
.g-recaptcha-outer{
text-align: center;
border-radius: 2px;
background: #f9f9f9;
border-style: solid;
border-color: #37474f;
border-width: 1px;
border-bottom-width: 2px;
}
.g-recaptcha-inner{
width: 154px;
height: 82px;
overflow: hidden;
margin: 0 auto;
}
.g-recaptcha{
position:relative;
left: -2px;
top: -1px;
}
<div class="g-recaptcha-outer">
<div class="g-recaptcha-inner">
<div class="g-recaptcha" data-size="compact" data-sitekey="YOUR KEY"></div>
</div>
</div>
Ajoutez une propriété data-size à l'élément google recaptcha et rendez-la égale à "compact" en cas de mobile.
Voir: Google Recaptcha Docs
Vous pouvez recréer recaptcha, l'envelopper dans un conteneur et ne laisser que la case à cocher visible. Mon problème principal était que je ne pouvais pas prendre toute la largeur, alors maintenant, elle s'étend à la largeur du conteneur. Le seul problème est l'expiration, vous pouvez voir un film, mais dès que cela se produit, je le réinitialise.
Voir cette démo http://codepen.io/alejandrolechuga/pen/YpmOJX
function recaptchaReady () {
grecaptcha.render('myrecaptcha', {
'sitekey': '6Lc7JBAUAAAAANrF3CJaIjt7T9IEFSmd85Qpc4gj',
'expired-callback': function () {
grecaptcha.reset();
console.log('recatpcha');
}
});
}.recaptcha-wrapper {
height: 70px;
overflow: hidden;
background-color: #F9F9F9;
border-radius: 3px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
-webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
-moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08);
height: 70px;
position: relative;
margin-top: 17px;
border: 1px solid #d3d3d3;
color: #000;
}
.recaptcha-info {
background-size: 32px;
height: 32px;
margin: 0 13px 0 13px;
position: absolute;
right: 8px;
top: 9px;
width: 32px;
background-image: url(https://www.gstatic.com/recaptcha/api2/logo_48.png);
background-repeat: no-repeat;
}
.rc-anchor-logo-text {
color: #9b9b9b;
cursor: default;
font-family: Roboto,helvetica,arial,sans-serif;
font-size: 10px;
font-weight: 400;
line-height: 10px;
margin-top: 5px;
text-align: center;
position: absolute;
right: 10px;
top: 37px;
}
.rc-anchor-checkbox-label {
font-family: Roboto,helvetica,arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 17px;
left: 50px;
top: 26px;
position: absolute;
color: black;
}
.rc-anchor .rc-anchor-normal .rc-anchor-light {
border: none;
}
.rc-anchor-pt {
color: #9b9b9b;
font-family: Roboto,helvetica,arial,sans-serif;
font-size: 8px;
font-weight: 400;
right: 10px;
top: 53px;
position: absolute;
a:link {
color: #9b9b9b;
text-decoration: none;
}
}
g-recaptcha {
// transform:scale(0.95);
// -webkit-transform:scale(0.95);
// transform-Origin:0 0;
// -webkit-transform-Origin:0 0;
}
.g-recaptcha {
width: 41px;
/* border: 1px solid red; */
height: 38px;
overflow: hidden;
float: left;
margin-top: 16px;
margin-left: 6px;
> div {
width: 46px;
height: 30px;
background-color: #F9F9F9;
overflow: hidden;
border: 1px solid red;
transform: translate3d(-8px, -19px, 0px);
}
div {
border: 0;
}
}<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReady&&render=explicit'></script>
<div class="recaptcha-wrapper">
<div id="myrecaptcha" class="g-recaptcha"></div>
<div class="rc-anchor-checkbox-label">I'm not a Robot.</div>
<div class="recaptcha-info"></div>
<div class="rc-anchor-logo-text">reCAPTCHA</div>
<div class="rc-anchor-pt">
<a href="https://www.google.com/intl/en/policies/privacy/" target="_blank">Privacy</a>
<span aria-hidden="true" role="presentation"> - </span>
<a href="https://www.google.com/intl/en/policies/terms/" target="_blank">Terms</a>
</div>
</div>Ce que vous pouvez faire est de cacher le contrôle ReCaptcha derrière un div. Ensuite, faites votre style sur cette div. Et définissez le "pointeur-événements: aucun" css dessus, afin que vous puissiez cliquer sur la div ( Cliquez sur une DIV pour les éléments sous-jacents ).
La case à cocher doit être à un endroit où l'utilisateur clique.
J'utilise l'astuce ci-dessous pour le rendre réactif et supprimer les bordures. Ces astuces cachent peut-être un message/une erreur recaptcha.
Ce style est pour rtl lang mais vous pouvez le changer facilement.
.g-recaptcha {
position: relative;
width: 100%;
background: #f9f9f9;
overflow: hidden;
}
.g-recaptcha > * {
float: right;
right: 0;
margin: -2px -2px -10px;/*remove borders*/
}
.g-recaptcha::after{
display: block;
content: "";
position: absolute;
left:0;
right:150px;
top: 0;
bottom:0;
background-color: #f9f9f9;
clear: both;
}
<div class="g-recaptcha" data-sitekey="Your Api Key"></div>
<script src='https://www.google.com/recaptcha/api.js?hl=fa'></script>
Avec l'intégration du reCAPTCHA invisible, vous pouvez effectuer les tâches suivantes:
Pour activer le reCAPTCHA invisible, plutôt que de placer les paramètres dans un div, vous pouvez les ajouter directement à un bouton html.
une. data-callback = ””. Cela fonctionne comme la case à cocher captcha, mais est requis pour invisible.
b. data-badge: vous permet de repositionner le badge reCAPTCHA (c'est-à-dire le logo et le protégé par le texte reCAPTCHA) Options valides comme ‘bottomright’ (par défaut), «Bottomleft» ou «inline» qui placera le badge directement au-dessus du bouton. Si vous Si vous insérez le badge en ligne, vous pouvez contrôler le code CSS du badge directement.
Il suffit d’ajouter une solution astucieuse pour la rendre réactive.
Enveloppez le recaptcha dans un div supplémentaire:
<div class="recaptcha-wrap">
<div id="g-recaptcha"></div>
</div>
Ajouter des styles. Cela suppose le thème sombre.
// Recaptcha
.recaptcha-wrap {
position: relative;
height: 76px;
padding:1px 0 0 1px;
background:#222;
> div {
position: absolute;
bottom: 2px;
right:2px;
font-size:10px;
color:#ccc;
}
}
// Hides top border
.recaptcha-wrap:after {
content:'';
display: block;
background-color: #222;
height: 2px;
width: 100%;
top: -1px;
left: 0px;
position: absolute;
}
// Hides left border
.recaptcha-wrap:before {
content:'';
display: block;
background-color: #222;
height: 100%;
width: 2px;
top: 0;
left: -1px;
position: absolute;
z-index: 1;
}
// Makes it responsive & hides cut-off elements
#g-recaptcha {
overflow: hidden;
height: 76px;
border-right: 60px solid #222222;
border-top: 1px solid #222222;
border-bottom: 1px solid #222;
position: relative;
box-sizing: border-box;
max-width: 294px;
}
Cela donne ce qui suit:
Il va maintenant redimensionner horizontalement et n'a pas de bordure. Le logo recaptcha serait coupé à droite, alors je le cache avec une bordure droite. Cela cache également les liens relatifs à la confidentialité et aux termes, vous voudrez peut-être les rajouter.
J'ai essayé de définir une hauteur sur l'élément wrapper, puis de centrer verticalement le recaptcha pour réduire la hauteur. Malheureusement, toute combinaison de débordement: caché et une hauteur plus petite semble tuer l’iframe.
Au cas où quelqu'un se battant avec le recaptcha du formulaire de contact 7 (wordpress) voici une solution qui fonctionne pour moi
.wpcf7-recaptcha{
clear: both;
float: left;
}
.wpcf7-recaptcha{
margin-right: 6px;
width: 206px;
height: 65px;
overflow: hidden;
border-right: 1px solid #D3D3D3;
}
.wpcf7-recaptcha iframe{
padding-bottom: 15px;
border-bottom: 1px solid #D3D3D3;
background: #F9F9F9;
border-left: 1px solid #d3d3d3;
}
dans la V2.0 ce n'est pas possible. L'iframe bloque tout style. Il est difficile d'ajouter un thème personnalisé à la place du thème sombre ou clair.
Génial! Maintenant, le style est disponible pour reCaptcha .. J'utilise simplement un style en ligne comme:
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXX" style="transform: scale(1.08); margin-left: 14px;"></div>
peu importe ce que vous voulez faire, personnalisez votre style en ligne ...
J'espère que cela vous aidera!
En retard à la fête, mais peut-être que ma solution aidera quelqu'un.
Je n'ai trouvé aucune solution qui fonctionne sur un site Web réactif lorsque la fenêtre d'affichage change ou que la présentation est fluide.
J'ai donc créé un script jQuery pour Django-cms qui s'adapte de manière dynamique à une fenêtre d'affichage changeante. Je vais mettre à jour cette réponse dès que j’ai besoin d’une variante moderne plus modulaire et ne dépendant pas de jQuery.
html
<div class="g-recaptcha" data-sitekey="{site_key}" data-size={size}>
</div>
css
.g-recaptcha { display: none; }
.g-recaptcha.g-recaptcha-initted {
display: block;
overflow: hidden;
}
.g-recaptcha.g-recaptcha-initted > * {
transform-Origin: top left;
}
js
window.djangoReCaptcha = {
list: [],
setup: function() {
$('.g-recaptcha').each(function() {
var $container = $(this);
var config = $container.data();
djangoReCaptcha.init($container, config);
});
$(window).on('resize orientationchange', function() {
$(djangoReCaptcha.list).each(function(idx, el) {
djangoReCaptcha.resize.apply(null, el);
});
});
},
resize: function($container, captchaSize) {
scaleFactor = ($container.width() / captchaSize.w);
$container.find('> *').css({
transform: 'scale(' + scaleFactor + ')',
height: (captchaSize.h * scaleFactor) + 'px'
});
},
init: function($container, config) {
grecaptcha.render($container.get(0), config);
var captchaSize, scaleFactor;
var $iframe = $container.find('iframe').eq(0);
$iframe.on('load', function() {
$container.addClass('g-recaptcha-initted');
captchaSize = captchaSize || { w: $iframe.width() - 2, h: $iframe.height() };
djangoReCaptcha.resize($container, captchaSize);
djangoReCaptcha.list.Push([$container, captchaSize]);
});
},
lateInit: function(config) {
var $container = $('.g-recaptcha.g-recaptcha-late').eq(0).removeClass('.g-recaptcha-late');
djangoReCaptcha.init($container, config);
}
};
window.djangoReCaptchaSetup = window.djangoReCaptcha.setup;
Si quelqu'un est toujours intéressé, il existe une simple bibliothèque javascript (sans dépendance jQuery), nommée custom recaptcha. Il vous permet de personnaliser le bouton avec css et d’implémenter certains événements js (prêt/vérifié). L'idée est de rendre la recaptcha par défaut "invisible" et de placer un bouton dessus. Il suffit de changer l'identifiant du recaptcha et c'est tout.
<head>
<script src="https://azentreprise.org/download/custom-recaptcha.min.js"></script>
<style type="text/css">
#captcha {
float: left;
margin: 2%;
background-color: rgba(72, 61, 139, 0.5); /* darkslateblue with 50% opacity */
border-radius: 2px;
font-size: 1em;
color: #C0FFEE;
}
#captcha.success {
background-color: rgba(50, 205, 50, 0.5); /* limegreen with 50% opacity */
color: limegreen;
}
</style>
</head>
<body>
<div id="captcha" data-sitekey="your_site_key" data-label="Click here" data-label-spacing="15"></div>
</body>
Voir https://azentreprise.org/read.php?id=1 pour plus d'informations.
J'ajoute simplement ce type de solution/solution rapide pour ne pas le perdre en cas de rupture du lien.
Lien vers cette solution "Voulez-vous ajouter un lien Comment redimensionner Google noCAPTCHA reCAPTCHA | La déesse geek" a été fourni par Vikram Singh Saini et indique simplement que vous pouvez utiliser le CSS en ligne pour renforcer le cadrage de l'iframe .
// Scale the frame using inline CSS
<div class="g-recaptcha" data-theme="light"
data-sitekey="XXXXXXXXXXXXX"
style="transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-Origin:0 0;
-webkit-transform-Origin:0 0;
">
</div>
// Scale the images using a stylesheet
<style>
#rc-imageselect, .g-recaptcha {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-Origin:0 0;
-webkit-transform-Origin:0 0;
}
</style>
Vous pouvez utiliser des CSS pour Google reCAPTCHA v2 styling sur votre site Web:
- Changer le fond et la couleur du widget Google reCAPTCHA v2:
.rc-anchor-light {
background: #fff!important;
color: #fff!important; }
ou
.rc-anchor-normal{
background: #000 !important;
color: #000 !important; }
- Redimensionnez le widget Google reCAPTCHA v2 à l'aide de cet extrait:
.rc-anchor-light {
transform:scale(0.9);
-webkit-transform:scale(0.9); }
- Responsive votre Google reCAPTCHA v2:
@media only screen and (min-width: 768px) {
.rc-anchor-light {
transform:scale(0.85);
-webkit-transform:scale(0.85); }
}
Tous les éléments, propriété de CSS ci-dessus, sont juste pour votre référence. Vous pouvez les changer vous-même (en utilisant uniquement le sélecteur de classe CSS).
Reportez-vous à OIW Blog - Comment modifier les CSS de Google reCAPTCHA (modification du style, changement de position, redimensionnement de l'insigne reCAPTCHA)
Vous pouvez également y trouver le style de Google reCAPTCHA v3.