javascript - example - ReCaptcha API v2 Styling
recaptcha v2 example (16)
No he tenido mucho éxito en encontrar cómo diseñar el nuevo recaptcha de Google (v2). El objetivo final es hacer que responda, pero tengo dificultades para aplicar estilos incluso para cosas simples como el ancho.
Su documentación de API no parece dar detalles sobre cómo controlar el estilo que no sea el parámetro del tema , y las soluciones simples de CSS y JavaScript no me han funcionado.
Básicamente, necesito poder aplicar CSS a la nueva versión de Google de reCaptcha. Usar JavaScript con él es aceptable.
Visión de conjunto:
Lamento ser el que responde las malas noticias, pero después de investigar y depurar, está bastante claro que no hay forma de personalizar el estilo de los nuevos controles reCAPTCHA.
Los controles están envueltos en un
iframe
, lo que impide el uso de CSS para diseñarlos, y la
Política del mismo origen
evita que JavaScript acceda a los contenidos, descartando incluso una solución extravagante.
¿Por qué no personalizar API ?:
A diferencia de reCAPTCHA API Versión 1.0 , no hay opciones de personalización en API Versión 2.0 . Si consideramos cómo funciona esta nueva API, no es de extrañar por qué.
Extracto de ¿Eres un robot? Presentamos "No CAPTCHA reCAPTCHA" :
Si bien la nueva API reCAPTCHA puede sonar simple, hay una gran sofisticación detrás de esa modesta casilla de verificación. Los CAPTCHA han dependido durante mucho tiempo de la incapacidad de los robots para resolver texto distorsionado. Sin embargo, nuestra investigación demostró recientemente que la tecnología de Inteligencia Artificial actual puede resolver incluso la variante más difícil de texto distorsionado con una precisión del 99.8%. Así, el texto distorsionado, por sí solo, ya no es una prueba confiable.
Para contrarrestar esto, el año pasado desarrollamos un backend de Análisis de Riesgos Avanzado para reCAPTCHA que considera activamente el compromiso completo de un usuario con CAPTCHA, antes, durante y después, para determinar si ese usuario es un humano. Esto nos permite confiar menos en escribir texto distorsionado y, a su vez, ofrecer una mejor experiencia para los usuarios. Hablamos de esto en nuestra publicación de San Valentín a principios de este año.
Si pudiera manipular directamente el estilo de los elementos de control, podría interferir fácilmente con la lógica de creación de perfiles de usuario que hace posible el nuevo reCAPTCHA.
¿Qué pasa con un tema personalizado ?:
Ahora, la nueva API
ofrece una opción de
theme
, mediante la cual puede elegir un tema preestablecido, como
light
y
dark
.
Sin embargo, actualmente no hay una manera de crear un tema personalizado.
Si inspeccionamos el
iframe
, encontraremos que el nombre del
theme
se pasa en la cadena de consulta del atributo
src
.
Esta URL se parece a la siguiente.
https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...
Este parámetro determina qué nombre de clase CSS se usa en el elemento contenedor en el
iframe
y determina el tema preestablecido a usar.
Excavando a través de la fuente minimizada, descubrí que en realidad hay 4 valores de tema válidos, que es más que los 2 enumerados en la documentación, pero el
default
y el
standard
son lo mismo que
light
.
Podemos ver el código que selecciona el nombre de la clase de este objeto aquí.
No hay código para un tema personalizado, y si se especifica cualquier otro valor de
theme
, utilizará el tema
standard
.
En conclusión:
En la actualidad, no hay forma de diseñar completamente los nuevos elementos reCAPTCHA, solo se pueden estilizar los elementos envolventes alrededor del
iframe
.
Esto casi seguramente se hizo intencionalmente, para evitar que los usuarios rompan la lógica de creación de perfiles de usuario que hace posible la nueva casilla de verificación sin captcha.
Es posible que Google pueda implementar una API de tema personalizado limitada, lo que quizás le permita elegir colores personalizados para los elementos existentes, pero no esperaría que Google implementara un estilo CSS completo.
¡Excelente! Ahora aquí está disponible el estilo para reCaptcha. Solo uso un estilo en línea como:
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXX" style="transform: scale(1.08); margin-left: 14px;"></div>
lo que quieras hacer, personalizarlo en estilo en línea ...
¡¡Espero que te ayude!!
Agregue una propiedad de tamaño de datos al elemento de recaptcha de google y haga que sea igual a "compacto" en el caso de dispositivos móviles.
Consulte: documentos de Google recaptcha
Como los chicos mencionados anteriormente, no hay forma de cajero automático. pero aún así, si alguien está interesado, al agregar solo dos líneas puede al menos hacer que parezca razonable, si se rompe en cualquier pantalla. Puede asignar un valor diferente en la consulta @media.
<div id="recaptchaContainer" style="transform:scale(0.8);transform-origin:0 0"></div>
Espero que esto ayude a cualquiera :-).
Con la integración del invisible reCAPTCHA puede hacer lo siguiente:
Para habilitar el reCAPTCHA invisible, en lugar de poner los parámetros en un div, puede agregarlos directamente a un botón html.
a. devolución de llamada de datos = "". Esto funciona igual que la casilla de verificación captcha, pero es obligatorio para invisible.
si. insignia de datos: Esto le permite reposicionar la insignia reCAPTCHA (es decir, el logotipo y el texto ''protegido por reCAPTCHA''). Opciones válidas como ''bottomright'' (el valor predeterminado), ''bottomleft'' o ''inline'' que colocarán la insignia directamente encima del botón. Si realiza la insignia en línea, puede controlar el CSS de la insignia directamente.
Desafortunadamente no podemos diseñar reCaptcha v2, pero es posible hacer que se vea mejor, aquí está el código:
Haga clic aquí para obtener una vista previa
.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>
En caso de que alguien tenga problemas con la recaptcha del formulario de contacto 7 (wordpress), esta es una solución que funciona para mí
.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;
}
Lo que puede hacer es ocultar el Control ReCaptcha detrás de un div. Luego haz tu estilo en este div. Y configure el css "pointer-events: none" en él, para que pueda hacer clic a través del div ( Haga clic a través de un DIV para los elementos subyacentes ).
La casilla de verificación debe estar en un lugar donde el usuario haga clic.
Puede recrear recaptcha, envolverlo en un contenedor y solo dejar visible la casilla de verificación. Mi principal problema era que no podía tomar todo el ancho, por lo que ahora se expande al ancho del contenedor. El único problema es la caducidad, puede ver un movimiento, pero tan pronto sucede, lo reinicio.
Ver esta demostración 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>
Puede usar un poco de CSS para el estilo de Google reCAPTCHA v2 en su sitio web:
- Cambiar el fondo, el color del widget Google reCAPTCHA v2:
.rc-anchor-light {
background: #fff!important;
color: #fff!important; }
o
.rc-anchor-normal{
background: #000 !important;
color: #000 !important; }
- Cambie el tamaño del widget Google reCAPTCHA v2 utilizando este fragmento:
.rc-anchor-light {
transform:scale(0.9);
-webkit-transform:scale(0.9); }
- Responde tu Google reCAPTCHA v2:
@media only screen and (min-width: 768px) {
.rc-anchor-light {
transform:scale(0.85);
-webkit-transform:scale(0.85); }
}
Todos los elementos, propiedad de CSS arriba, son solo para su referencia. Puede cambiarlos usted mismo (solo usando el selector de clase CSS).
Consulte el blog de OIW: Cómo editar CSS de Google reCAPTCHA (Cambiar el estilo, Cambiar posición, Cambiar el tamaño de la insignia reCAPTCHA)
También puede encontrar el estilo de Google reCAPTCHA v3 allí.
Si alguien todavía está interesado, hay una biblioteca javascript simple (sin dependencia de jQuery), llamada recaptcha personalizada. Le permite personalizar el botón con css e implementar algunos eventos js (listo / marcado). La idea es hacer que el recaptcha predeterminado sea "invisible" y poner un botón sobre él. Simplemente cambie la identificación de la recaptcha y eso es todo.
<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>
Consulte https://azentreprise.org/read.php?id=1 para obtener más información.
Simplemente agregue una solución hack-ish para que responda.
Envuelva el recaptcha en un div extra:
<div class="recaptcha-wrap">
<div id="g-recaptcha"></div>
</div>
Añadir estilos Esto asume el tema oscuro.
// 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;
}
Esto produce lo siguiente:
Ahora cambiará de tamaño horizontalmente y no tiene borde. El logotipo de recaptcha se cortaría a la derecha, así que lo estoy ocultando con un borde derecho. También está ocultando los enlaces de privacidad y términos, por lo que es posible que desee agregarlos nuevamente.
Intenté establecer una altura en el elemento envoltorio y luego centrar verticalmente el recaptcha para reducir la altura. Desafortunadamente, cualquier combinación de desbordamiento: oculto y una altura más pequeña parece matar el iframe.
Solo estoy agregando este tipo de solución / solución rápida para que no se pierda en caso de un enlace roto.
Enlace a esta solución "Desea agregar un enlace Cómo cambiar el tamaño de Google noCAPTCHA reCAPTCHA | The Geek Goddess" fue proporcionado por Vikram Singh Saini y simplemente describe que puede usar CSS en línea para forzar el encuadre del 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>
Tarde a la fiesta, pero tal vez mi solución ayude a alguien.
No he encontrado ninguna solución que funcione en un sitio web receptivo cuando la ventana gráfica cambia o el diseño es fluido.
Así que he creado un script jQuery para django-cms que se adapta dinámicamente a una ventana gráfica cambiante. Voy a actualizar esta respuesta tan pronto como tenga la necesidad de una variante moderna que sea más modular y no tenga dependencia 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;
Utilizo el siguiente truco para que responda y elimine los bordes. Estos trucos pueden ocultar el mensaje / error recaptcha.
Este estilo es para rtl lang pero puedes cambiarlo fácilmente.
.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>
en la V2.0 no es posible. El iframe bloquea todo el estilo de esto. Es difícil agregar un tema personalizado en lugar del oscuro o claro.