Como adicionar o Google reCAPTCHA v3 em uma aplicação Laravel
Usando o reCAPTCHA do Google para evitar spams sem prejudicar a experiência do usuário
Na tog.design, depois de testarmos algumas abordagens, decidimos implementar em nossos projetos o reCAPTCHA v3, visando melhorar a experiência de uso, evitando assim a submissão de spams. Neste artigo explicamos passo a passo como fizemos essa implementação.
Um dos problemas mais comuns com formulários públicos são os spams feitos por bots. Existem diversas abordagens para evitar a submissão desses spams, como adicionar um campo invisível que somente os bots conseguem ver ou adicionar questões simples como “5 + 3?”, mas esses métodos nem sempre são eficientes.
Também há diversos sistemas de CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) que, basicamente, são sistemas automatizados para diferenciar humanos de computadores ou bots. No entanto, vários desses sistemas prejudicam a experiência do usuário por necessitarem, por exemplo, que os usuários digitem caracteres difíceis de serem lidos (o que é bem chato):
No entanto, com a versão 3 do Google reCAPTCHA o usuário não precisa responder campos adicionais, nem ler caracteres estranhos. Ele não precisa fazer nada.
reCAPTCHA v3
Nesta versão, o sistema do Google atribui um score ao usuário de 0 a 1, baseado nas interações com a página. Quanto mais próximo de 1, maior a chance de ser um humano. Então, você decide qual o score mínimo aceitável para permitir que o formulário seja enviado, e pode, por exemplo, fazer algum outro tipo de verificação à sua escolha para dar “outra chance” ao usuário se julgar necessário.
Então vamos à implementação…
Como implementar o reCAPTCHA v3 no framework Laravel?
- Primeiro, é necessário que você registre seu site na página do reCAPTCHA:
Importante: Não esqueça de adicionar os domínios corretos do seu site ao registrá-lo.
- Serão geradas duas chaves: Uma pública e outra privada (ou secreta).
Adicione essas chaves no arquivo .env do seu projeto:
GOOGLE_RECAPTCHA_PUBLIC_KEY=CHAVE_PUBLICA
GOOGLE_RECAPTCHA_PRIVATE_KEY=CHAVE_PRIVADALembre-se de não deixar exposta a chave privada. Ela será usada somente no servidor.
- No diretório config da root do projeto, crie um novo arquivo de configurações chamado recaptcha.php. Usaremos esse arquivo para as configurações do score mínimo aceitável e as chaves do reCAPTCHA (não é adequado acessá-las diretamente pelo .env). O arquivo ficará dessa forma:
<?php
return [
'v3' => [
'public_key' => env('GOOGLE_RECAPTCHA_PUBLIC_KEY'),
'private_key' => env('GOOGLE_RECAPTCHA_PRIVATE_KEY'),
'minimum_score' => 0.6,
]
];O score mínimo que decidi usar ficou em 0.6, mas pode ser ajustado conforme a necessidade.
- Rode o comando php artisan config:cache para limpar e fazer um novo cache das configurações. Não esqueça de rodar esse comando sempre que alterar as configurações.
A verificação do usuário é feita em duas etapas:
- Quando o usuário submeter o formulário, fazemos uma verificação pela api JavaScript fornecida pelo reCAPTCHA (logo vamos adicioná-la no projeto). Isso retornará um token que devemos enviar para o backend.
- Enviaremos esse token para a api do Google para receber o score do usuário. Então, basta comparar com o score mínimo que definimos no arquivo de configuração para decidir se o formulário será enviado de fato.
Etapa 1: Frontend
- Antes de tudo precisamos adicionar o arquivo do Google reCAPTCHA (api JS com a chave pública do site).
- Também iremos colocar a chave pública em uma meta tag para poder acessá-la no arquivo JS.
Para isso, adicione essas duas linhas na head do seu html:
<meta name="grecaptcha-key" content="{{config('recaptcha.v3.public_key')}}"><script src="https://www.google.com/recaptcha/api.js?render={{config('recaptcha.v3.public_key')}}"></script>
- Agora no arquivo app.js iremos buscar os formulários que precisam da verificação do reCAPTCHA e, ao serem submetidos, será adicionado um input contendo o valor do token recebido da api.
Lembre-se que ao editar o arquivo JS é necessário rodar o Laravel Mix (como o comando npm run watch) para compilar os assets.
- Assim, ao criar um formulário só é necessário adicionar o atributo data-grecaptcha-action e definir a ação do formulário (a ação é uma forma de categorizar os requests por formulário, e será exibida no dashboard do reCAPTCHA). A tag do formulário ficará assim:
<form action="{{route('message')}}" data-grecaptcha-action="message" method="POST">
...
</form>Etapa 2: Backend
No backend precisamos receber o score e compará-lo, e para isso criaremos uma regra de validação. Dessa forma, haverá apenas uma classe responsável por isso, e poderemos reutilizá-la sempre que necessário.
- Para criar a classe execute o comando php artisan make:rule ReCAPTCHAv3. Esse comando irá criar uma nova regra de validação no diretório app/Rules.
- Agora, precisamos fazer um request para a api do reCAPTCHA. Para fazer esse request, instale o Guzzle no projeto —
composer require guzzlehttp/guzzle— caso ainda não tenha. O Guzzle facilita trabalhar com requests HTTP.
A regra de validação ficará dessa forma:
O método passes recebe o token do reCAPTCHA enviado pelo formulário. É nesse método que devemos validar se o request passa pela validação.
Para isso, é criado uma nova instância do Guzzle e feito um request com os dados necessários para a api do Google. Repare que é aqui que utilizamos a chave privada do reCAPTCHA. A variável $value contém o valor do token.
Para deixar o código mais limpo, criei um método getScore nesta mesma classe, que abstrai a extração do score do json recebido na $response. E a mensagem de erro é customizada no método message.
- Então basta usar a regra de validação:
Lembre-se que o ideal é criar uma classe responsável pela validação (form request), mas esse não é o foco deste tutorial. Você pode ver mais sobre isso neste link.
Em resumo:
- Registre o site no reCAPTCHA para conseguir as chaves;
- Armazene as chaves no .env e crie um arquivo de configurações para elas;
- Importe a api JS do reCAPTCHA;
- Defina o nome da ação do formulário;
- Ao submeter um formulário, faça um request pelo token do reCAPTHA na api JS;
- Envie esse token junto com o request para o backend;
- Crie uma regra de validação que faça o request do score usando o token recebido e valide com o score mínimo que você definiu;
- Utilize essa regra de validação para o token recebido do formulário.
Resultado final
Com esses passos, quando um novo formulário precisar da validação do reCAPTCHA, basta adicionar o atributo data-grecaptcha-action=”acao” no formulário e utilizar a regra de validação ReCAPTCHAv3 no backend.
Você pode conferir o resultado final no GitHub.
Alguns artigos interessantes relacionados (em inglês):
tutsforweb: Google Recaptcha In Laravel Application
