{"id":28183,"date":"2021-05-22T11:27:00","date_gmt":"2021-05-22T08:27:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28183"},"modified":"2021-10-17T16:51:15","modified_gmt":"2021-10-17T13:51:15","slug":"validar-google-recaptcha-usando-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/validar-google-recaptcha-usando-javascript\/","title":{"rendered":"Validar Google reCAPTCHA usando JavaScript"},"content":{"rendered":"

Google reCAPTCHA es una opci\u00f3n 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\u00e1ciles para los humanos pero dif\u00edciles 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\u00e9n nos ahorra tiempo ya que nunca recibimos comentarios de spam en nuestro buz\u00f3n.<\/p>\n

Cuando agregamos un reCAPTCHA de Google en formularios de sitios web, necesitamos escribir un fragmento de c\u00f3digo para validar la respuesta de reCAPTCHA. Si una respuesta es v\u00e1lida, solo nuestro formulario debe continuar.<\/p>\n

Hay 2 formas de validar la respuesta, una es del lado del servidor y la otra es del lado del cliente. En este art\u00edculo, nos enfocamos en la validaci\u00f3n del lado del cliente y, por lo tanto, estudiamos c\u00f3mo validar Google reCAPTCHA usando JavaScript.<\/p>\n

Si est\u00e1 buscando una validaci\u00f3n del lado del servidor, consulte el art\u00edculo Uso de reCAPTCHA de Google en los formularios de su sitio web con PHP<\/a>.<\/p>\n

Registre el sitio y obtenga claves API<\/h3>\n

Para comenzar, debe registrar su sitio aqu\u00ed: <\/a>https:\/\/www.google.com\/recaptcha\/admin<\/a>.<\/p>\n

\"Validar<\/a><\/p>\n

Elija la opci\u00f3n ‘reCAPTCHA v2’ que da una casilla de verificaci\u00f3n "No soy un robot".<\/p>\n

Una vez que haya ingresado los detalles en el formulario anterior, obtendr\u00e1 la clave del sitio y la clave secreta. Como nos ocupamos de la validaci\u00f3n del lado del cliente, solo necesitamos una clave de sitio.<\/p>\n

Si desea probarlo en un servidor local, agregue ‘localhost’ como dominio.<\/p>\n

Validar Google reCAPTCHA usando JavaScript<\/h3>\n

Primero, debe agregar Google reCAPTCHA en su formulario. Puedes hacerlo usando el siguiente c\u00f3digo.<\/p>\n

<form method=\"post\" onsubmit=\"return submitUserForm();\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"g-recaptcha\" data-sitekey=\"YOUR_SITE_KEY\" data-callback=\"verifyCaptcha\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<div id=\"g-recaptcha-error\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script><\/code><\/pre>\n
En el c\u00f3digo anterior, estoy usando onsubmit<\/code>event. Esto se debe a que cuando el usuario env\u00eda un formulario, debemos verificar la respuesta de reCAPTCHA y luego permitirle que env\u00ede un formulario.<\/p>\n
Luego agregu\u00e9 un ‘verifyCaptcha’ como nombre de una funci\u00f3n de devoluci\u00f3n de llamada al atributo ‘data-callback’. Usar\u00e9 este m\u00e9todo de devoluci\u00f3n de llamada para eliminar el mensaje de error una vez que se pase la validaci\u00f3n. Tambi\u00e9n agregu\u00e9 un div con un id ‘g-recaptcha-error’ para mostrar el mensaje de error.<\/p>\n
Debe reemplazar el marcador de posici\u00f3n ‘YOUR_SITE_KEY’ con su clave de sitio real.<\/p>\n
Finalmente, escribamos un c\u00f3digo JavaScript que maneje la respuesta reCAPTCHA. Y seg\u00fan la respuesta, muestra un mensaje de error o permite que el formulario contin\u00fae.<\/p>\n
<script>\nfunction submitUserForm() {\n\u00a0\u00a0\u00a0\u00a0var response = grecaptcha.getResponse();\n\u00a0\u00a0\u00a0\u00a0if(response.length == 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '<span style=\"color:red;\">This field is required.<\/span>';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return true;\n}\n\u00a0\nfunction verifyCaptcha() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '';\n}\n<\/script><\/code><\/pre>\n
En el m\u00e9todo submitUserForm<\/code>obtenemos la respuesta reCAPTCHA usando grecaptcha.getResponse()<\/code>. Esta es una funci\u00f3n incorporada proporcionada por el servicio reCAPTCHA de Google.<\/p>\n
Si la respuesta no es v\u00e1lida, devuelve 0. Significa que un usuario a\u00fan no ha validado reCAPTCHA. Y entonces, arroja un error y se agrega al div que tiene id ‘g-recaptcha-error’.<\/p>\n
Cuando Google reCAPTCHA env\u00eda una respuesta v\u00e1lida, estoy devolviendo un valor verdadero, lo que permite que el formulario contin\u00fae.<\/p>\n
El verifyCaptcha<\/code>m\u00e9todo recibe una llamada cuando resuelves todos los acertijos de reCAPTCHA. Luego, eliminamos el mensaje de error una vez que se resuelve un acertijo.<\/p>\n
Nuestro c\u00f3digo final es:<\/p>\n
<form method=\"post\" onsubmit=\"return submitUserForm();\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"g-recaptcha\" data-sitekey=\"YOUR_SITE_KEY\" data-callback=\"verifyCaptcha\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<div id=\"g-recaptcha-error\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script>\n<script>\nfunction submitUserForm() {\n\u00a0\u00a0\u00a0\u00a0var response = grecaptcha.getResponse();\n\u00a0\u00a0\u00a0\u00a0if(response.length == 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '<span style=\"color:red;\">This field is required.<\/span>';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return true;\n}\n\u00a0\nfunction verifyCaptcha() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '';\n}\n<\/script><\/code><\/pre>\n
Espero que comprenda c\u00f3mo validar Google reCAPTCHA usando JavaScript. Pru\u00e9belo en su proyecto y comparta sus pensamientos o sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n