El CAPTCHA estándar es inútil, los bots lo revisan "de una vez" y crean problemas a los usuarios.
La mejor solución es utilizar Google reCAPTCHA v2 o v3. Ambas versiones de Google reCAPTCHA son excelentes opciones. Esto es lo mejor que ahora está disponible en el mercado a partir de soluciones claras, confiables y gratuitas.
El principal problema con ambas versiones es que cuando se conectan, las puntuaciones de PageSpeed Insight se reducen significativamente de 20 a 30.
ReCAPTCHA v2 ejemplo - requiere adivinar fotos
 |
Ejemplo de reCAPTCHA v3 : no requiere acciones por parte del usuario, analiza su comportamiento en segundo plano
  |
Un punto importante para mí es no crear problemas a los usuarios reales, porque Yo mismo no soy un gran fanático de adivinar vehículos en reCAPTCHA v2, así que mi elección es v3.
Por lo tanto, hay dos problemas de Google reCAPTCHA v3 que deben abordarse:
- logo colgante en la esquina inferior derecha;
- pérdida de 20-30 puntos en Google PageSpeed Insight.
Logotipo colgante
Google le permite eliminar el logotipo ocultándolo a través de CSS en su contrato de licencia.
.grecaptcha-badge {
visibility: hidden;
}En su lugar, debajo de cada formulario, escriba "Privacidad y condiciones de servicio de reCAPTCHA antispam" con enlaces a páginas de Google relevantes.
|
Pérdida de puntos en Google PageSpeed Insight
Al conectar un archivo javascript de reCAPTCHA v3, las puntuaciones en Google PageSpeed Insight se reducen considerablemente. Esto fue fundamental para mí. Creo que esto se debe al análisis del comportamiento del usuario (se produce una disminución similar cuando se usa el visor web en Yandex.Metrica).
Con recursos bien optimizados, puede perder entre 20 y 30 puntos. Por lo tanto, puede usarlo en páginas separadas donde la velocidad no es importante (por ejemplo, contactos) sin ninguna modificación. Para su uso en todo el sitio (por ejemplo, para proteger un formulario de inicio de sesión de un extremo a otro o una suscripción a un boletín), es recomendable realizar una modificación.
Se me ocurrió una opción para inicializar reCAPTCHA v3 haciendo clic en los campos del formulario. De forma predeterminada, no cargo el archivo javascript desde reCAPTCHA v3, y solo si el usuario coloca el cursor en uno de los campos del formulario, lo cargo. Lo más probable es que este método reduzca la precisión de la determinación de usuarios reales, pero no hubo problemas. Esta precisión es suficiente para mis tareas.
Comenzó a usar esta técnica primero en formularios web 1C-Bitrix, luego para formularios de autorización y suscripción de extremo a extremo en sitios sin Bitrix.
En vista del hecho de que 1C-Bitrix es un CMS público, te contaré en términos generales usando su ejemplo, sobre la metodología y el posible caso de uso. Se pueden realizar ajustes más precisos para satisfacer sus necesidades.
Uso de Google reCAPTCHA v3 en formularios web 1C-Bitrix
1. Llamamos al formulario usando el componente estándar bitrix: formulario y hacemos 2 adiciones:
- Reemplace el tipo de botón = enviar con el tipo de botón habitual = botón
- agregar nombre de campo oculto = g_recaptcha_response
|
2. Agregue la inicialización de reCAPTCHA al hacer clic en los campos del formulario al archivo javascript del sitio o componente (en este ejemplo, supongo que está usando jQuery):
$('body').on('click','form input, form textarea', function() {
if (typeof(grecaptcha) == 'undefined') {
var grecaptcha_s = document.createElement('script');
grecaptcha_s.src = 'https://www.google.com/recaptcha/api.js?render=<PUBLIC_KEY>';
var grecaptcha_h = document.getElementsByTagName('script')[0];
grecaptcha_h.parentNode.insertBefore(grecaptcha_s,grecaptcha_h);
}
});3. Agregue el seguimiento del clic en el botón en el formulario. Más adentro, usamos el ejemplo descrito en la documentación de Google. Rellena el campo g_recaptcha_response, que usaremos en el último paso para validar al usuario.
$('body').on('click','form button[name="web_form_submit"]', function() {
grecaptcha.ready(function() {
grecaptcha.execute('<PUBLIC_KEY>',{action: 'feedback'}).then(
function(token) {
$('form input[name="g_recaptcha_response"]').val(token);
var form_obj = $('form');
var event_obj = form_obj.get(0);
BX.fireEvent(event_obj,'submit');
event_obj.submit();
}
);
});
});4. Seguimiento del evento onBeforeResultAdd en init.php
Antes de enviar los resultados del formulario, haga una apelación al servidor de Google con su <PRIVATE_KEY> y el valor del campo oculto g_recaptcha_response del formulario.
En respuesta, obtenemos los puntos de este usuario:
- 1 esta es definitivamente una persona
- 0 exactamente un robot
- Más de 0,5 pueden considerarse humanos
AddEventHandler("form","onBeforeResultAdd","onBeforeResultAddHandler");
function onBeforeResultAddHandler($WEB_FORM_ID,$arFields,$arrVALUES)
{
global $APPLICATION;
$g_recaptcha_response = $arrVALUES["g_recaptcha_response"];
if (!empty($g_recaptcha_response))
{
$response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=<PRIVATE_KEY>&response=".$g_recaptcha_response."&remoteip=".$_SERVER["REMOTE_ADDR"]),true);
$g_recaptcha_response_check = false;
if (($response["success"] and $response["score"] >= 0.5 and $response["action"] == 'feedback']))
{
$g_recaptcha_response_check = true;
}
if (!$g_recaptcha_response_check)
{
$APPLICATION->ThrowException(' Google reCAPTCHA v3.</a>');
}
}
else
{
$APPLICATION->ThrowException(' Google reCAPTCHA v3.');
}
}Finalmente
Esta técnica se puede utilizar en cualquier sitio y formulario, independientemente del CMS. He proporcionado métodos de trabajo generales que se pueden aplicar en su proyecto.
Puedes hacer lo mismo con Google reCAPTCHA v2, inicializar haciendo clic en el formulario y pedirle al usuario que marque la casilla "No soy un robot" y adivine las imágenes, si es necesario. En este caso, también guardará puntos de PageSpeed Insight y le dará al usuario una herramienta (seleccionar imágenes) para demostrar que no es un robot. Pero como dije anteriormente, lo más importante para mí es no crear obstáculos para el usuario.