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

<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

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

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

$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(0)

Deja un comentario