Añadir captcha reCAPTCHA Google a React

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos validar un formulario, incluyendo un reCAPTCHA para evitar ataques de spam por BOTS.

Lo primero que tenemos que hacer es registrar nuestro código de reCAPTCHA en Google: https://www.google.com/recaptcha/about/

Y pulsamos en v3 Admin Console

Le damos a crear una nueva en el botón del más (+) y en este caso vamos a elegir V2 invisible:

Google tiene una técnica para verificar captcha de forma invisible utilizando los movimientos de ratón.

Añadimos los dominios o dominio dónde funcionará el recaptcha.

Una vez registrado copiamos la clave y la pegamos en un archivo llamado GoogleUtils.tsx

export const GoogleReCaptchaSiteKey = "fsadfasdcdsafretrefrewf"

*Pon tu clave.

Ahora instalamos la librería que utilizaremos para generar este recaptcha, react-google-recaptcha

npm install --save react-google-recaptcha

Y si usamos TypeScript añadimos

npm i --save-dev @types/react-google-recaptcha

Ahora creamos un componente llamado Captcha.tsx

import React from 'react';
import ReCAPTCHA from "react-google-recaptcha";
import { GoogleReCaptchaSiteKey } from '@/util/BaseURL';

interface Props {
captchaRef: any;
onChange?: (token: string | null) => void;
}

function Captcha({ captchaRef, onChange }: Props) {
    return (
        <ReCAPTCHA
            sitekey={GoogleReCaptchaSiteKey}
            size="invisible"
            ref={captchaRef}
            onChange={onChange}
        />
    );
}

export default Captcha;

Y lo llamamos de la siguiente forma:

• Creamos los métodos necesarios para ejecutar:

  const captchaRef = useRef<any>(null);
  const [tokenCaptcha, setTokenCaptcha] = useState<string | null>(null);

  //Para iniciar sesion
  useEffect(() => {
     alert('TOKEN Captcha: ' + tokenCaptcha);
    //iniciarSesion();
  }, [tokenCaptcha])

  function comprobarCaptcha() {
    captchaRef.current.execute();
  }

• Añadimos el captcha al formulario:

  <CaptchaRecaptcha captchaRef={captchaRef} onChange={(token) => { setTokenCaptcha(token) }} /> 

Y en el botón añadimos la funcion de comprobarCaptcha en vez de enviar formulario:

                <Boton startIcon={<Login />} fullWidth texto={t("contenido:login.iniciar_sesion")} onClick={comprobarCaptcha} />

Si usamos un form con submit hacemos esto:

 <form onSubmit={() => { comprobarCaptcha() }}>

Otra forma de obtener el token es de forma asíncrona, este método lo recomiendo, para ello:

  const captchaRef = useRef<any>(null);

//Con esta línea podemos lanzar el captcha y obtendremos un promise con el valor del token
  const tokenReCaptha = await captchaRef.current.executeAsync();
//después se reincia para que pueda estar disponible de nuevo
  captchaRef.current.reset();

Este método podemos añadirlo en nuestra función de login o registro y permitirá lanzar el captcha una vez invocada. Esperará a que se resuelva y devolverá una promesa con el valor del token.

Recuerda que solo se puede probar en la URL que has indicado en los pasos anteriores, en local no va a validar. Puede tardar unas horas en funcionar, ya que Google verifica la URL.

Y ahora solo nos quedaría enviar el token generado del catpcha al servidor y validarlo.