martes, 13 de abril de 2021

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.

 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.