Share
Las entradas de CAPTCHA son quizás las experiencias frustrantes más comunes en la web. Son lo suficientemente dolorosos para la mayoría de los usuarios, y mucho menos para los discapacitados visuales o cualquiera que confíe en tecnologías de asistencia como los lectores de pantalla para acceder a la web. Sin embargo, lamentablemente, los CAPTCHA son absolutamente vitales en la lucha contra el spam.
Un mal necesario (gracias a los spammers)Irónicamente, aunque los CAPTCHA tradicionales de "texto distorsionado" son difíciles de leer para los usuarios humanos, la tecnología de inteligencia artificial moderna tiene menos problemas para resolverlos. Google incluso utiliza una tecnología similar para leer los números de las casas y las señales de tráfico para confirmar las ubicaciones de Google Street View!
Los robots de Google pueden leer con precisión estosPor lo tanto, es lógico que los propios desarrolladores de Google hayan creado la mejor solución CAPTCHA hasta el final de 2014. El No CAPTCHA reCAPTCHA no requiere nada más que un toque con el dedo, un clic del mouse o un enfoque en la entrada con su teclado y pulsando la barra espaciadora.
En la mayoría de los casos es así de simple, pero si el análisis de riesgo de Google aún no puede estar seguro de que eres humano, aparecerá un segundo aviso.
Ya puede verlo en acción en toda la web, como en la página de envío de @materialup por ejemplo.
Vamos a ir al grano y configurarnos sin CAPTCHA.
Primero, necesitamos una clave API, así que diríjase a https://www.google.com/recaptcha/admin. Para acceder a esta página, deberá iniciar sesión en una cuenta de Google. Se le pedirá que registre su sitio web, así que dele un nombre adecuado, luego haga una lista de los dominios (por ejemplo, tutsplus.com) donde se utilizará este reCAPTCHA en particular. Los subdominios (como webdesign.tutsplus.com y code.tutsplus.com) se toman en cuenta automáticamente.
Una vez hecho esto, se le dará una clave de sitio y su clave secreta de socio:
Debajo de las teclas verá algunos fragmentos para incluir reCAPTCHA en su sitio web. Primero está el JavaScript:
También puede definir cuál de los 40 idiomas compatibles está usando agregando un parámetro a la cadena. Aquí estamos agregando es Lo que nos dará un reCAPTCHA en idioma español:
Coloque esta etiqueta de secuencia de comandos al pie de su página (o simplemente debajo del formulario donde aparecerá reCAPTCHA, dependiendo de cómo priorice la carga de sus activos).
El siguiente es el marcador de posición que deberá agregar a su marca de formulario donde quiera que aparezca el reCAPTCHA:
Nota: la clave del sitio de datos atributo mantendrá el valor de tu clave, no este ejemplo ficticio.
Hay otros atributos que puede agregar para personalizar el aspecto y la funcionalidad de su reCAPTCHA en este momento. Por ejemplo, añadiendo data-theme = "dark" a esto div le dará una versión oscura, que podría adaptarse mejor a su interfaz de usuario:
Para obtener más detalles sobre la configuración de su reCAPTCHA, eche un vistazo a developers.google.com.
Ahora que tenemos los ingredientes iniciales, es hora de ponerlos en un entorno de trabajo..
Pongamos nuestra etiqueta de script y el marcador de posición en una forma simple:
Cómo integrar Google "No CAPTCHA reCAPTCHA" en su sitio web
Aquí hemos utilizado una estructura de página de barebones con un formulario que contiene un nombre entrada, una correo electrónico Entrada y un botón de envío. No hay ningún estilo aquí porque no es realmente necesario para este tutorial..
Deberías tener algo como estePara demostrar que la prueba reCAPTCHA se ha pasado, tendremos que realizar algunas verificaciones del lado del servidor. En este caso, lo haremos con PHP, así que guarde este archivo en un nuevo proyecto como index.php.
Notarás que el método del formulario es enviar, por lo tanto, cuando enviemos los datos del formulario, se devolverán a esta página dentro de una matriz de variables. Podemos generar esas variables haciendo un bucle sobre ellas, así que agregue lo siguiente a su página en algún lugar:
$ valor) echo ''. $ clave. ': '. $ valor'.
'; ?>
Esto toma cada par clave / valor presente en nuestro $ _POST Matriz y salidas con un poco de formato. Ahora, cuando envíe el formulario, debería ver algo como lo siguiente:
Verás el valor devuelto para nombre y correo electrónico, pero también un valor para g-recaptcha-respuesta. Si no pudo completar la prueba de CAPTCHA, este valor estará en blanco, pero si marcó la casilla "No soy un robot" verá una enorme cadena de caracteres.
Este es el valor que debemos enviar a Google para que pueda verificarse, así que hagámoslo a continuación..
Afortunadamente, el equipo de desarrolladores de Google ha hecho el trabajo duro por nosotros aquí, así que diríjase al proyecto ReCAPTCHA en Github y obtenga una copia de la biblioteca recaptchalib.php. Colóquelo en la raíz de su proyecto y luego haga referencia a él en la parte superior de su index.php expediente:
Esta biblioteca contiene una colección de funciones que envían g-recaptcha-respuesta (junto con nuestra clave secreta) a Google a través de una solicitud HTTP. Luego recopilan la respuesta, verificando si el CAPTCHA tuvo éxito o no. Para usar esto, primero debemos configurar un par de variables, antes de cerrar la etiqueta PHP:
// su clave secreta $ secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT"; // respuesta vacía $ respuesta = nula; // comprobar clave secreta $ reCaptcha = new ReCaptcha ($ secret);
ReCaptcha () Comprueba si nuestra clave secreta está presente. Si no, mata el proceso y nos aconseja ir y conseguir uno. Luego pasamos nuestros detalles a través de lo siguiente:
// si se envía, verifique la respuesta si ($ _POST ["g-recaptcha-response"]) $ response = $ reCaptcha-> verifyResponse ($ _SERVER ["REMOTE_ADDR"], $ _POST ["g-recaptcha-response"]) ;
Suponiendo que todo está bien con nuestro formulario enviado, el $ respuesta La variable informará con "éxito" y podemos continuar procesando los datos del formulario. Este es el aspecto que podría tener: elimine el bit en el que hicimos un bucle sobre los datos del formulario, luego agregue el siguiente cheque sobre el formulario:
Accentsconagua
éxito) echo "Hola". $ _POST ["nombre"]. "(". $ _POST ["email"]. "), ¡Gracias por enviar el formulario!"; else ?>Finalmente, agregue una etiqueta de cierre de PHP después del formulario:
Esto muestra el formulario, a menos que se haya enviado correctamente, en cuyo caso muestra un pequeño aviso de agradecimiento.
Esta fue una implementación PHP muy aproximada y lista de No CAPTCHA reCAPTCHA. Está abierto para mejoras, pero esperamos que te ayude a comprender lo básico. El crédito para la biblioteca se destina al equipo de desarrolladores de Google y también debo agradecer rápidamente a Matt Aussaguel por indicármelo..
