Integrar Captcha de Google en formulario usando PHP Y HTML

Vamos a ver cómo integrar el Captcha de Google versión 2 en nuestro formulario.

Vamos a dividir el proceso en dos archivos, el primero contendrá el formulario (zona cliente) y el otro archivo contendrá la lógica de la validación (zona servidor).

Integración Captcha de Google (parte cliente)

Este archivo que lo llamaremos index.php contendrá un formulario de acceso a un login de una intranet, pero se puede aplicar en cualquier otro contexto como por ejemplo es muy usual verlo en un formulario al enviar un email.

Para realizar la integración debemos de realizar los siguientes pasos:

  • Incluimos librería de JavaScript antes de la etiqueta head
<script src="https://www.google.com/recaptcha/api.js"></script>
  • Incluimos dentro de nuestra etiqueta form en el siguiente código.
<div class="g-recaptcha" data-sitekey="6Lcjd30UAAAAAIWm....."></div>
  • Cargamos mensaje informativo por si la validación falla, ya sea porque Google a detectado que es un robot o porque el usuario no ha pulsado el Captcha.
<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Ejemplo Captcha</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">	
    <script src='https://www.google.com/recaptcha/api.js'></script>
 </head>
 <body>
 <div class="container">
    <div class="row text-center">
       <div class="col-md-12">
	   <form action="validacion.php" method="post"> 
		<div class="row">
		   <div class="col-md-12">
			<input name="usuario" type="text" placeholder="Usuario" required/>
		   </div>
		</div>
		<div class="row">
		   <div class="col-md-12">
			<input name="password" type="password" placeholder="Contraseña" required/>
		   </div>
		</div>
		<div class="g-recaptcha" data-sitekey="6Lcjd30UAAAAAIWm....."></div>
		<div class="row">
		   <div class="col-md-12">
			<button class="btn btn-info">Entrar</button>
		   </div>
		</div>
		<?php			                                                       
		if($_GET["mensaje"]=='humanCaptcha')
		{
		?>
		<div class="alert alert-danger">
		    <p>Problemas con la validación.</p>
		</div>
		<?php
		}
	        if($_GET["mensaje"]=='errorCaptcha')
		{
		?>
		   <div class="alert alert-danger">
			<p>Es necesario rellenar el Captcha.</p>
		   </div>
		<?php
                }
		?>
	  </form>
	</div>
      </div>
   </div>
</body>
</html>

Integración Captcha de Google (parte servidor)

Al enviar el formulario lo vamos a recibir en nuestro segundo archivo, validacion.php, este archivo recibirá las variables enviadas por el formulario mediante el método $_POST, una de estas variables pertenecerá al Captcha, llamada g-recaptcha-response.

Una vez obtenido la variable g-recaptcha-response comprobaremos si tiene valor o no, si no tiene valor sabremos que no se ha usado el Captcha de nuestro formulario y por lo tanto deberemos parar la ejecución y mostrar un mensaje informativo, en el caso que tenga valor enviaremos a la api de Google mediante su URL de verificación los siguientes parámetros:

  • Cadena secreta (nos la proporciona Google).
  • IP del usuario que intenta acceder.
  • El valor de la variable g-recaptcha-response.
?php
$response = $_POST["g-recaptcha-response"];
 
if(!empty($response))
{
    $secret = "6Lcjd30UAAAAA....";
    $ip = $_SERVER['REMOTE_ADDR'];
    $respuestaValidación = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$response&remoteip=$ip");
 
    //Si queremos visualizar la información obtenida de la petición a la api de validación de Google para comprobar el estado de esta lo haremos con la función de PHP var_dump
    //var_dump($respuestaValidación);
 
    $jsonResponde = json_decode($respuestaValidación);
    if($jsonResponde->success)
    {
	//entrará aquí cuando todo sea correcto	
    }
    else
    {
        //Google ha detectado que se trata de un proceso no humano
	header("location:index.php?mensaje=humanCaptcha");
	exit();
    }
}
else
{
    //si entra aquí significa que no se ha pulsado el Captcha
    header("location:index.php?mensaje=errorCaptcha");
    exit();
}

Iván Martínez

Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

Deja un comentario

Tu dirección de correo electrónico no será publicada.