Loading...

Tutorial para configurar Google reCAPTCHA V3. Ejemplo en PHP

NOTICIAS / Diseño web / Tutorial para configurar Google reCAPTCHA V3. Ejemplo en PHP

Recientemente he tenido que configurar Google reCaptcha v3 para un cliente por motivos de spam y a continuación os damos la solución que hemos realizado.

Google lanzó en 2018 reCAPTCHA v3 para evitar bots de spam sin ninguna interacción del usuario.


En este tutorial, os mostraré cómo integrar Google reCAPTCHA v3 en tu página web. 

Registra tu página web y obtén la clave secreta

Lo primero que tienes que hacer es registrar tu página web en Google reCAPTCHA. Para ello puedes hacerlo pinchando aquí.

Para ello, necesitarás inicar sesión en tu cuenta de Google y crea la aplicación completando el formulario. Seleccione el reCAPTCHA v3 y seleccione la casilla de verificación «No soy un robot».

https://www.google.com/recaptcha/admin/create

Una vez enviado, Google te proporcionará las siguientes dos informaciones.

  • Clave del sitio
  • Llave secreta

Cómo integrar Google reCAPTCHA en tu página web

Para integrar google reCAPTCHA en tu página web, debes colocarlo en el lado del cliente y en el lado del servidor. En la página HTML del cliente, debes integrar esta línea entre las etiquetas <head></head> de la página del formulario

📄 DESCARGAR CÓDIGO | https://bit.ly/codigoGoogleReCAPTCHA

<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>

* Reemplace ‘CLAVE_SITIO_WEB‘ con la clave que se le proporcionó en el panel de control de reCAPTCHA

Luego ponemos un campo oculto en el formulario para el reCAPTCHA:

📄 DESCARGAR | https://bit.ly/CampoOculto

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

Insertar reCAPTCHA en PHP para la integración del lado del servidor

A continuación os dejamos dos métodos para insertarlo ya que los servidores o distintos hostings pueden tener distinta configuración y tendrás que utilizar uno u otro código de reCaptcha v3:

MÉTODO 1

📄 DESCARGAR CÓDIGO 1 | https://bit.ly/codigo1ReCAPTCHA

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

}

}

MÉTODO 2

📄 DESCARGAR CÓDIGO 2 | https://bit.ly/codigo2ReCAPTCHA

$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
}

* Reemplace ‘CLAVE_SECRETA‘ con la clave que se le proporcionó en el panel de control de reCAPTCHA

Una vez realizado este proceso. Cuando entres en la página web, verá en el extremo derecho un ícono de Google reCAPTCHA:

Más información | https://developers.google.com/recaptcha

edgedoll.com

Comentarios(5)

  • 1 junio, 2020, 4:20 PM  Responder

    Revisa bien tu código

    • 8 junio, 2020, 9:16 AM

      GRACIAS!
      Revisado y cambiado.
      Disculpen las molestias ocasionadas

  • Fernando
    6 junio, 2020, 5:32 AM  Responder

    iba hacer este tutorial cuando vi que Leonidaz esteban, lo habia comentado.

    • 8 junio, 2020, 9:15 AM

      Sí, vimos comentarios. Revisamos y ya está corregido.
      Disculpen las molestias

  • Yasiris Gonzales
    24 junio, 2020, 10:32 PM  Responder

    ¿Qué pongo en dominio?

Deja un comentario

EY!!!! Me has querido copiar el texto,jejeje Inténtalo de nuevo! Seguro que hay una forma!! Suerte amigo 🤪