Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

A medida que las aplicaciones web y móviles se han vuelto más populares, también lo ha hecho el riesgo de spam y otras actividades maliciosas. Los CAPTCHA pueden ser una medida de seguridad útil que vale la pena integrar para prevenir este tipo de amenazas a la seguridad.

Un CAPTCHA es una función de seguridad mínima, comúnmente integrada con formularios web para evitar ataques automatizados de spambots. Garantiza que el usuario que accede a una aplicación es realmente humano y no un bot que ejecuta código malicioso.

¿Qué es CAPTCHA?

El acrónimo CAPTCHA significa Prueba de Turing Pública Completamente Automatizada para distinguir a las Computadoras de los Humanos. Se refiere a una prueba generada por computadora que verifica si un usuario en particular que interactúa con su aplicación es un ser humano y no un bot.

Hay diferentes tipos de pruebas de CAPTCHA que puede integrar en su aplicación, como CAPTCHA basadas en texto y audio. Sin embargo, el tipo más popular y efectivo es Google reCAPTCHA. Comprueba para distinguir entre usuarios reales y bots utilizando algoritmos avanzados de análisis de riesgos.

instagram viewer

Google reCAPTCHA viene en dos versiones:

  • reCAPTCHA V3: esta versión se ejecuta en segundo plano y determina una puntuación general basada en el comportamiento del usuario.
  • reCAPTCHA V2: esta versión coloca la casilla de verificación "No soy un robot" en el formulario de autenticación.

Esta guía explorará Google reCAPTCHA V2. Siga leyendo para aprender cómo integrarlo en una aplicación React.

Registre la aplicación React en la Consola de administración de reCAPTCHA

Para comenzar, debe registrar su aplicación en la consola para desarrolladores de reCAPTCHA. Dirigirse a Consola de administración reCAPTCHA de Google, inicie sesión con su cuenta de Google y complete los detalles del formulario requerido.

Proporcione el nombre de la etiqueta, seleccione reCAPTCHA V2, y en el cuadro desplegable, elija las solicitudes de verificación utilizando la opción de casilla de verificación "No soy un robot". Por último, proporcione el nombre de dominio de su aplicación. Para el desarrollo local, escriba servidor local como el nombre de dominio.

Una vez que haya registrado su aplicación, el sitio lo redirigirá a una nueva página con su secreto generado y las claves del sitio.

Crear un cliente React

Este proyecto es doble: creará un cliente React que presenta un formulario de inicio de sesión simple con Google reCAPTCHA y un Express backend que realiza solicitudes POST a la API de reCAPTCHA para verificar el token generado después de que un usuario completa el reCAPTCHA desafío.

Cree una carpeta de proyecto localmente para albergar sus archivos de proyecto. Próximo, crear la aplicación React y cambie el directorio actual al del cliente. En el directorio raíz de la carpeta de su cliente, cree un archivo .env para almacenar la clave secreta de la API y la clave del sitio.

REACT_APP_reCAPTCHA_SITE_KEY = 'clave del sitio'
REACT_APP_reCAPTCHA_SECRET_KEY = 'llave secreta'

Puedes encontrar el código de este proyecto en su repositorio GitHub.

Instale los paquetes necesarios

Instale Axios, usará esta biblioteca para realizar solicitudes HTTP desde el navegador y React-Google-reCAPTCHA. Este paquete proporciona una implementación específica de React para la API reCAPTCHA.

npm install reaccionar-recaptcha-google axios --save

Integre Google reCAPTCHA en la aplicación React

Abre el archivo src/App.js, elimine el código estándar de React y agregue el siguiente código:

Este componente generará un formulario de inicio de sesión simple que incluye el widget Google reCAPTCHA.

Primero, importe los paquetes React, Axios y react-google-recaptcha:

importar Reaccionar, { estado de uso, referencia de uso } de'reaccionar';
importar Axios de'axíos';
importar ReCAPTCHA de'reaccionar-google-recaptcha';

Luego defina tres variables de estado: SuccessMsg, ErrorMsg y ValidToken. Su código actualizará estos estados al enviar correctamente el formulario y validar reCAPTCHA. Además, obtenga el sitio y las claves secretas del archivo ENV.

funciónaplicación() {
constante [SuccessMsg, setSuccessMsg] = useState("")
constante [ErrorMsg, setErrorMsg] = useState("")
constante [valid_token, setValidToken] = useState([]);
constante SITE_KEY = proceso.env. REACT_APP_reCAPTCHA_SITE_KEY;
constante SECRET_KEY = proceso.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Defina un enlace useRef que haga referencia al componente reCAPTCHA, para capturar el token generado después de que un usuario complete los desafíos de reCAPTCHA.

constante captchaRef = useRef(nulo);

Luego, cree una función handleSubmit para llamar cuando un usuario envíe el formulario de inicio de sesión. Esta función obtiene el token del componente reCAPTCHA y luego llama al reiniciar método para restablecer el reCAPTCHA para permitir comprobaciones posteriores.

Además, comprueba si existe el token y llama a la función verificarToken para verificar el token. Una vez que haya verificado el token, actualizará el estado de validToken con los datos de respuesta de la API.

constante manejarEnviar = asíncrono (e) => {
 e.preventDefault();
dejar token = captchaRef.current.getValue();
 captchaRef.actual.reset();
si (ficha) {
dejar vale_token = esperar verificarToken (token);
 setValidToken (valid_token);
si (ficha_valida[0].éxito verdadero) {
consola.registro("verificado");
 establecerMensajeÉxito("¡¡Viva!! ha enviado el formulario")
 } demás {
consola.registro("No verificado");
 establecerMensajeError(" ¡¡Lo siento!! Verifica que no eres un bot")
 }
 }
 }

Finalmente, defina la función verificarToken que enviará una solicitud POST a un extremo del servidor Express usando Axios, pasando el token reCAPTCHA y la clave secreta en el cuerpo de la solicitud. Si la solicitud es exitosa, envía los datos de respuesta a la matriz APIResponse y devuelve la matriz como resultado.

constante verificarToken = asíncrono (ficha) => {
dejar Respuesta API = [];
intentar {
dejar respuesta = esperar Axios.post(` http://localhost: 8000/verificar-token`, {
 reCAPTCHA_TOKEN: token,
 Clave_secreta: CLAVE_SECRETA,
 });
 APIResponse.push (respuesta['datos']);
devolver Respuesta API;
 } atrapar (error) {
consola.log (error);
 }
 };

Por último, devuelva un formulario con el componente reCAPTCHA. Este componente toma el enlace de referencia y la clave del sitio como accesorios para configurar y mostrar el widget reCAPTCHA.

Cuando un usuario envía el formulario, el componente muestra un mensaje de éxito o error basado en el valor del estado validToken. Si el token de reCAPTCHA es válido, lo que significa que un usuario completó con éxito los desafíos de reCAPTCHA, muestra el mensaje de éxito; de lo contrario, muestra el mensaje de error.

devolver (
"Aplicación">
"Encabezado de la aplicación"> 
"formulario de inicio de sesión">


 {valid_token.longitud > 0 && token_valido[0].éxito verdadero
? <h3nombre de la clase="textoÉxito">{Mensaje de éxito}h3>
: <h3nombre de la clase="error de texto">{Mensaje de error} h3>}


Nombre de usuario</p>
"texto" marcador de posición ="Nombre de usuario..." />




Contraseña</p>
"contraseña" marcador de posición = "Contraseña..." />


 nombreclase="recaptcha"
 clave del sitio = {SITE_KEY}
 ref={captchaRef}
 />








exportarpor defecto aplicación

Finalmente, ejecute el servidor de desarrollo y diríjase a su navegador de http://localhost: 3000 para ver los resultados.

Crear el backend rápido

Para comenzar, en el directorio raíz de toda la carpeta del proyecto, crear un servidor web Express, e instalar estos paquetes:

npm install express cors axios analizador de cuerpo

Configurar el servidor Express

A continuación, abra el archivo index.js en la carpeta del proyecto del servidor y agregue este código:

constante expresar = requerir('expresar')
constante axios = requerir('axíos');
constante corazones = requerir('corazón');
constante aplicación = expreso();
constante analizador de cuerpo = requerir('analizador de cuerpo');
constante jsonParser = bodyParser.json();
constante PUERTO = proceso.env. PUERTO || 8000;


aplicación.uso (jsonParser);
app.use (cors());


aplicación.post("/verificar-token", asíncrono (requerido, res) => {
constante { reCAPTCHA_TOKEN, Secret_Key} = req.cuerpo;


intentar {
dejar respuesta = esperar axios.post(` https://www.google.com/recaptcha/api/siteverify? secreto=${Clave_secreta}&respuesta=${reCAPTCHA_TOKEN}`);
consola.log (respuesta.datos);


devolver res.status(200).json({
 éxito:verdadero,
 mensaje: "Token verificado con éxito",
 info_verificación: respuesta.datos
 });
 } atrapar(error) {
consola.log (error);


devolver res.status(500).json({
 éxito:FALSO,
 mensaje: "Error al verificar el token"
 })
 }
});
app.escuchar (PORT, () => consola.registro(`La aplicación se inició en el puerto ${PORT}`));

Este código hace lo siguiente:

  • El servidor define una ruta Post que realiza una solicitud HTTP POST asíncrona a la API reCAPTCHA de Google para verifique el token reCAPTCHA usando Axios, pasando la clave secreta para la autenticación en la URL de solicitud.
  • Si el token reCAPTCHA se verifica con éxito, el servidor responde con un objeto JSON que contiene una propiedad de "éxito" establecida en verdadero, una propiedad de "mensaje". que indica que el token se verificó con éxito, y una propiedad "verification_info" que contiene información sobre la respuesta de verificación de Google API.
  • Si ocurre un error durante el proceso de verificación, el servidor responde con un objeto JSON que contiene un propiedad "éxito" establecida en falso y una propiedad "mensaje" que indica que hubo un error al verificar el simbólico.

Finalmente, ejecute el servidor de nodos y pruebe la funcionalidad de la función reCAPTCHA.

nodo index.js

¿Pueden los reCAPTCHA garantizar la seguridad contra los spambots?

Según Google, su servicio reCAPTCHA tiene una tasa de éxito de más del 99 %, lo que significa que solo un pequeño porcentaje del spam puede eludir la función de seguridad reCAPTCHA.

reCAPTCHA no es infalible, ya que los malhechores determinados aún pueden encontrar soluciones alternativas. Pero sigue siendo una herramienta esencial que puede reducir significativamente el riesgo de spambots.