jueves, 10 de febrero de 2022

Como configurar el reCAPTCHA en tu sitio web o formulario de contacto

Como configurar el  reCAPTCHA en tu sitio web o formulario de contacto

 


Queridos lectores los bots que envian spam a través de formularios de contacto son un dolor de cabeza. En respuesta a esto surge el test de Turing público y automático para distinguir a los ordenadores de los humanos que es el famoso CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart).

En los 90s Luis Von Ahnm, harto que los foros y mails se llenaran de spam desarrolla este filtro para evitar la basura digital. 

Veamos que tipo de captcha existen:

  1. Texto: Aparece una imagen compuesta por letras y números en una imagen.
  2. Imagen: En un grupo de imagenes se solicita seleccionar aquellas que se ajusten a una condición, por ejemplo todos los botes.
  3. Preguntas: Son preguntas de lógica o cultura general sencillas para humanos.
  4. Operaciones matemáticas : Se solicita resolver cálculos matemáticos aleatorios.
  5. Juegos de palabras: En este caso se necesita que se responda por ejemplo a preguntas como ¿Qué color esta viendo?
  6. Audibles: Estos son especialmente diseñados para personas con capacidades visuales distintas, se solicita reconocer un sonido.
  7. Por tiempo: Estos toman en cuenta el tiempo que tomaría un humano en resolver una tarea.
  8. Lúdicos: En este caso se mezclan los juegos con al comprobación si el que está haciendo la acción es o no un humano.
  9. Campos ocultos: Aquí lo que se busca es forzar a los bots a completar los campos que en el caso de humanos no podrían ver.
Si el Captcha no es completado de manera correcta el mensaje que aparecerá es "Captcha invalido", sin embargo en algunas oportunidades esto se debe a errores de sistema como son:
  • Compatibilidad del navegador
  • Caché del navegador 
  • IP 
  • Interferencia de la red de conexiones proxy
  • Programas maliciosos que corrompen las solicitudes 

 Para evitar esto existe el servicio de reCAPTCHA de Google que evita que se reciba este tipo de spam en los formularios de registro o comentarios de los post de blogs.

Para hacer esta instalación voy a dividir este proceso en 4 partes.


1. Inscripción del sitio web

Lo primero será inscribir el sitio donde vas a instalar el reCaptcha para obtener las credenciales de uso.

  1. Para esto ingresa a la URL: https://www.google.com/recaptcha/about/
  2. Luego da clic en GET STARTED donde crearas una cuenta con un GMAIL.
  3. A continuación seleccionas la opción v3 Admin Console
  4. Luego das clic en el signo + que aparece en el lado derecho.
  5. Y deberás completar los siguientes campos:
  6.  Etiqueta (en este puedes colocar un nombre de identificación como la url de tu sitio web)
  7. luego seleccionas entre 2 opciones: 
    • reCAPTCHA v3 Que verifica las solicitudes con una puntuación
    • reCAPTCHA v2 Que verifica las solicitudes con un reto
  8. Luego en Dominio colocas la URL del sitio web que deseas inscribir.
  9. Aceptas las condiciones de uso.
  10. Hecho estos procedimientos obtendras 2 claves:
    • La clave del sitio web 
    • La clave secreta


2. Utilizar el reCaptcha con plugin y formularios de wordpress

Si trabajas en Wordpress puedes utilizar estas 2 claves para distintos tipos de plugin de formularios de contacto como WPforms, el cual te permite incluir el captcha una vez que hayas obtenido tus claves en el proceso anterior y colocarlas en el apartado de configuración del Captcha del plugin lo cual te permitirá añadirlo como cualquier otro elemento en tu formulario..

Tambien puedes integrarlo como verificación en todo tu sitio con el plugin reCaptcha by BestWebSoft que de igual manera una vez optenidas tus claves secretas deberas configurarlo para su uso en todo el sitio.

3. Integrar el reCaptcha con código html

Si necesitas incorporar el reCaptcha a través de formulario utiliza los siguientes códigos thls que te pego aquí.

a. Este código deberás pegarlo dentro de las etiquetas <head> </head> reemplazando la clave del sitio que obtuviste en el paso 1 en el texto marcado en amarillo:

<script src='https://www.google.com/recaptcha/api.js?render=CLAVE_SITIO_WEB'> 
</script>
<script>
    grecaptcha.ready(function() {
    grecaptcha.execute('CLAVE_SITIO_WEB', {action: 'formulario'})
    .then(function(token) {
    var recaptchaResponse = document.getElementById('recaptchaResponse');
    recaptchaResponse.value = token;
    });});
</script>


NOTA: Si deseas integrar el reCaptcha a blogger puedes pegar el codigo en en gadget de HTML.


b. Para incorporar el reCaptcha al campo del formulario de contacto deberás incorporar dentro del formulario el siguiente código:

<input type="hidden" name="recaptcha_response" id="recaptchaResponse">




4. Integrar el reCaptcha con PHP


Ahora dependiendo de tu hosting y versión de PHP para integrar el reCaptcha tienes 2 opciones de código:

a. En el cual deberás reemplazar el texto marcado en celeste por la clave secreta optenida en el paso 1.

$recaptcha_secret = 'CLAVE_SECRETA'; 
$recaptcha_response = $_POST['recaptcha_response']; 
$url = 'https://www.google.com/recaptcha/api/siteverify'; 

$data = array( 'secret' => $recaptcha_secret, 'response' => $recaptcha_response, 'remoteip' => $_SERVER['REMOTE_ADDR'] ); 
$curlConfig = array( CURLOPT_URL => $url, CURLOPT_POST => true, CURLOPT_RETURNTRANSFER => true, CURLOPT_POSTFIELDS => $data ); 
$ch = curl_init(); 
curl_setopt_array($ch, $curlConfig); 
$response = curl_exec($ch); 
curl_close($ch);

$jsonResponse = json_decode($response);
if ($jsonResponse->success === true) { 
    // Código para procesar el formulario
} else {
   // Código para aviso de error
}

b. En esta segunga opción de igual manera reemplaza el texto marcado en celeste por la clave secreta optenida en el paso 1.



if (isset($_POST['action']) && ($_POST['action'] == 'process')) {

$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify'; 
$recaptcha_secret = 'CLAVE_SECRETA'; 
$recaptcha_response = $_POST['recaptcha_response']; 
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response); 
$recaptcha = json_decode($recaptcha); 

if($recaptcha->score >= 0.7){

  // código para procesar los campos y enviar el form

} else {

  // código para lanzar aviso de error en el envío

}

}







Si lo hiciste de manera correcta debería aparecer en el lado derecho de tu sitio web el código de reCaptcha como el de la imagen a continuación:

Si lo hiciste de manera correcta debería aparecer en el lado derecho de tu sitio web el código de reCaptcha como el de la imagen a continuación:

Con este recurso estarás libre del molestoso spam que realizan los bots en los sitios web.







¡Nos vemos pronto! 

No hay comentarios.:

Publicar un comentario

Déjame tu comentario o consulta.