{"id":27693,"date":"2021-05-22T11:48:00","date_gmt":"2021-05-22T08:48:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27693"},"modified":"2021-10-18T04:10:21","modified_gmt":"2021-10-18T01:10:21","slug":"valide-o-google-recaptcha-usando-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/valide-o-google-recaptcha-usando-javascript\/","title":{"rendered":"Valide o Google reCAPTCHA usando JavaScript"},"content":{"rendered":"

O reCAPTCHA do Google \u00e9 uma escolha popular para proteger os formul\u00e1rios do site contra spam e bots. O reCAPTCHA pede aos usu\u00e1rios que resolvam quebra-cabe\u00e7as simples que s\u00e3o f\u00e1ceis para humanos, mas dif\u00edceis para bots. Como resultado, pode-se economizar espa\u00e7o no servidor inserindo registros de spam desnecess\u00e1rios no banco de dados. Isso tamb\u00e9m nos economiza tempo, pois nunca recebemos coment\u00e1rios de spam em nossa caixa de correio.<\/p>\n

Quando adicionamos um reCAPTCHA do Google aos formul\u00e1rios do site, precisamos escrever um c\u00f3digo para validar a resposta do reCAPTCHA. Se uma resposta for v\u00e1lida, apenas o nosso formul\u00e1rio deve prosseguir.<\/p>\n

Existem 2 maneiras de validar a resposta, uma \u00e9 do lado do servidor e a outra \u00e9 do lado do cliente. Neste artigo, nos concentramos na valida\u00e7\u00e3o do lado do cliente e, portanto, estudamos como validar o reCAPTCHA do Google usando JavaScript.<\/p>\n

Se voc\u00ea estiver procurando por valida\u00e7\u00e3o do lado do servidor, consulte o artigo Usando o Google reCAPTCHA em formul\u00e1rios do seu site com PHP<\/a>.<\/p>\n

Registre o site e obtenha chaves de API<\/h3>\n

Para come\u00e7ar, voc\u00ea precisa registrar seu site aqui – <\/a>https:\/\/www.google.com\/recaptcha\/admin<\/a>.<\/p>\n

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

Escolha a op\u00e7\u00e3o ‘reCAPTCHA v2’ que fornece uma caixa de sele\u00e7\u00e3o “Eu n\u00e3o sou um rob\u00f4".<\/p>\n

Depois de inserir os detalhes no formul\u00e1rio acima, voc\u00ea obter\u00e1 a chave do site e a chave secreta. Como estamos lidando com a valida\u00e7\u00e3o do lado do cliente, precisamos apenas de uma chave de site.<\/p>\n

Se voc\u00ea quiser test\u00e1-lo em um servidor local, adicione ‘localhost’ como um dom\u00ednio.<\/p>\n

Valide o Google reCAPTCHA usando JavaScript<\/h3>\n

Primeiro, voc\u00ea precisa adicionar o Google reCAPTCHA ao seu formul\u00e1rio. Voc\u00ea pode fazer isso usando o c\u00f3digo abaixo.<\/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
No c\u00f3digo acima, estou usando o onsubmit<\/code>evento. Isso ocorre porque, quando o usu\u00e1rio envia um formul\u00e1rio, precisamos verificar a resposta do reCAPTCHA e permitir que ele envie um formul\u00e1rio.<\/p>\n
Em seguida, adicionei ‘verifyCaptcha’ como nome de uma fun\u00e7\u00e3o de retorno de chamada ao atributo ‘retorno de chamada de dados’. Usarei esse m\u00e9todo de retorno de chamada para remover a mensagem de erro assim que a valida\u00e7\u00e3o for aprovada. Tamb\u00e9m adicionei um div com um id ‘g-recaptcha-error’ para exibir a mensagem de erro.<\/p>\n
Voc\u00ea deve substituir o espa\u00e7o reservado ‘YOUR_SITE_KEY’ pela chave real do seu site.<\/p>\n
Por fim, vamos escrever um c\u00f3digo JavaScript que manipule a resposta do reCAPTCHA. E com base na resposta, ele mostra uma mensagem de erro ou permite que o formul\u00e1rio prossiga.<\/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
No m\u00e9todo submitUserForm<\/code>, obtemos a resposta reCAPTCHA usando grecaptcha.getResponse()<\/code>. Esta \u00e9 uma fun\u00e7\u00e3o integrada fornecida pelo servi\u00e7o Google reCAPTCHA.<\/p>\n
Se a resposta for inv\u00e1lida, ele retornar\u00e1 0. Isso significa que um usu\u00e1rio ainda n\u00e3o validou o reCAPTCHA. E ent\u00e3o, ele lan\u00e7a um erro e anexa ao div que tem id ‘g-recaptcha-error’.<\/p>\n
Quando o Google reCAPTCHA envia uma resposta v\u00e1lida, estou retornando um valor verdadeiro, o que permite que o formul\u00e1rio prossiga.<\/p>\n
O verifyCaptcha<\/code>m\u00e9todo recebe uma chamada quando voc\u00ea resolve todos os quebra-cabe\u00e7as do reCAPTCHA. Em seguida, removeremos a mensagem de erro assim que o quebra-cabe\u00e7a for resolvido.<\/p>\n
Nosso c\u00f3digo final \u00e9:<\/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 voc\u00ea entenda como validar o reCAPTCHA do Google usando JavaScript. Experimente em seu projeto e compartilhe suas id\u00e9ias ou sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n