Integre Google reCAPTCHA en una aplicación React

Integre Google reCAPTCHA en una aplicación React
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.





cómo juntar 2 fotos en iphone

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.

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.

el teléfono android no se conecta a la pc

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.





wifi conectado pero sin acceso a internet windows 7

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.

 Configuración de Google reCAPTCHA

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.





 Claves reCAPTCHA

Crear un cliente React

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

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 = 'site key' 
REACT_APP_reCAPTCHA_SECRET_KEY = 'secret key'