Segurança

Recaptcha, proteja seu site com a tecnologia do Google

Configurando e instalando o Recaptcha do Google no seu website.

Recaptcha é a nova solução do Google para “captcha”, mecanismo de segurança que ajuda a proteger o seu site contra invasores e “spam”.

Conheça mais acessando: Recaptcha Invisivel – O novo captcha da Google

Ele foi desenvolvido com intuito de ser “inteligente”, facilitando a vida dos usuários e dificultando as acessões de hackers e “robôs” de spam.

Os “Captcha” convencionais normalmente não são difíceis apenas para os “robôs” que estão tentando atacar o site, muitas pessoas, como eu por exemplo, temos uma enorme dificuldade para entender aquelas letras e números miúdos e abstratos que são gerados na imagem.

Péssimo exemplo de captcha

Olha abaixo o captcha utilizado no site da Receita Federal, bem difícil não é?

Experiencia do usuário é tudo

Nesse universo aonde a experiencia do usuário “UX” ia para o lixo, o Google mais uma vez facilitou a vida dos desenvolvedores com a criação do Recaptcha.

Utilizando o Recaptcha tudo se tornará mais simples para o usuário do seu sistema ou site. Seu funcionamento é exatamente igual a animação abaixo:

Usuário clica no check box, Não sou um robô, e pronto, está feito.

Segredo está no “algoritmo” que está por traz do Recaptcha, que irá identificar se existe ou não a necessidade de submeter esse usuário a um teste rigoroso de segurança.

Configurando Recaptcha no seu site

Para utilizar o Recaptcha no seu projeto, primeiro você deverá se cadastrar no site do Google, por este link: https://www.google.com/recaptcha/intro/index.html.

Se você já possuir uma conta no Gmail, poderá utilizar ele, pois é necessário se autenticar com uma conta do Google.

 

Uma vez que você tenha se autenticado, você será direcionado para esta tela:

Na tela acima, você deverá informar os domínios aonde você irá utilizar o Recaptcha, preenchendo o campo “Domains”, no Label, você coloque um nome para identificar a página aonde será configurado o recaptcha. Exemplo: “página de contato”.

Após isso, clique no botão “Register”, você será direcionado para a tela abaixo:

Salve o código que está no “Secret Key”, você precisara dele no final.

No “Step 1” temos o primeiro código “script”. Você deverá colocar ele antes do fechamento da tag “head” na página aonde será exibido o captcha.

Já a segunda parte, você terá que colocar dentro da tag “form”, exatamente aonde você quer que ele apareça no seu formulário.

Prontinho, o recaptcha já está “instalado” no seu site, você já pode visualizar ele e testar.

Agora vamos programar a validação em seu site.

Validando se o usuário fez o teste do Recaptcha

Na mesma tela você terá as instruções necessárias para consultar o servidor do Google, para validar se o usuário do seu site passou ou não no teste do Recaptcha.

Você terá que fazer uma requisição POST ao site do Google, URL: https://www.google.com/recaptcha/api/siteverify.

Passando o “secret key” e o valor do campo “g-recaptcha-response”.

O valor do “g-recaptcha-response” vem junto com os demais campos do formulário, você poderá recuperar ele de acordo com “method” que está configurado no form, “POST” ou “GET”.

Aqui segue um exemplo em PHP que eu estou utilizando para recuperar o retorno do Google, se o usuário passou ou não no teste do Recaptcha.

 /* Aqui estou recuperando por POST, pois no method do meu form, está configurado como POST */ $g = $_POST["g-recaptcha-response"]; 
 $data = array(
   'secret' => 'COLOQUE SITE SECRET AQUI',
   'response' => $g
 );
 $url = 'https://www.google.com/recaptcha/api/siteverify';
 $options = array(
     'http' => array(
     'header' => "Content-type: application/x-www-form-urlencoded\r\n",
     'method' => 'POST',
     'content' => http_build_query($data),
   ),
 );
 $context = stream_context_create($options);
 $result = file_get_contents($url, false, $context); 
 $json = json_decode( $result );
 $result = array();


 
 if($json->success == false){
   $captcha_feedback = 'Você não passou no teste de segurança. Marque o campo "não sou um robo".';
 }else{

  /* Coloque seu código aqui de envio de e-mail, cadastro, login, etc... */
 }

Cada linguagem de programação irá tratar isso de uma forma.

Conclusão

Se você não é um programador, você tem algumas opções rápidas.

  • Contratar um profissional gabaritado para fazer isso.
  • Caso você utilize alguma plataforma de CMS ou comércio eletrônico, como Magento ou WordPress, existem bons Plugins disponíveis que você pode estar instalando e habilitando na sua ferramenta, normalmente você precisará apenas do site key e secret key para fazer isso.

Experimente fazer uma busca no Google, digitando “recaptcha WordPress” ou “recaptcha Magento”.

Qualquer dúvida fique a vontade para deixar o seu comentário ou sugestão.

Resumo
Nome do Artigo
Recaptcha do Google no seu Site
Descrição
Configurando o Recaptcha do Google no seu Site, solução inteligente para Captchas
Autor
Editor
Roger Mauricio Takemiya
Logo do Editor

Ver comentários

  • Olá, tenho algumas dúvidas, o meu não está aparecendo como na imagem do não sou um roubo, aparece um simples botão de submit. E no meu form eu chamo uma segunda página assim: e estou pondo para processar as coisas nessa pagina como o nome, email, tel e etc... mais quando o captcha é clicado e da certo ele manda pra pagina certa só que qnd o n da certo ele fica uma pagina em branco.
    if($json->success == false){
    $captcha_feedback = 'Você não passou no teste de segurança. Marque o campo "não sou um robo".';
    }else{
    //codigo para submit do form e mandar para pagina certa.
    }
    será que você consegue me ajudar?

  • amigão, explicou muito bem. apesar de eu estar estudando programação e ja estar um pouco ambientado ao php, unico lugar que conseguiu me passar clareza em fazer a config do recaptcha foi aqui mesmo. muitissimo obrigado.

Post Recentes

WordPress não aparece no Google: noindex esquecido e robots.txt virtual

Site novo há semanas e nenhuma página indexada? Confira a caixinha de visibilidade em Leitura, o noindex no HTML e…

17 horas atrás

array_map perde as chaves do array no PHP: como manter o índice

O retorno do array_map voltou com índice 0, 1, 2 e o código que dependia da chave quebrou. Entenda quando…

1 dia atrás

Backup do Magento 2 com mysqldump: dump leve sem as tabelas de log

Dump de 12 GB que demora horas porque arrasta report_event e cron_schedule. Faça o backup em duas passadas, guarde só…

2 dias atrás

Preference do di.xml não aplica no Magento 2: o que checar antes

Escreveu a preference e o Magento 2 continua usando a classe original? Confira a área do di.xml, o generated/code e…

3 dias atrás

Filtro por atributo do WooCommerce vazio: global x personalizado

Cadastrou Cor direto na aba Atributos do produto e o filtro por atributo vem vazio. Veja como identificar o tipo,…

3 dias atrás

wp db query: rodar SQL no WordPress pelo WP-CLI sem phpMyAdmin

Precisa de um SELECT no banco do cliente e só tem SSH? O wp db query pega a senha do…

4 dias atrás