{"id":28303,"date":"2021-06-07T13:52:00","date_gmt":"2021-06-07T10:52:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28303"},"modified":"2021-10-18T04:03:46","modified_gmt":"2021-10-18T01:03:46","slug":"um-guia-para-adicionar-o-google-recaptcha-v3-ao-seu-site-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/um-guia-para-adicionar-o-google-recaptcha-v3-ao-seu-site-laravel\/","title":{"rendered":"Um guia para adicionar o Google reCAPTCHA v3 ao seu site Laravel"},"content":{"rendered":"

No passado, publiquei um artigo sobre como adicionar o Google reCAPTCHA aos formul\u00e1rios do Laravel<\/a>. O Google, ent\u00e3o, trouxe a pr\u00f3xima vers\u00e3o v3 do reCAPTCHA. Um de nossos leitores perguntou como integrar o reCAPTCHA v3 em um aplicativo Laravel.<\/p>\n

O reCAPTCHA v3 tem um comportamento ligeiramente diferente. Ao contr\u00e1rio da vers\u00e3o mais antiga do reCAPTCHA, voc\u00ea n\u00e3o precisa colocar captcha dentro do formul\u00e1rio. Nesta vers\u00e3o, seus visitantes n\u00e3o precisam resolver um quebra-cabe\u00e7a. Em vez disso, voc\u00ea ver\u00e1 o \u00edcone reCAPTCHA no canto inferior direito do seu site. Esta vers\u00e3o v3 do reCAPTCHA luta contra os bots em segundo plano. Mais importante ainda, voc\u00ea n\u00e3o precisa adicionar captcha em todos os formul\u00e1rios. Basta adicion\u00e1-lo uma vez e ele proteger\u00e1 todas as formas do seu site.<\/p>\n

Neste artigo, estudamos como um usu\u00e1rio pode adicionar o reCAPTCHA v3 ao seu site Laravel. Adicionar reCAPTCHA protege seu site contra bots e spams.<\/p>\n

Obtenha a chave do site e a chave secreta do reCAPTCHA<\/h3>\n

Para come\u00e7ar, primeiro voc\u00ea precisa registrar seu site no Google reCAPTCHA. V\u00e1 para o Google reCAPTCHA<\/a> e clique no \u00edcone ‘+’ para registrar o seu site. Na pr\u00f3xima p\u00e1gina, adicione o dom\u00ednio do seu site, escolha a op\u00e7\u00e3o ‘reCAPTCHA v3’. Se voc\u00ea quiser test\u00e1-lo em um servidor local, ent\u00e3o no campo de dom\u00ednio voc\u00ea deve adicionar ‘localhost’.<\/p>\n

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

Depois de clicar no bot\u00e3o enviar, voc\u00ea obter\u00e1 a chave do site e a chave secreta. Copie essas chaves. Eles exigir\u00e3o as pr\u00f3ximas etapas.<\/p>\n

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

Instalar e configurar a biblioteca reCAPTCHA do Laravel<\/h3>\n

V\u00e1 at\u00e9 o seu projeto Laravel e instale a biblioteca do biscolab<\/a> que foi constru\u00edda para integrar o reCAPTCHA no Laravel. Abra o terminal no diret\u00f3rio raiz do seu projeto e execute o comando:<\/p>\n

composer require biscolab\/laravel-recaptcha<\/code><\/pre>\n
Ap\u00f3s a instala\u00e7\u00e3o da biblioteca, publique o arquivo de configura\u00e7\u00e3o usando o comando abaixo.<\/p>\n
php artisan vendor:publish --provider=\"BiscolabReCaptchaReCaptchaServiceProvider\"<\/code><\/pre>\n
Abra o .env<\/code>arquivo em seu editor e adicione seu site e as chaves secretas do reCAPTCHA conforme mostrado abaixo.<\/p>\n
RECAPTCHA_SITE_KEY=ADD_YOUR_SITE_KEY\nRECAPTCHA_SECRET_KEY=ADD_YOUR_SECRET_KEY<\/code><\/pre>\n
Certifique-se de substituir os marcadores ‘ADD_YOUR_SITE_KEY’ e ‘ADD_YOUR_SECRET_KEY’ pelos valores reais. Em seguida, abra config\/recaptcha.php<\/code>e defina a vers\u00e3o para v3.<\/p>\n
return [\n\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0'version' => 'v3',\n\u00a0\u00a0\u00a0\u00a0...\n];<\/code><\/pre>\n
Depois disso, limpe o cache de configura\u00e7\u00e3o usando o comando:<\/p>\n
php artisan config:cache<\/code><\/pre>\n
Adicione o Google reCAPTCHA v3 ao seu site do Laravel<\/h3>\n
Conclu\u00edmos toda a configura\u00e7\u00e3o e tudo pronto para adicionar o reCAPTCHA ao site. Para isso, voc\u00ea precisa primeiro adicionar a meta tag HTML para csrf-token na se\u00e7\u00e3o head.<\/p>\n
<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\"><\/code><\/pre>\n
Se o seu site j\u00e1 adicionou essa tag, ignore a etapa acima. Em seguida, insira o htmlScriptTagJsApi()<\/code>helper antes de fechar a tag head.<\/p>\n
<!DOCTYPE html>\n<html>\n\u00a0\u00a0\u00a0\u00a0<head>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{!! htmlScriptTagJsApi() !!}\n\u00a0\u00a0\u00a0\u00a0<\/head><\/code><\/pre>\n
Agora v\u00e1 para o seu site, recarregue-o e voc\u00ea ver\u00e1 o \u00edcone reCAPTCHA no canto inferior direito de uma p\u00e1gina. Isso significa que seu site agora est\u00e1 protegido pelo Google reCAPTCHA.<\/p>\n
Voc\u00ea concluiu a adi\u00e7\u00e3o do Google reCAPTCHA ao seu site Laravel. Para mais curiosidade, se voc\u00ea quiser ver a resposta do reCAPTCHA, ser\u00e1 necess\u00e1rio modificar um pouco o c\u00f3digo na tag head.<\/p>\n
<head>\n...\n<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n<script type=\"text\/javascript\">\nfunction callbackThen(response){\n\u00a0\u00a0\u00a0\u00a0\/\/ read HTTP status\n\u00a0\u00a0\u00a0\u00a0console.log(response.status);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ read Promise object\n\u00a0\u00a0\u00a0\u00a0response.json().then(function(data){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(data);\n\u00a0\u00a0\u00a0\u00a0});\n}\nfunction callbackCatch(error){\n\u00a0\u00a0\u00a0\u00a0console.error('Error:', error)\n}\n<\/script>\n\u00a0\n{!! htmlScriptTagJsApi([\n\u00a0\u00a0\u00a0\u00a0'callback_then' => 'callbackThen',\n\u00a0\u00a0\u00a0\u00a0'callback_catch' => 'callbackCatch'\n]) !!}\n<\/head><\/code><\/pre>\n
Recarregue a p\u00e1gina e verifique no console do navegador, voc\u00ea ver\u00e1 a resposta do Google reCAPTCHA. No meu caso, \u00e9 mostrado como uma imagem abaixo.<\/p>\n
\"Um<\/a><\/p>\n
Artigos relacionados<\/h4>\n