Detenga los bots con Google Recaptcha

Sep 12, 2025
Cómo
Stop the bots with Google reCAPTCHA
[dieciséis] (Crédito de la imagen: Futuro)

Mantener los Bots Siempre es un juego de números, con tristeza, la disponibilidad de bibliotecas de aprendizaje de máquinas fáciles de usar hizo que los tipos de CAPTCHA clásicos sencillos sencillos. Google se encuentra a la vanguardia de la tormenta botting, después de todo, algo solo existe si se puede encontrar (prominentemente) en los índices de BIG G.

Debido a esto, Google Engineers dedicó cantidades significativas de esfuerzo para diseñar sistemas y soluciones anti-BOT. Se ponen a disposición de terceros a través de un producto llamado recaptcha, que iremos juntos durante los siguientes pasos. Para más herramientas no relacionadas con los bots, vea nuestra Herramientas de diseño web correo.

Sin embargo, antes de comenzar, se deben limpiar algunas cosas básicas. En primer lugar: mantener los bots fuera siempre un juego del lado del servidor. Inspección de los valores de retorno de su medida anti-bot en el cliente es idiota. Un atacante puede analizar el código fuente o simplemente trabajar alrededor de él al parchear la validación de retorno.

Solardeceriamente, tenga en cuenta que no todos los bots son creados iguales. El bloqueo de Googlebot, por ejemplo, lleva a su sitio web que no se está indexando más. Los problemas similares pueden ocurrir con otros bots específicos de la industria que a menudo son más buenos que los daños. Finalmente, los bots pueden ser un mal menor en algunos casos, cuando el tráfico es todo lo que necesita, un clic suyo hace clic en ser solo un clic.

  • 8 API asombrosas de Google (y cómo usarlas)

01. ¡Regístrese un go-go!

Stop the bots with Google reCAPTCHA: Sign-up a go-go!

[dieciséis] Usa tu cuenta de Google para iniciar sesión en ReCAPTCHA (Crédito de la imagen: Tam Hanna)

Google mantiene un ojo cercano en los usuarios de recaptcha. Cabeza aquí [sesenta y cinco] y use su cuenta de Google para iniciar sesión. Agregue "localhost" además de su dominio favorito en dominios. Elija el tipo de casilla de verificación "No soy un robot", ya que es la medida anti-Bot más conocida.

02. Tienda de llaves del sitio y del servidor

Google Rewards Persistence en trabajar a través del proceso de configuración Al mostrar un servidor y una tecla de sitio. Si bien este último se puede compartir con terceros, asegúrese de que la clave secreta nunca abandone los confines de su entorno de servidor.

03. Entender la verificación del sitio

Google utiliza una variación del proceso de reto-respuesta para garantizar la integridad del resultado. Las instancias de CAPTCHA devuelven un valor criptográfico que el servidor es "Entregar" a un sistema de verificación alojado por BIG G, si los resultados resultan ser válidos, se devuelve una respuesta HTTP correcta a su lógica de back-end.

04. Configure express.js

Es importante demostrar una solución de llave de giro que muestre todo el flujo de autenticación. Debido a esto, debemos comenzar con un "servidor" de las clases: Express JS fue un tema frecuente recientemente, así que lo implementamos en un esqueleto de proyecto recién creado. 

 Tamhan @ Tamhan-ThinkPad: ~ / NODESPACE / NODERVERIFICA $
NPM Init --y
Escribió a /Home/Tamhan/NoDespace/Nodeverify/Package.json:
  . . .
Tamhan @ Tamhan-ThinkPad: ~ / NODESPACE / NODERVERIFICA $
NPM Instale la solicitud de Express Parser Body-Parser --AVE
. . .
+ [email protected]
+ [email protected]
+ [email protected]

05. Prepárese para servir

Cargando la casilla de verificación conocida "No soy un robot" requiere un archivo HTML. Dado que esta es una muestra que demuestra el flujo de interacción, comienza con un documento estático que contiene el marcado que se muestra acompañando este paso. 

 & lt; html & gt;
& lt; cabeza y gt;
& lt; title & gt; reaptcha demo: página simple
& lt; / title & gt;
& lt; script src = "https://www.google.com/recaptcha/api.js" Async defer & gt; / lt; / script & gt;
& lt; / cabeza y gt;
& lt; cuerpo y gt;
& lt; formando acción = "?" Método = "POST" y GT;
& lt; div class = "g-recaptcha" data-siteykey = "your_site_key" & gt; / div & gt; / div & gt;
& lt; br / & gt;
& lt; Entrada Type = "Enviar" valor = "Enviar" & gt;
& lt; / FORK & GT;
& lt; / body & gt;
& lt; / html & gt;

06. Entender y probar

Stop the bots with Google reCAPTCHA: Understand and test

[dieciséis] Ejecute el código para ver estos resultados. (Crédito de la imagen: Tam Hanna)

Google proporciona un archivo API que contiene la lógica CAPTCHA. Cuando API.JS está cargado, el código contenido en él analiza el DOM y reemplaza cualquier & lt; div & gt; Etiquetas que contienen la etiqueta de clase correcta. & lt; someter & gt; Las etiquetas se dejan solas a partir de esta escritura. De cualquier manera, ejecute el código en un navegador elegido para ver los resultados que se muestran arriba.

07. Cargar algunos elementos

Crear una cadena de entrega en Express.js requiere un poco de inteligencia. Un ayudante realmente útil es el bodyparser. Cuando se incorpore en un flujo de trabajo de representación, se puede acceder a los campos individuales del servidor utilizando patrones de diseño orientados a objetos que simplifican enormemente los manejarlos. 

 Var Express = Requerir ("Express");
var bodyparser = requieren ("parsero del cuerpo");
VAR Solicitud = Requerir ("Solicitud");

var myapp = expreso ();

myApp.use (bodyparser.json ());
myApp.use (bodyparser.urlencoded ({extendido: true}));

08. Prepárese para verificar ...

La casilla de verificación de Google hace su magia en el fondo, cuando se hace, se llama un nuevo campo g-recaptcha-respuesta Se agrega a los atributos del formulario. Estos datos deben enviarse a los servidores de Google para verificación. La larga cadena en el código que acompaña a este paso se reemplazará con el One Google asignado a usted. 

 MyApp.post ("/ Tamstest", Función (Solicitud, Respuesta) {
var recaptcha_url = "https://www.google.com/recaptcha/api/siteverify?";
recaptcha_url + = "Secret = 6lewmzgaaaaairsb2gv5akkx2cwyfulkzrmd7ws & amp;";
recaptcha_url + = "respuesta =" + solicitud.body ["g-recaptcha-respuesta"] + "& amp;";
recaptcha_url + = "remodel =" + solicitudes.connection.remoteaddress;

09. ... y pregunte en los servidores de Google.

La siguiente ley implica disparar la URL al servidor. Esto se logra a través de una solicitud de JSON tradicional basada en la dirección creada en el paso anterior. Luego, se analizan los resultados, si se lanza un error, se devolverá una falla a la aplicación del lado del cliente. 

 Solicitud (recaptcha_url, función (error,
resp, cuerpo) {
cuerpo = JSON.Parse (cuerpo);
Si (body.success! == indefinido y amp; & amp;! Cuerpo.
éxito) {
Respuesta de retorno. SEND ({"MENSAJE":
"Falló la validación de CAPTCHA"});
}
Respuesta.HEADER ("TIPO DE CONTENIDO",
"Aplicación / JSON"). Enviar (cuerpo);
});
});

10. Ponlo suelto

El servidor HTTP de Express.js debe desatarse. Esto se logra mejor utilizando la aplicación APP. LISTEN. Tenga en cuenta que los puertos con un número que es más pequeño que 1024 están restringidos al usuario raíz en sistemas operativos unixoides: 3000 es, por lo tanto, una apuesta segura. 

 VAR Server = MyApp.Listen (3000, función () {
console.log ("escuchar en" + servidor.
Dirección (). Puerto);
});

11. Ajusta el formulario.

Finalmente, nuestro formulario debe ponerse en contacto con el servidor local que se ejecuta dentro de Node.js. Esto se logra mejor al ajustar la cadena de acción, asegúrese de apuntar al destino a un dominio válido, especialmente si no utiliza un servidor local express.js. 

 & lt; Body & GT;
& lt; forman acción = "http: // localhost: 3000 / Tamstest" Method = "Post" & GT;
& lt; div class = "g-recaptcha" data-siteyy = "6lewmzguaaaaepswpvp6hlulnjxa_scwtwhyhge" & gt; / div & gt; / div & gt;
& lt; br / & gt;

12. ¡TRIGUELO!

Stop the bots with Google reCAPTCHA: Bring it up!

[dieciséis] Use el servidor HTTP rápido de Python para probar el sistema cliente-servidor (Crédito de la imagen: Tam Hanna)

Pruebas de nuestro sistema cliente-servidor requiere dos servidores debido a la verificación de origen de Google. Afortunadamente, Python proporciona un servidor HTTP rápido: úselo para proporcionar index.htm, mientras que Express.js se alistará para realizar la verificación de la respuesta devuelta. 

 Tamhan @ Tamhan-ThinkPad: ~ / NODESPACE / NODERVERIFICA $
Nodo index.js
Escuchando en 3000
Tamhan @ Tamhan-ThinkPad: ~ / NODESPACE / NODERVERIFICA $
Python3 -m http.server
Sirviendo HTTP en 0.0.0.0 Port 8000 ...

13. Realizar una carrera seca

Stop the bots with Google reCAPTCHA: Perform a dry run

[dieciséis] Dale a tu CAPTCHA una prueba de prueba (Crédito de la imagen: Tam Hanna)

Cuando se ejecuta, marque la casilla de verificación y cumpla con los desafíos que Big G podría lanzarle. El servidor generalmente no exige mucho en términos de verificación, y procede a mostrar los contenidos que se muestran arriba.

14. Desactivar el botón Enviar

Stop the bots with Google reCAPTCHA: Disable the submit button

[dieciséis] Deshabilitar el botón Enviar en StartUp es bueno para la facilidad de uso (Crédito de la imagen: Tam Hanna)

Los ejemplos de Google ignoran el botón de envío del lado del cliente, ya que un atacante siempre puede hacer que reaparezca con un poco de javascript. Al deshabilitar la perilla de envío en relación con el CAPTCHA, no mejora la seguridad, tiene efectos positivos sobre la facilidad de uso. Comencemos a partir de deshabilitar el botón después de la puesta en marcha. 

 & lt; forman acción = "http: // localhost: 3000 / Tamstest" Method = "Post" & GT;
& lt; div class = "g-recaptcha" data-siteyy = "6lewmzguaaaaepswpvp6hlulnjxa_scwtwhyhge" & gt; / div & gt; / div & gt;
& lt; br / & gt;
& lt; Entrada Tipo = "Enviar" valor = "Enviar" Discapacitado y GT;
& lt; / FORK & GT;

15. Manejar eventos CAPTCHA

Stop the bots with Google reCAPTCHA: Handle CAPTCHA events

[dieciséis] Ahora agrega un manejador de eventos (Crédito de la imagen: Tam Hanna)

Siguiente, se debe agregar un manejador de eventos. La API CAPTCHA de Google lo invocará cada vez que el usuario pasara un intento de verificación de su punto de vista del lado del cliente. 

 & lt; html & gt;
& lt; cabeza y gt; . . .
& lt; script & gt;
Función ONDCFired (valor) {
console.log (valor);
}
& lt; / script & gt;
& lt; / cabeza y gt;
& lt; cuerpo y gt;
& lt; forman acción = "http: // localhost: 3000 /
Tamstest "Method =" Post "& GT;
& lt; div class = "g-recaptcha" data-siteykey = "6lewmzgaaaaaepswpvp6hlulnjxa_scwtwhyhge" Data-Callback =
"OndCfired" & GT; & Lt; / DIV & GT;

16. Excursión: Representación Dinámica CAPTCHA

Google no limita los desarrolladores a los elementos de recapacidad de desove durante la carga de la página. los hacer() El método encontrado en la API de reCAPTCHA le permite designar uno o más & lt; div & gt; Etiquetas en el sitio web que se transformarán en widgets de recaptcha. 

 var mycallback = Función (Val) {consola.
log (val); };
grecaptcha.render (
document.getlementsbyid ('My-ID'),
{
devolución de llamada: mycallback,
LEARKEY: MYSITEKEY
});

17. Habilitar botón si es necesario ...

Con eso, se mantiene un problema principal. El botón de envío debe volver a habilitar cuando el evento de clic proporcionado por ReCAPTCHA llega a nuestro código de solicitud. Cargar jQuery en un ejemplo tan simple es innecesario, así que retrocede a un poco de javascript simple. 

 & lt; script & gt;
Función ONDCFired (valor) {
document.getelementbyid
("Botón"). Deshabilitado = falso;
}
& lt; / script & gt; 
 & lt; type = "enviar" id = "botón"
valor = "Enviar" Discapacitado y GT;

18. ... y limpiar después de nosotros

Google no puede almacenar datos de respuesta a los desafíos para siempre. Debido a eso, los tiempos de verificación fuera bastante rápidos, de forma predeterminada, nuestro programa no se encuentra sobre eso. Afortunadamente, la API contiene un campo adicional que se puede usar para notificar. 

 Función ONDCEXPired (valor) {
document.getelementbyid ("botón").
discapacitado = verdadero;
} 
 & lt; DIV clase = "G-recaptcha" Data-Siteykey = "6lewmzguaaaaeepswpvp6hlulnjxa_scwtwhyhge"
data-callback = "ONDCFired" caducado por datos-callback = "ondcexpired" & gt; & lt; / div & gt;

19. Use atributos adicionales.

Stop the bots with Google reCAPTCHA: Handle CAPTCHA events

[dieciséis] Hay muchas propiedades útiles para jugar. (Crédito de la imagen: Tam Hanna)

Cabeza aquí [sesenta y cinco] Para encontrar una lista de propiedades incluidas en la API de JavaScript. ¡Le permiten ajustar varios comportamientos, por ejemplo, el widget reCAPTCHA también se puede representar en un esquema de colores fáciles de noche!

20. Trabaja de forma transparente ...

Google presentó recientemente una tercera versión de la API de ReCAPTCHA, que no requiere una interacción con el usuario explícito. En su lugar, simplemente lo carga durante la inicialización de la página: el código supervisa automáticamente el comportamiento del usuario que se ejecuta Wild en el sitio web. 

 & lt; script src = "https://www.google.com/recaptcha/api.js?render=recaptcha_site_key" & gt; & lt; / script & gt;
& lt; script & gt;
grecaptcha.ready (función () {
grecaptcha.execute ('recaptcha_site_key',
{Acción: 'Página de inicio'}).
entonces (función (token) {
...
});
});
& lt; / script & gt;

21. ... y proporcionar información adicional.

Los beneficios complementarios de datos adicionales sobre la acción que se realiza en el sitio web. El fragmento que acompaña a este paso anunciará que el usuario visite actualmente su página de inicio. Se puede encontrar más información sobre la API en la documentación. 

 & lt; script & gt;
grecaptcha.ready (función () {
grecaptcha.execute ('recaptcha_site_key',
{acción: 'Página de inicio'});
});
& lt; / script & gt;

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

[dieciséis] (Crédito de la imagen: Futuro)
[sesenta y cinco]

Únase a nosotros en Rich Mix, Shoreditch el 26 de septiembre para generar CSS, una conferencia a medida para los diseñadores web que le presentan el diseño creativo de Bloq, Net y Web. Reserve su boleto de avión antes del 15 de agosto en www.generateconf.com [sesenta y cinco] .

Este artículo se publicó originalmente en número 287 de la revista Creative Web Design Design Diseñador web . Comprar emito 287 aquí [sesenta y cinco] o Suscríbete al diseñador web aquí [sesenta y cinco] .

Artículos relacionados:

  • 8 secretos de seguridad de WordPress esenciales
  • Cómo Codepen se hizo seguro
  • 9 consejos de seguridad para proteger su sitio web de los piratas informáticos

Cómo - Artículos más populares

Cómo estructurar las consultas de los medios en SASS

Cómo Sep 12, 2025

[dieciséis] En prácticamente, cada sitio ahora está construido con al menos un diseño web receptivo. La forma en que estructuramos ..

Start Start reacciona nativo con la expo

Cómo Sep 12, 2025

[dieciséis] Reaccionar nativo es una plataforma que le permite construir aplicaciones móviles nativas usando JavaScript. Com..

Cómo crear obras de arte de juego estilizado

Cómo Sep 12, 2025

[dieciséis] El estilo de arte del videojuego de supervivencia en primera persona. Oscuro oscuro Puede ser engañosamente di..

Crea arte de retratos en Corel Painter

Cómo Sep 12, 2025

Página 1 de 2: Página 1 Página 1 Página 2 Este taller le presen..

Cómo funciona los ajustes en aplicaciones 3D

Cómo Sep 12, 2025

[dieciséis] Una de las cosas clave que trabajan en CGI debe proporcionar es mayor precisión. Sin embargo, es sorprendente lo difícil..

Cómo mezclar una paleta de gouache

Cómo Sep 12, 2025

[dieciséis] Gouache es más indulgente que la pintura de acuarela, pero las decisiones que hagas temprano todavía pueden afectar el r..

Crea una escena de la ciudad ocupada en Illustrator

Cómo Sep 12, 2025

[dieciséis] La mejor ciudad es una ciudad ocupada, pero ese ambiente ocupado no es una cosa fácil de capturar con éxito. Sin embargo..

Cómo hacer una plataforma de cinta flexible

Cómo Sep 12, 2025

[dieciséis] Las plataformas de cinta son bastante comunes en Arte 3d Plataformas de producción en estos días. Tienen un c..

Categorías