En algunas aplicaciones va a ser necesario aplicar un control para evitar que robots diligencien nuestras base de datos de datos basura. Google ha creado ya hace un tiempo una herramienta que permite validar si una persona realmente esta usando nuestro sitio.
Vale aclarar que esta herramienta funciona siempre y tanto tengamos un sitio web activo y dispongamos del protocolo de seguridad ssl.
ingresamos a https://developers.google.com/recaptcha
Allí ingresamos a Comienza ahora.
Debemoa agregar nuestro sitio web para poder continuar con este proceso.
En esta parte google recaptcha nos regalara una api key que nos permite usar esta herramienta. la tendremos en cuenta para implementarla en nuestro codigo.
Debes volver a tu proyecto, detener la ejecución de npm start y en la consola instalar el componente de react-google-captcha.
En nuestro componente lo importamos como Recaptcha.
Creamos una constante y le asignamos el valor de la apiKey obtenido en el sitio de google recaptcha.
Agregamos la etiqueta del componente y en ella enviamos un props con el nombre sitekey, alli asigamos la constante apikey.
Al recargar nuestro sitio, podemos ver como nuestro formulario dispones del recaptcha.
En esta caso nos arroja el mensaje «El host local no esta en la lista….. Eso es porque google, realiza la validación de nuestro sitio registrado y esta opción solo funciona con nuestro sitio en producción.
Como logramos ver…ya dispone del captcha nuestro formulario de nuestro sitio.
Con este pequeño ejemplo podemos realizar el vinculo de recaptcha a nuestro formulario con react js.
Si te gustó este contenido puedes seguirnos en nuestras redes sociales.
