NorfiPC
NorfiPC » Códigos » Implementar reCAPTCHA

Como usar reCAPTCHA de Google para proteger un formulario



Como integrar y agregar el sistema de verificación a una página, para comprobar que el usuario es un humano o persona y así impedir y bloquear el abuso y acceso de los scripts maliciosos o bots.
Como usar reCAPTCHA de Google para proteger un formulario
reCAPTCHA es un servicio de Google, que permite la verificación de los usuarios que usan un formulario en una página, simplemente marcando una casilla.
Impide el abuso y el uso del contenido de forma automática, por robots o scripts.
reCAPTCHA se puede implementar con diversos complementos o plugins, o escribiendo manualmente el código necesario.
Para usar este sistema de protección solo se requiere poseer una cuenta de Google, activar el servicio para nuestro sitio y agregar el código a la página que contiene el formulario a proteger.
A continuación explicamos cómo hacerlo.



Obtener el código para implementar reCAPTCHA


Accede a la página de reCAPTCHA usando tu cuenta de Google.
Indica la dirección URL del sitio donde se va a insertar el sistema de verificación, para validar el dominio o subdominios y copia las dos claves personales:
Clave del sitio. Se usa en el HTML de la página para cargar la API de reCAPTCHA.
Clave secreta. Se usa para autentificar la petición y respuesta entre el sitio y Google.



Integrar reCAPTCHA en una página


Aunque en la página del servicio se puede obtener el código que debemos insertar, a continuación lo detallamos.
Inserta dentro del área del HEAD de la página específica, la siguiente instrucción:
<script async src="https://www.google.com/recaptcha/api.js"></script>
En nuestro caso agregamos la propiedad ASYNC para impedir el bloqueo de la página, en caso que por alguna razón el script de Google no esté disponible.
Inserta en el lugar del formulario, donde deseas que se muestre el cuadro de verificación, entre las etiquetas <form></form>, el siguiente código.
<div class="g-recaptcha" data-sitekey="Clave del sitio"></div>
Sustituye "Clave del sitio" por la correspondiente.



Integrar reCAPTCHA en el lado del servidor


Cuando una persona usa el formulario, el script integrado envía una petición POST con "g-recaptcha-response".
Para que el sistema funcione debemos capturar el contenido de esta petición con el valor de "g-recaptcha-response" y enviarla a Google con nuestra clave secreta y la dirección IP del usuario (opcional).
Si la verificación es positiva (Google comprueba que se trata de un humano) se ejecuta la funcionalidad del formulario.
Si Google detecta un error en la verificación, se bloquea la funcionalidad del formulario y se muestra al usuario el sistema de verificación secundario, que consiste en mostrar varias imágenes donde la persona debe identificar las correctas.



Formulario de ejemplo con reCAPTCHA


En el ejemplo en esta página, integramos reCAPTCHA en un sencillo formulario que devuelve los datos introducidos.
Más abajo se muestra el código empleado.
¡Pruébalo!

Resultado




Codigo empleado


Código empleado en el HTML de la página y en PHP (que puede ser un archivo externo), que envía a Google la petición del usuario, recibe el resultado de la verificación, para escribir el resultado o mostrar un mensaje de error.
//HTML
<form action="#sample" method="post">
<div class="g-recaptcha" data-sitekey="Clave del sitio"></div>
<input name="datos" type="text">
<input type="submit">
</form>

//PHP
<?php
    $datos;$captcha;
    if(isset($_POST['datos'])){ 
       $datos = $_POST['datos'];}	
	if(isset($_POST['g-recaptcha-response'])){
       $captcha=$_POST['g-recaptcha-response'];}
	if(!$captcha){
       echo 'Chequea la Captcha';}
	$secretKey = "Clave secreta";
    $ip = $_SERVER['REMOTE_ADDR'];
	//Chequear captcha con Google
	$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
    $responseKeys = json_decode($response,true);
    if(intval($responseKeys["success"]) !== 1) {
       echo '<h4>Error!</h4>';
        } else {
    //si la captcha es correcta se escribe los datos introducidos
	   echo '<div id="result">'.$datos.'</div>';}
?>

Lee más información sobre el uso de reCAPTCHA en Google: https://developers.google.com/recaptcha/docs/

Otro articulo relacionado...



Páginas relacionadas



Buscar en este sitio


Comparte esta página




Sígueme en las redes sociales








Comenta o lee lo que otros opinan
 
Inicio | Mapa del sitio | Sobre mí | Notificaciones | RSS