reCAPTCHA | Olá pessoal, meu nome é Mauricio Junior e hoje eu vou mostrar um passo a passo de como colocar um validador para evitar ficar recebendo spams em seu email quando o seu site tiver algum formulário. É importante você colocar um validador para que evite problemas ou algum ataque hacker, malware ou handsonware. 

O primeiro passo é acessar o site do Google para registrar um ID do site. O Google sempre solicita um ID para que seja registrado e agora ele está pedindo também para criar uma conta no Google Cloud do site.

Basicamente o reCAPTCHA solicita o usuário para confirmar que não é um robô ou um bot que fica submetendo o formulário para o site de forma aleatória e sempre.

O site é esse https://developers.google.com/recaptcha para fazer o cadastro do seu site primeiro e gerar um ID.

Depois acesse esse link https://developers.google.com/recaptcha/intro para clicar no botão iniciar ou Get Started e após de logar usando a sua conta do Google, ele vai te pedir para cadastrar o site e você vai poder escolher entrar a versão 2 e versão 3. A minha opinião é sempre escolher a última versão para ficar sempre atualizado. Veja a figura 2.

É necessário colocar um nome do label que normalmente é o nome do site, indicar o nome do domínio que você é dono e agora tem o Google Cloud que você precisa colocar para criar o projeto. Normalmente eu coloco o nome do site mesmo. 

Logo depois o sistema gera duas chaves para identificar o seu site. Elas te da o direito de gerar pelo menos 10.000 verificações por mês dentro do seu site, mais do que isso é necessário pagar.

A primeira chave serve para você fazer identificar via JavaScript o site. A segunda chave é para você que quer fazer isso via servidor, ou seja, é necessário um código diferente.

Vamos para o código

Agora eu vou te falar como colocar o código HTML e JavaScript em seu formulário e deixar funcionando a verificação. Basta um código simples que vai funcionar sem problema algum.

Na sua página coloque o código 1 que vai ser chamado ao carregar a página, mas é necessário chamar essa função, que será o código 3.

<script type="text/javascript">
    var onloadCallback = function() {
        grecaptcha.render('html_element', {
            'sitekey' : '<KEY_1>'
        });
    };
</script>

Código 1 – Gerando função para carregar o reCAPTCHA do Google

Código 2, coloque dentro da tag formulário.

<form method="POST">
    <div class="g-recaptcha" data-sitekey="<KEY_1>"></div>
    ... <!-- seu formulário e campos -->
    ...
    ...
    <input type="Submit" value="Enviar"/>
    <br/>
    <div id="html_element"></div>
</form>

Código 2 – Colocando tag html_element e div g-recaptcha dentro do formulário

Agora no código 3, vou colocar o código JavaScript para chamar o código 1 quando carregar a primeira página.

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>

Código 3 – JavaScript no final da página

Pronto, a junção dos três códigos faz com que seu site e formulário esteja protegido de bots com envio automático.

Espero ter ajudado e qualquer coisa pode entrar em contato pelo meu site pessoal https://mauriciojunior.net.