Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Form Design
Webdesign

Cómo Integrar "No CAPTCHA reCAPTCHA" en tu Sitio Web

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Lourdes Lopez Jimenez (you can also view the original English article)

Entradas CAPTCHA son quizá las mas comunes de las experiencias frustrantes en la web. Son suficientemente dolores para la mayoría de las personas, olvídate de las personas con desventajas visuales o cualquiera que depende de tecnologías asistidas tales como lectores de pantalla para accesar a la web. Sin embargo, tristemente, CAPTCHAs son absolutamente vitales para combatir spam.

A necessary evil thanks spammers
Un mal necesario (gracias spammers)

Irónicamente, incluso tradicionales CAPTCHAs de "texto distorsionado" son incomodas de leer para usuarios humanos, tecnología de inteligencia artificial moderna tiene menos problemas en resolverlos. ¡Google incluso usa tecnología similar para leer numero de casas y letreros de calles para confirmar las localizaciones en Google Street View!

Los robots de Google pueden leer esos con precisión

Es solo logico por lo tanto que los propios desarrolladores de Google aparecieran con una mejor solución CAPTCHA hasta ahora, para finales del 2014. El No CAPTCHA reCAPTCHA no requiere nada mas que un pulso de dedo, un clic de ratón, o enfocarse en la entrada con un teclado y presionar la barra espaciadora.

En la mayoría de casos es así de simple, pero si los análisis de riesgo de Google aún no pueden estar seguros de que eres un humano, una segunda pantalla aparecerá.

Lo puedes ver en acción en toda la web, como en la página de sumisión de @materialup por ejemplo.

Consigue No CAPTCHA reCAPTCHA

Vamos a cortar a la persecución y conseguirnos una instalación con No CAPTCHA.

Paso 1

Primero, necesitamos una clave API, así que ve a https://www.google.com/recaptcha/admin. Para ganar acceso a esta página necesitarás haber iniciado sesión en tu cuenta de Google. Se te preguntará que registres tu sitio web, así que dale un nombre adecuado, entones lista los dominios (por ejemplo tutsplus.com) donde este particular reCAPTCHA será usado. Subdominios (tales como webdesign.tutsplus.com y code.tutsplus.com) son automaticamente tomados en cuenta.

Paso 2

Con eso hecho se te dará una clave de sitio y la clave secreta de partner:

Paso 3

Debajo de las claves verás algunos fragmentos para incluir reCAPTCHA en tu sitio web. Primero está el JavaScript:

Puedes también definir cuales de los 40 idiomas soportados estás usando agregando un parámetro a la cadena. Aquí estamos agregando es el cual nos dará el reCAPTCHA para el lenguaje Español.

Pon esta etiqueta script en el pie de tu página (o justo debajo del formulario donde reCAPTCHA aparecerá, dependiendo de como prioritizes tu carga de recursos).

Paso 4

Enseguida el placeholder que necesitarás agregar a marcado de tu formulario cuando sea que reCAPTCHA aparezca:

Nota: el atributo data-sitekey mantendrá el valor de tu clave, no como este ejemplo.

Hay otros atributos los cuales puedes agregar para personalizar la vista y funcionalidad de tu reCAPTCHA en este punto. Por ejemplo, agregar data-theme="dark" a este div te dará una versión oscura, la cual podría encajar mejor en tu interfaz de usuario:

Para mas detalles sobre la configuración de tu reCAPTCHA hecha un vistazo a developers.google.com.

Armandolo

Ahora tenemos los ingredientes iniciales, es tiempo de ponerlos en un entorno funcional.

Paso 1

Vamos a poner nuestra etiqueta script y el placeholder en un simple formulario:

Aquí hemos usado un esqueleto de estructura de página con un formulario que contiene una entrada name, una entrada email y un botón de sumisión. No hay ningún estilo de ninguna clase aquí porque no es realmente necesario en este tutorial.

our captcha form
Deberías de tener algo que se vea como esto

Para demostrar que la prueba reCAPTCHA ha sido pasada vamos a necesitar ejecutar algunas pruebas en el lado del servidor. En este caso vamos a hacerlo con PHP, así que guarda este archivo en un nuevo proyecto como index.php.

Paso 2

Vas a darte cuenta de que el método de este formulario es post, así que cuando enviamos los datos de formulario serán devueltos a esta página dentro de un array de variables. Podemos mostrar esas variables haciendo un loop sobre ellas, así que agrega lo siguiente a tu página en algún lugar:

Esto toma cada par clave/valor presente en tu array $_POST y los devuelve con un poco de formato. Ahora cuando envies el formulario deberías de ver algo como lo siguiente:

Verás el valor devuelto para name y email, pero también un valor para g-recaptcha-response. Si fallas en completar la prueba CAPTCHA este valor estará en blanco, pero si marcaste la caja "I'm not a robot" verás una enorme cadena de caracteres.

Pero este valor necesitamos enviarlo a Google para que pueda ser verificado, así que vamos a hacer eso enseguida.

Paso 3

Felizmente, el equipo de desarrolladores de Google han hecho un trabajo duro para nosotros aquí, así que dirigente al proyecto ReCAPTCHA en Github y toma una copia de la librería recaptchalib.php. Ponlo en la raíz de tu proyecto y luego has referencia a el en la parte de arriba de tu archivo index.php:

Paso 4

Esta biblioteca contiene una colección de funciones que envían el g-recaptcha-response (junto con nuestra clave secreta) a Google via una solicitud HTTP. Ellos entonces toman la respuesta, revisando ya sea si el CAPTCHA fue exitoso o no. Para usar esto necesitamos primero ajustar un par de variables, antes de cerrar la etiqueta PHP:

ReCaptcha() echa un vistazo para ver si nuestra clave secreta está presente. Si no cierra el proceso y nos recomienda que vayamos a conseguir una. Entonces nosotros pasamos nuestros detalles a través de lo siguiente:

Paso 5

Asumiendo que todo esté bien con nuestro formulario enviado, la variable $response reportará de vuelta con "success" y podemos continuar a procesar los datos de formulario. Aquí está como podría verse: remove la parte donde hicimos bucle sobre los datos del formulario, entonces agrega la siguiente comprobación arriba del formulario:

Finalmente, agrega una etiqueta de cerrado luego del formulario:

Esto muestra el formulario, a menos que haya sido exitosamente enviado, en tal caso mostrará un pequeño mensaje de agradecimiento. Aquí está la demo final.

Conclusión

Esta fue una aspera y lista implementación en PHP de No Captcha reCAPTCHA. Está muy disponible para mejoras, pero con suerte te dará una compresión de lo básico. El credito para la biblioteca va al equipo de desarrolladores de Google y debería también dar un rápido agradecimiento a Matt Aussaguel por indicármelo.

Recursos Útiles

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.