Se você possui um website com HTML estático e precisa fazer uso do Google reCAPTCHA para implementar dentro de um formulário de contato, página de login ou na seção de comentários, neste artigo vamos ensinar como realizar este procedimento de uma forma super simples, rápida e eficaz.
Seções desta página
O que é CAPTCHA?
Para bom entendedor, o termo CAPTCHA é a sigla para “Completely Automated Public Turing test to tell Computers and Humans Apart” que, traduzindo livremente para o nosso bom e velho português, significa algo como: teste de Turing público totalmente automatizado para ajudar na diferenciação entre humanos (pessoas reais) e máquinas (computadores).
Numa internet cada vez mais robotizada, com inteligência artifical em todos os cantos, um CAPTCHA é todo tipo de teste online que ajuda a diferenciar um humano de um bot. São aquelas caixas de diálogo em que você precisa clicar em fotos com faixas de pedestres, escadarias, pontes e hidrantes…
O que é reCAPTCHA
O reCAPTCHA é uma ferramenta desenvolvida pelo Google de uma forma ainda mais aprimorada que o CAPTCHA tradicional.
Seu objetivo é colaborar diretamente na proteção de sites contra atividades maliciosas e, principalmente, contra a distribuição de spam. Ou seja, quando um reCAPTCHA está ativo e funcional, significa uma camada extra de proteção e segurança.
Adicionar reCAPTCHA manual em conteúdo estático
Siga o passo a passo a seguir para criar um reCAPTCHA do Google e integrar de forma eficaz em seu site com HTML estático.
Registrar um novo site
A primeira coisa a se fazer é acessar o Google ReCAPTCHA Admin Page para registrar o site que vai receber o código de utilização. Neste processo:
- Adicione um nome (etiqueta) para identificação;
- Escolha o modelo reCAPTCHA v2;
- Digite o domínio onde a ferramenta será usada;
- Adicione um email de proprietário;
- Clique em
Salvar.
Criar chaves de reCAPTCHA
Agora que você registrou o domínio do seu site, acesse sua propriedade e clique no ícone de engrenagem ou no link Chaves do reCAPTCHA, conforme imagem ilustrativa abaixo:
Adicionar manualmente o widget do reCAPTCHA
Você vai precisar adicionar apenas dois snippets ao código-fonte do seu site com HTML estático, sendo que o primeiro deve ser inserido entre as tags <head>...</head> da seguinte forma:
<script async defer src="https://www.google.com/recaptcha/api.js"></script>Code language: HTML, XML (xml)Em seguida será necessário colar o código abaixo imediatamente antes de um botão de formulário:
<div class="g-recaptcha" data-sitekey="SEU_SITE_KEY"></div>Code language: HTML, XML (xml)Modelo de reCAPTCHA v2 integrado manualmente
Para que se possa entender de uma forma mais didática, no exemplo a seguir é possível analisar como o reCAPTCHA é aplicado em um site HTML estático com formulário básico:
<html>
<head>
<title>Teste de reCAPTCHA v2</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="SEU_SITE_KEY"></div>
<input type="submit" value="ENVIAR">
</form>
</body>
</html>Code language: HTML, XML (xml)Callbacks ou retornos de chamada
Uma vez que o seu modelo de reCAPTCHA esteja devidamente integrado e funcional, ainda é possível utilizar as famosas callbacks para turbinar o código básico com novos manipuladores, tais como ajustes de tema (light ou dark), tamanho (normal ou compacto), dentre vários outros.
Conclusão
Quando estamos acostumados a trabalhar com sites dinâmicos como os modelos que utilizam o WordPress, existem vários plugins que realizam esta integração de uma maneira bem tranquila.
Mas quando um site é estático, as coisas não são tão simples como deveriam. Mesmo assim, a integração manual do reCAPTCHA em sites HTML estáticos não requer conhecimento técnico avançado.
Fica a dica!
Foto: Ann H via Pexels.