✅ Noticias, temas, complementos de WEB y WordPress. Aquí compartimos consejos y las mejores soluciones para sitios web.

Validar Google reCAPTCHA usando JavaScript

2.004

Google reCAPTCHA es una opción popular para proteger los formularios de sitios web contra spam y bots. El reCAPTCHA pide a los usuarios que resuelvan acertijos simples que son fáciles para los humanos pero difíciles para los bots. Como resultado, uno puede evitar que el espacio de su servidor inserte registros de spam innecesarios en la base de datos. También nos ahorra tiempo ya que nunca recibimos comentarios de spam en nuestro buzón.

Cuando agregamos un reCAPTCHA de Google en formularios de sitios web, necesitamos escribir un fragmento de código para validar la respuesta de reCAPTCHA. Si una respuesta es válida, solo nuestro formulario debe continuar.

Hay 2 formas de validar la respuesta, una es del lado del servidor y la otra es del lado del cliente. En este artículo, nos enfocamos en la validación del lado del cliente y, por lo tanto, estudiamos cómo validar Google reCAPTCHA usando JavaScript.

Si está buscando una validación del lado del servidor, consulte el artículo Uso de reCAPTCHA de Google en los formularios de su sitio web con PHP.

Registre el sitio y obtenga claves API

Para comenzar, debe registrar su sitio aquí: https://www.google.com/recaptcha/admin.

Validar Google reCAPTCHA usando JavaScript

Elija la opción ‘reCAPTCHA v2’ que da una casilla de verificación "No soy un robot".

Una vez que haya ingresado los detalles en el formulario anterior, obtendrá la clave del sitio y la clave secreta. Como nos ocupamos de la validación del lado del cliente, solo necesitamos una clave de sitio.

Si desea probarlo en un servidor local, agregue ‘localhost’ como dominio.

Validar Google reCAPTCHA usando JavaScript

Primero, debe agregar Google reCAPTCHA en su formulario. Puedes hacerlo usando el siguiente código.

<form method="post" onsubmit="return submitUserForm();">
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="verifyCaptcha"></div>
    <div id="g-recaptcha-error"></div>
    <input type="submit" name="submit" value="Submit" />
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>

En el código anterior, estoy usando onsubmitevent. Esto se debe a que cuando el usuario envía un formulario, debemos verificar la respuesta de reCAPTCHA y luego permitirle que envíe un formulario.

Luego agregué un ‘verifyCaptcha’ como nombre de una función de devolución de llamada al atributo ‘data-callback’. Usaré este método de devolución de llamada para eliminar el mensaje de error una vez que se pase la validación. También agregué un div con un id ‘g-recaptcha-error’ para mostrar el mensaje de error.

Debe reemplazar el marcador de posición ‘YOUR_SITE_KEY’ con su clave de sitio real.

Finalmente, escribamos un código JavaScript que maneje la respuesta reCAPTCHA. Y según la respuesta, muestra un mensaje de error o permite que el formulario continúe.

<script>
function submitUserForm() {
    var response = grecaptcha.getResponse();
    if(response.length == 0) {
        document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
        return false;
    }
    return true;
}
 
function verifyCaptcha() {
    document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>

En el método submitUserFormobtenemos la respuesta reCAPTCHA usando grecaptcha.getResponse(). Esta es una función incorporada proporcionada por el servicio reCAPTCHA de Google.

Si la respuesta no es válida, devuelve 0. Significa que un usuario aún no ha validado reCAPTCHA. Y entonces, arroja un error y se agrega al div que tiene id ‘g-recaptcha-error’.

Cuando Google reCAPTCHA envía una respuesta válida, estoy devolviendo un valor verdadero, lo que permite que el formulario continúe.

El verifyCaptchamétodo recibe una llamada cuando resuelves todos los acertijos de reCAPTCHA. Luego, eliminamos el mensaje de error una vez que se resuelve un acertijo.

Nuestro código final es:

<form method="post" onsubmit="return submitUserForm();">
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="verifyCaptcha"></div>
    <div id="g-recaptcha-error"></div>
    <input type="submit" name="submit" value="Submit" />
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function submitUserForm() {
    var response = grecaptcha.getResponse();
    if(response.length == 0) {
        document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
        return false;
    }
    return true;
}
 
function verifyCaptcha() {
    document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>

Espero que comprenda cómo validar Google reCAPTCHA usando JavaScript. Pruébelo en su proyecto y comparta sus pensamientos o sugerencias en la sección de comentarios a continuación.

Artículos relacionados

Fuente de grabación: artisansweb.net

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More