Como usar reCaptcha no formulário HTML

Depois de ver como é fácil configurar e instalar o reCaptcha no WordPress (link aqui) , vamos a um passo adiante, que é configurar o reCaptcha no seu formulário HTML. Pode ser feito com PHP ou ASP, depende da programação. Mas é necessário aqui usar uma das duas linguagens de back-end.

Como exemplo, vamos usar um formulário bem simples, como abaixo:

Entre as tags <head> e </head>, vamos acrescentar a função JS do reCaptcha e o script que faz a chamada ao submeter o formulário:

 <script src="https://www.google.com/recaptcha/api.js"></script>
 <script>
   function onSubmit(token) {
     document.getElementById("form1").submit();
   }
 </script>

E vamos modificar o botão, acrescentando a primeira CHAVE do reCaptcha, chamada SITEKEY:

<button class="g-recaptcha" 
        data-sitekey="6Le9kHcdAAAAALC1bQh4YE7UXkSmLljhnLC8GG8X" 
        data-callback='onSubmit' 
        data-action='submit'>OK</button>

Não precisa se preocupar em “esconder” essa chave, ela não pode ser usada em outro domínio, somente naquele que foi criado para usá-la. Portanto, se você usar mais de um domínio, ou domínios canônicos, será preciso cadastrar mais chaves.

Depois de acrescentar esse botão, vamos ver como a página ficou:

Depois de incluir o código, a página passa a mostrar esse selo de “protegido por reCAPTCHA

Agora vamos preparar a página de retorno. Veja o exemplo que fiz em PHP, na página resposta.php:

<?php
  if(isset($_POST['g-recaptcha-response'])){
          $captcha=$_POST['g-recaptcha-response'];
        }
  $secretKey = "XXXXXXXXXXXXXXXXXXXXXXXXXX";
		
  if ($captcha) {
        $ip = $_SERVER['REMOTE_ADDR'];
        $url =  'https://www.google.com/recaptcha/api/siteverify?secret=' . ($secretKey) . '&response=' . ($captcha) . '&remoteip=' . urlencode($ip);
        $response = file_get_contents($url);
        $responseData = json_decode($response);
        if($responseData-> success):
             print_r("Form OK!"); exit;
        else:
             print_r("Chave Inválida"); exit;
        endif;
    } else {
        print_r("reCaptcha não funcionou"); exit;
    }

  
?>

Basicamente o código faz o seguinte: verifica se a resposta do reCaptcha foi positiva, submete a resposta junto com a chave secreta para nova verificação. O reCaptcha retorna com uma resposta JSON e novamente ela é interpretada para o segundo teste, inclusive retornando o “score”, que diz a probabilidade do usuário ser Robô ou Humano. Nesse exemplo, caso tenha retornado Sucesso, basta aplicar o que deve ser feito no form, seja enviar e-mail ou gravar os dados do contato.

O JSON ficou assim:

{
  "success": true,
  "challenge_ts": "2021-12-08T14:26:05Z",
  "hostname": "www.animecomics.com.br",
  "score": 0.9,
  "action": "submit"
}

Adicionalmente, a página do reCaptcha mostra quantos SPAMs foram filtrados. Veja o relatório que recebemos em um formulário de contato:

Veja que o relatório é bem completo, dizendo até mesmo o score médio dos usuários, e a filtragem por dia / semana / mês.

Bom, é isso, vamos todos contribuir para acabar com o SPAM!

Como proteger seu formulário contra Spams – WordPress ou HTML

Quando você cria um formulário em seu site, a expectativa otimista é que ele seja bem aproveitado, preenchido por várias pessoas interessadas em seu negócio e que gere muitos contatos, para que alimente o seu cadastro. Mas aí que vem um grande problema: assim que seu site começa a ser divulgado no Google, logo começam os Spams! E se o formulário direciona um e-mail direto para você, aí seus problema são dobrados, além de gerar um spam no seu cadastro também gera um e-mail indesejado, com links, com vírus, com conteúdo enganoso, etc.

Como acontecem os Spams de formulário?

As mensagens de Spams são geradas automaticamente por programas ou scripts criados com esse propósito. Esses programas buscam sites que contenham formulários e preenchem automaticamente com os dados que eles quiserem. Esses programas são capazes de enviar centenas de mensagens por minuto. Se você já criou seu blog em WordPress e ativou os comentários, com certeza sabe do que estamos falando.

Como se proteger contra o Spam de formulário?

Existem algumas boas práticas para proteger seu formulário. Vamos explicar 3 delas:

1) Validação no preenchimento: com programação Javascript / Ajax, é possível validar o preenchimento de certos campos, por exemplo validar o campo de E-mail, limitar caracteres especiais, evitar letras em campo de telefone, impedir números em campos de texto, etc.

2) Validação na execução: essa validação é feita após o preenchimento dos campos, antes dos campos serem gravados no banco de dados ou enviados por e-mail. A idéia aqui é evitar caracteres especiais, códigos maliciosos inseridos no meio da mensagem, e bloquear mensagens que tenham “http” ou “ftp” entre elas.

3) Validação Captcha: é um tipo de validação que tem como objetivo verificar se o formulário está sendo preenchido por uma pessoa real ou por um script ou programa automático. Ele evita que o usuário utilize esses scripts e tenha que preencher manualmente, ou desista de fazer Spam. Costuma ser bem eficaz, apesar dos spammers estarem sempre buscando novas alternativas para burlar o sistema.

Como incluir o Certificado SSL no seu site

O SSL (Secure Sockets Layer) é um Certificado Digital que garante segurança nas transações online, entre o usuário e o website. Em termos práticos, significa que, quando um usuário preenche um formulário digital, por exemplo, as informações são criptografadas para que não haja vazamento de informações. Essa criptografia é feita por uma chave única, em posse da empresa certificadora.

A cerca de 15 anos atrás, com a popularização de sites de e-commerce, tornou-se necessário proteger informações sigilosas como cartões de crédito, dados bancários e senhas de e-mail. Fez-se necessário a utilização de criptografia para proteger tais dados, então investiu-se muito na criação de certificados que garantissem a segurança desses dados. Porém, de alguns anos para cá, cada vez mais golpes de internet obrigaram as empresas a adotarem medidas de segurança até nos formulários mais triviais.

E finalmente em julho de 2018, o Google praticamente decretou a necessidade de se possuir um certificado SSL em todos os sites, priorizando em suas buscas os sites que possuem Certificado SSL. O navegador Chrome deixou de exibir certos sites, e em alguns casos mostrando uma tela assustadora de aviso de site não seguro para os sites que não possuem SSL. E em sites com baixo risco de invasão (sites que não possuem formulários, por exemplo), simplesmente mostra um ícone e o aviso “Não seguro” no prefixo da URL, ao contrário do famoso “cadeado”.

Então para garantir segurança para seus usuários e além disso ter uma prioridade na busca do Google, todo site precisa de um certificado SSL.

Como incluir o SSL em meu site?

A maioria dos provedores de internet possuem algum tipo de pacote que inclui o certificado SSL. Na Locaweb, por exemplo, toda hospedagem possui um certificado SSL compartilhado. A maior desvantagem do SSL compartilhado em relação ao SSL próprio, é a necessidade de usar o prefixo por exemplo: https://ssl.websiteseguro.com/seu-domínio Ou seja, a URL fica um tanto longa e não intuitiva.

Vou citar aqui o exemplo de como contratar na Locaweb, que é meu provedor de hospedagem, e acredito que nos grandes provedores o processo seja semelhante. A Locaweb possui um passo a passo bem simples de seguir, e o primeiro passo é solicitar a contratação, gerar o boleto e pagar. Após a confirmação de pagamento, a Locaweb envia por e-mail um link para fazer o cadastro e solicita que se abra um chamado para gerar a chave CSR, uma espécie de senha gigantesca e portanto impossível de ser adivinhada. Essa CSR é gerada pela empresa certificadora, e depois deve ser informada para o provedor de hospedagem.

Como sou Desenvolvedor Locaweb, a própria Locaweb se encarrega de realizar alguns passos de instalação, poupando algum tempo, então o terceiro passo é a configuração de redirecionamento. Assim, se o usuário digitar por exemplo “www.nishiweb.com.br”, ele vai ser redirecionado automaticamente para “https://nishiweb.com.br”, evitando assim que ele veja uma página não segura dentro do seu site.

O redirecionamento é bem fácil de se fazer, bastando acrescentar o código abaixo no arquivo .htaccess do seu site:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.seudominio.com.br/$1 [R,L]

Caso seu site não tenha o .htaccess, é só criar um usando um bloco de notas e salvar na raiz do seu site.

Pronto, assim a segurança do seu site estará garantida!

Olá, WordPress!

Começamos aqui um Blog do WordPress, para falar de diversos temas relacionados a nossa área como Webdesign, programação, hospedagem de internet, segurança digital, dicas de Google, e é claro, o próprio WordPress. Se conseguir acompanhar, você verá que o nosso Blog começa no estilo padrão de WordPress com a mensagem de “Olá, Mundo” e sofrerá modificações com o tempo. Vamos fazer postagens a cada grande mudança nele.

Para preparar a instalação do WordPress, é preciso levar em conta os requisitos: Banco de Dados (mySQL ou MS-SQL) e servidor PHP, de preferência 7.1 ou superior. Criamos o nosso banco de dados mySQL e deixamos tudo pronto antes da instalação. Se o site for instalado em diretório, é preciso deixar criado esse diretório e configurar as permissões de Escrita na pasta (chmod 755)

A instalação padrão do WordPress foi simples, apesar de já termos feito isso diversas vezes para clientes distintos. Pode ser feita de modo manual – baixando os arquivos e publicando via FTP, ou de modo automático – através do provedor de hospedagem. Dessa vez, fizemos pelo nosso provedor, a Locaweb, que disponibiliza o WordPress de modo fácil no menu Aplicativos da Central do Cliente. Depois do preenchimento de um breve cadastro, informando dados do Administrador, o caminho onde será instalado e os dados do banco de dados, leva cerca de 5 minutos para concluir a Instalação e estará pronto para uso.

A primeira coisa que costumamos fazer é o login na área administrativa para instalar os plugins básicos. O primeiro plugin foi de backup, para que não se perca nada do site caso ocorra algum erro. Escolhemos o Updraft, mas existem diversas boas opções. O Updraft permite publicar o backup no Dropbox, o que para nós é muito útil. Aqui, nos deparamos com uma mensagem que dependendo da versão do WordPress, é preciso de uma intervenção no código. Havia uma necessidade de informar novamente os dados de FTP para que o plugin fosse instalado. Resolvemos isso com uma linha de código no wp-config.php:

define('FS_METHOD', 'direct');

Depois, buscamos um tema que combinasse com o nosso site. Escolhemos o tema Radiate que nos pareceu simples e elegante.

Editamos o menu para ter um link para nosso site principal, assim quem estiver acessando o Blog, terá oportunidade de voltar (ou conhecer) a página principal da Nishiweb.

Por fim, comecei a editar o post inicial para testar as postagens.

Em breve vamos fazer outras alterações e vamos postando como e quais alterações foram feitas.