Como adicionar Eu não sou um captcha de robô no Laravel Forms

Você deseja adicionar o Google reCAPTCHA aos seus formulários do Laravel? O reCAPTCHA do Google ajuda a proteger os formulários contra bots que nos salvam de spams. Se você não está protegendo seus formulários, provavelmente está recebendo uma tonelada de spams no banco de dados.

No momento em que este artigo foi escrito, o Google fornece 2 versões do reCAPTCHA – v2 e v3. O reCAPTCHA v3 coloca um ícone no canto inferior direito de suas páginas e eles verificam as solicitações com uma pontuação. Por outro lado, o reCAPTCHA v2 verifica as solicitações com um desafio. Neste artigo, estudamos o reCAPTCHA v2 e validaremos as solicitações com a caixa de seleção “Não sou um robô".

Por que precisa do Google reCAPTCHA?

Um bot da Internet é um sistema que executa scripts automatizados na Internet. Eles direcionam os formulários do site para enviar spams para o banco de dados. Basicamente, esse sistema funciona a uma taxa muito mais alta do que os humanos sozinhos. Sempre queremos um ser humano de verdade para interagir com os formulários do nosso site, não um bot.

Ao adicionar o Google reCAPTCHA, podemos proteger os formulários do nosso site contra esses bots da Internet, seus spams e abusos. É impossível para um sistema automatizado resolver o desafio definido pelo reCAPTCHA. E seu formulário não será enviado até que o desafio seja resolvido. Um humano pode facilmente resolver esses desafios e enviar um formulário.

Configure o Google reCAPTCHA em seu site do Laravel

Para começar, primeiro você precisa registrar o site no Google. Escolha a opção reCAPTCHA v2 e a caixa de seleção “Não sou um robô”, conforme mostrado na captura de tela abaixo.

Ao registrar o site, copie a chave do site e a chave secreta que precisaremos em um momento.

Temos que adicionar reCAPTCHA no projeto Laravel. Para realizar a tarefa, vou usar a biblioteca anhskohbo / no-captcha.

Abra o prompt de comando no diretório raiz do seu projeto e execute o comando:

composer require anhskohbo/no-captcha

Abra o arquivo ‘config / app.php’ e adicione a linha abaixo ao array ‘Provedores’.

AnhskohboNoCaptchaNoCaptchaServiceProvider::class,

Adicione o alias da classe à matriz de aliases:

'NoCaptcha' => AnhskohboNoCaptchaFacadesNoCaptcha::class,

Publique o arquivo de configuração usando o comando:

php artisan vendor:publish --provider="AnhskohboNoCaptchaNoCaptchaServiceProvider"

Em seguida, abra o .envarquivo e especifique as chaves reCAPTCHA da seguinte maneira.

NOCAPTCHA_SECRET=secret-key
NOCAPTCHA_SITEKEY=site-key

Certifique-se de substituir os marcadores de chave secreta e chave do site pelos valores reais.

Limpe o cache de configuração executando o comando abaixo.

php artisan config:clear 

Adicionando Google reCAPTCHA ao formulário no Laravel

Neste estágio, você concluiu a configuração básica necessária para o reCAPTCHA. Agora vamos escrever algum código e colocá-lo em ação.

Abra o arquivo de visualização onde deseja adicionar a caixa de seleção Não sou um robô. Na parte superior do arquivo blade, inicialize a fonte JS da seguinte maneira:

{!! NoCaptcha::renderJs() !!}

Adicione a instrução de linha única abaixo no local onde deseja exibir a caixa de seleção reCAPTCHA. O melhor lugar é antes do botão enviar.

{!! NoCaptcha::display() !!}

Como exemplo, vamos criar um formulário com poucos campos e adicionar reCAPTCHA a ele usando o código abaixo.

{!! NoCaptcha::renderJs() !!}
 
@if ($errors->has('g-recaptcha-response'))
    <span class="help-block">
        <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
    </span>
@endif
<form action="{{ url('ROUTE_HERE') }}" method="post">
    <p>Name: <input type="text" name="fullname" /></p>
    <p>Email: <input type="email" name="email" /></p>
    <p>Message: <textarea name="message"></textarea></p>
    {!! NoCaptcha::display() !!}
    {{ csrf_field() }}
    <p><input type="submit" name="submit" value="Submit" /></p>
</form>

Depois de adicionar as linhas acima, você verá o reCAPTCHA aparecer como mostrado na captura de tela abaixo.

No código acima, também adicionei um código que exibe um erro se ocorrer na validação de um reCAPTCHA.

Agora, temos que validar o reCAPTCHA no envio do formulário. Para conseguir isso, vou usar o Validador Laravel da seguinte maneira.

<?php
 
namespace AppHttpControllers;
 
use IlluminateHttpRequest;
use IlluminateSupportFacadesValidator;
 
class ContactController extends Controller
{
    ...
    ...
    public function store(Request $request)
    {
        $messages = [
            'g-recaptcha-response.required' => 'You must check the reCAPTCHA.',
            'g-recaptcha-response.captcha' => 'Captcha error! try again later or contact site admin.',
        ];
 
        $validator = Validator::make($request->all(), [
            'g-recaptcha-response' => 'required|captcha'
        ], $messages);
 
        if ($validator->fails()) {
            return redirect('ROUTE_HERE')
                        ->withErrors($validator)
                        ->withInput();
        }
 
        // process the form
    }   
}

Aqui, incluí o ‘Validador’ de fachada e a validação de um reCAPTCHA no método ‘armazenar’. Se falhar na validação, ele gerará um erro.

É isso! Você adicionou com sucesso o reCAPTCHA v2 com a caixa de seleção Não sou um robô ao formulário do Laravel. Agora, seu formulário não será enviado até que o visitante resolva o desafio reCAPTCHA.

Artigos relacionados

• Sistema de Registro de Usuário e Login no Laravel
• Sistema de login social usando Laravel Socialite
• Authorize.Net Payment Gateway Integration no Laravel