Codeigniter v3.x y el Invisible Recaptcha

Acá te voy a contar cómo colocar la última versión (a la fecha, claro) del Recaptcha de Google, más específicamente la versión beta de este complemento el cual no hace visible el famoso "No soy un robot".

Publicado el martes 2 de enero de 2017, a las 04:03am

Hoy tenía como desafío implementar un Recaptcha en uno de los proyectos personales, con tal de filtrar los registros no deseados en el portal en cuestión. 

Por lo tanto, decidí ir por el Recaptcha como método para ese fin, aunque me saltó el aviso del "Invisible Recaptcha" y un botón para probarlo. 

Cabe destacar que es la primera vez que implemento un Captcha o un Recaptcha en mi vida, por lo que es prácticamente fácil hacerlo. 


Bien, vamos al chiste: 

Primero generamos las keys para usarlo en http://google.com/recaptcha/ 

Son dos keys, una es para el front, otra es para el controller (por algo se llama "secret" esa otra key). 

Segundo tenés que agregar el script que levantará las funciones del Recaptcha: 

<script src='https://www.google.com/recaptcha/api.js'></script>

Tercero, en la vista tenés que incluir un botón, con un código similar a este: 

<button class="g-recaptcha" data-sitekey="[key pública]" data-callback='onSubmit'>Submit</button>

"onSubmit" va a ser la función que va a hacer la magia de, al comprobar si somos humanos o no, hacer el submit del formulario, justamente es el callback de la función. Con una función como la que te voy a colocar ahora, es suficiente para hacer el envío del formulario, eso si, tiene que pasarle un parámetro "token". 

function onSubmit = function(token) {
document.getElementById("demo-form").submit();
}

Te recomiendo que el form tenga un id para referenciarlo mejor. 

Cabe aclarar algo, el formulario no puede tener un botón del tipo "submit" dentro del formulario ya que terminará rompiendo el callback. 


Una vez realizado esto, vamos al controller. No importa si usás IonAuth u otra librería, sólamente hará falta usar el CURL para hacer el envío de información a Google. 

Primero vas a necesitar enviar esto: 

// Suponiendo que entra por POST. 
$post = $this->input->post(); 

// Lo metemos al array. 
// En response tenés que colocar el valor que recibe el name g-recaptcha-response". 
$data = array(
	'secret'  	=> [key secret],
	'response' 	=> $post["g-recaptcha-response"] 
);

Y segundo, va la función CURL que se hace por POST. 

$verify = curl_init(); 
curl_setopt($verify, CURLOPT_URL, "https://www.google.com/recaptcha/api/siteverify"); 
curl_setopt($verify, CURLOPT_POST, true); 
curl_setopt($verify, CURLOPT_POSTFIELDS, http_build_query($data)); 
curl_setopt($verify, CURLOPT_SSL_VERIFYPEER, false); 
curl_setopt($verify, CURLOPT_RETURNTRANSFER, true); 
$response = curl_exec($verify); 
$status = json_decode($response, true); 
// Acá, dependiendo de la verificación, crea el usuario o rebota. 
if(empty($status['success']))

return FALSE; 

else 

return TRUE; 
}

Podés conservar los returns como podés reemplazarlos por otras funciones de tu agrado. 


En fin, esto te puede servir para implementar un ReCaptcha sin necesidad de usar una librería ya armada (de hecho, hay una aunque lo dejaron a su suerte). 

Espero que te haya servido! ;) 

Cualquier consulta tengo el Twitter abierto: @Fermoto5HD

El contenido de mi Sitio Personal está licenciado bajo Creative Commons Reconocimiento 4.0 Internacional.

Esta web utiliza tecnologías demasiado recientes, tan recientes que Internet Explorer no los soporta.

Por favor bajate un navegador apto para webs del siglo actual.

Ir a bajar un buen navegador de verdad
Continúo con el riesgo de tener la peor experiencia del mundo