Cómo integrar Google reCaptcha a nuestra web

Cada vez Internet esta más inundada de programas llamados “robots” que su propósito es navegar por la web y encontrar formularios de registros, correo, etc que puedan llenar y crear todo tipo de spam.

Una solución a esto es la creación de los captcha que son pruebas que solo una persona podría resolver como la verificación de una palabra, imagen o pregunta. Google tiene también ha creado este método llamado reCaptcha que es uno de los que más me gusta debido a la sencillez en que una persona debe hacer la verificación, no es más que hacer clic en una casilla, verificar imagenes o depende del nivel de reintentos entonces verificar una que otra frase.

recaptcha1Lo primero que debemos hacer es registrar el dominio donde vamos a utilizar el captcha y así obtener nuestra llave de verificación. Eso lo hacemos desde https://www.google.com/recaptcha/admin (aclarando que debes tener una cuenta de correo gmail para acceder a este servicio así como a cualquier otro de Google)

recaptcha2

Luego de hacer el registro vamos a la página web e insertamos el div donde aparecerá el captcha y también uno donde desplegaremos un mesaje de verificación.

En este tutorial pienso hacer la verificación mediante ajax por lo que voy a agregar la librería JQuery:

Ahora escribimos la función que a la que llamaremos desde la api de Google para dibujar el captcha en el formulario, en sitekey escribis la llave de tu sitio y callback disparará la función que verifica la cadena del captcha:

Luego de la función que dibuja el captcha escribimos la que hace la verificación:

En lo anterior enviamos la cadena del captcha a una pagina en nuestro servidor que hará una verificación a la api de Google, y dependiendo de la respuesta mostrarémos un mensaje de error o éxito.

Al final de este archivo agregamos la api de Google que al finalizar la cargar de sus librerías llamará a la función que dibuja el captcha:

Este es el código completo de la página donde estará el captcha:

Este es el archivo php que hace la verificación:

Cada vez que se pase el control del captcha mostrarémos un mensaje asi:

recaptcha4Si la verificación no la queres hacer por ajax sino que al enviar el formulario entonces debes olvidarte de la función verifCaptcha y capturar la respuesta en verif_captcha.php así:

Espero que esto sea de ayuda, saludos!

 

One Comment

Deja un comentario