Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Form Design
Webdesign

Como Integrar o "No CAPTCHA reCAPTCHA" no seu Site

by
Difficulty:BeginnerLength:LongLanguages:

Portuguese (Português) translation by André Victor Ribeiro Amaral (you can also view the original English article)

CAPTCHA é, talvez, a experiência mais frustrante na internet. Eles são dolorosos o suficiente para a maioria dos usuários, para não falar para quem é deficiente visual ou se baseia em tecnologias assistivas tais como leitores de tela para acessar a internet. Entretanto, e infelizmente, os CAPTCHAs são absolutamente necessários na luta contra o spam.

A necessary evil thanks spammers
Um mal necessário (graças a quem envia spam)

Ironicamente, apesar do tradicional "texto distorcido" ser difícil para nós, seres humanos, ler, a tecnologia moderna, aliada à inteligência artificial, faz isso facilmente. Google ainda utiliza uma tecnologia similar para ler os números das casas e confirmar os endereços do Google Street View!

Robôs do Google podem ler esses números de com acurácia

É lógico, portanto, que os desenvolvedores do Google surgiriam com a melhor solução de CAPTCHA até agora - no final de 2014. O No CAPTCHA reCAPTCHA não requer nada além de um clique - com o mouse, ou mesmo com a barra de espaço (depois de colocar em foco, através do teclado, a interface dessa solução).

Na maioria dos casos tudo é bem simples, mas se a análise de riscos do Google ainda não puder ter certeza que você é um humano, uma segunda janela irá aparecer.

Você já pode vê-la em ação por toda a internet, como na página de submissão do @materialup, por exemplo.

Use o No CAPTCHA reCAPTCHA

Vamos direto ao assunto e configurar, para uso, o No CAPTCHA.

Passo 1

Primeiro, você vai precisar de uma chave da API; para isso vá até https://www.google.com/recaptcha/admin. Para conseguir acesso a essa página, você vai precisar logar com a sua conta Google. Vai ser necessário registrar o seu website; para isso, dê a ele um nome que faça sentido - então, liste os domínios (por exemplo: tutsplus.com) onde o reCAPTCHA será utilizado. Subdomínios (como webdesign.tutsplus.com e code.tutsplus.com) são automaticamente levados em consideração dentro da sua conta.

Passo 2

Com isso feito, você receberá uma chave para o site e outra chave secreta:

Passo 3

Abaixo das chaves, você verá alguns trechos de código par incluir o reCAPTCHA no seu site. Primeiro vem o JavaScript:

Você também pode definir qual dos 40 idiomas suportados você vai usar; adicionando, para isso, um parâmetro to tipo string. Aqui, nós estamos adicionando es - que nos dará um reCAPTCHA compatível com o idioma Espanhol.

Coloque essa tag de script no rodapé do seu site (ou abaixo de onde o formulário do reCAPTCHA vai aparecer, dependendo de como você prioriza o carregamento da sua página).

Passo 4

O próximo passo, é definir o espaço onde você vai adicionar a marcação para o formulário do reCAPTCHA.

Nota: o atributo data-sitekey vai carregar o valor da sua chave - não desse exemplo.

Existem outros atributos que podem ser adicionados para personalizar a aparência e funcionalidade de seu reCAPTCHA. Por exemplo, adicionando data-theme="dark" à div, você vai ter a versão escura do formulário - que pode (ou não) ser melhor para a sua interface.

Para mais detalhes de configuração do seu reCAPTCHA, dê uma conferida em developers.google.com.

Colocando Tudo Junto

Agora que nós temos os ingredientes iniciais, é hora de juntar tudo em um ambiente de produção.

Passo 1

Vamos adicionar o nosso script e fazer um link dele com um formulário simples:

Aqui nós usamos uma estrutura de página básica, com um formulário que contém um campo name, um email e um botão submit. Não há nenhuma estilização adicional aqui, porque não é tão necessário para esse tutorial.

our captcha form
Você deve conseguir algo que se pareça mais ou menos com isso.

Para demostrar que o teste do reCAPTCHA funciona, nós vamos precisar rodar algumas verificações do lado do servidor. Nesse caso, nós vamos fazer isso com PHP; assim, salve esse arquivo como um novo projeto nomeado index.php.

Passo 2

Você vai notar que o método do formulário é post; então, quando nós submetermos os dados do formulário, ele vai retornar para essa página dentro de uma array de variáveis. Você pode recuperar essas variáveis criando para isso, um loop; para tal, adicione esse trecho de código a seguir em algum lugar da sua página:

Ele pega cada par de chave/valor presente na nossa array $_POST e os exibe seguindo determinada formatação. Agora, quando você submeter o formulário, você deve ver algo como:

Você vai ver os valores retornados para name e email - além de um valor para g-recaptcha-response. Se você cometeu algum erro para completar o teste CAPTCHA, esse campo retornará em branco; mas se você clicou na caixinha "I'm not a robot", você vai ver uma longa string de caracteres.

É esse valor que nós precisamos enviar para o Google para ser verificado; então vamos fazer isso a seguir.

Passo 3

Felizmente, o time de desenvolvedores do Google fizeram todo o trabalho duro por nós, então apenas vá ao projeto do ReCAPTCHA no Github e faça uma cópia da biblioteca recaptchalib.php. Salve esse arquivo no diretório raiz do seu projeto, e então faça referência a ele no topo do seu arquivo index.php:

Passo 4

Essa biblioteca contém uma coleção de funções que enviam o g-recaptcha-response (junto com a nossa chave secreta) para o Google via requisição HTTP. Eles, então, coletam a resposta, e conferem se o CAPTCHA foi ou não bem sucedido. Para usar isso, nós vamos precisar, primeiro de configurar algumas variáveis, antes de fechar a tag PHP:

O ReCaptcha() confere se a nossa chave secreta está presente. Se não estiver, ela mata o processo e nos alerta que devemos providenciar uma. Nós, então, rodamos nossos detalhes através do seguinte código:

Passo 5

Assumindo que tudo correu bem com a submissão do nosso formulário, a variável $response vai retornar com "sucesso" e nós podemos, a partir daí, continuar a processar os dados do formulário. Aqui está como isso vai se parecer: remova o trecho onde nós construímos um loop sobre os dados, e então adicione o código a seguir acima do formulário:

Finalmente, adicionar a tag de fechamento PHP - depois do formulário:

Isso exibe o formulário, a menos que ele tenha sido submetido com êxito; nesse caso, ele exibe um aviso pequeno "obrigado". Aqui está uma demostração final.

Conclusão

Essa foi uma implementação simples em PHP do no CAPTCHA reCAPTCHA. E está, claro, aberta a melhorias; mas vai te dar uma boa base para começar. Os créditos da biblioteca vão para o Time de Desenvolvimento Google; e eu também devo agradecer ao Matt Aussaguel, por me indicar essa solução.

Recursos úteis

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.