Portuguese (Português) translation by André (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.

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!

É 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:
<script src='https://www.google.com/recaptcha/api.js'></script>
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.
<script src='https://www.google.com/recaptcha/api.js?hl=es'></script>
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.
<div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>
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:
<!DOCTYPE html> <html lang="en"> <head> <title>How to Integrate Google “No CAPTCHA reCAPTCHA” on Your Website</title> </head> <body> <form action="" method="post"> <label for="name">Name:</label> <input name="name" required><br /> <label for="email">Email:</label> <input name="email" type="email" required><br /> <div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div> <input type="submit" value="Submit" /> </form> <!--js--> <script src='https://www.google.com/recaptcha/api.js'></script> </body> </html>
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.

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:
<?php foreach ($_POST as $key => $value) { echo '<p><strong>' . $key.':</strong> '.$value.'</p>'; } ?>
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
:
<?php // grab recaptcha library require_once "recaptchalib.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:
// your secret key $secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT"; // empty response $response = null; // check secret key $reCaptcha = new ReCaptcha($secret);
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:
// if submitted check response if ($_POST["g-recaptcha-response"]) { $response = $reCaptcha->verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"] ); }
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:
<?php if ($response != null && $response->success) { echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!"; } else { ?>
Finalmente, adicionar a tag de fechamento PHP - depois do formulário:
<?php } ?>
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
- ReCAPTCHA 1.0.0 no Github
- Documentação ReCAPTCHA
- Você é um robô? Introduzindo "No CAPTCHA reCAPTCHA" - Google Security Blog
- WordPress ReCaptcha Integration - plugin reCaptcha para login, cadastro, formulário de comentários, Ninja Forms e Contact Form 7.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post