Como Integrar o "No CAPTCHA reCAPTCHA" no seu Site

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.

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:

<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.

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:

    <?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.

Como Integrar o "No CAPTCHA reCAPTCHA" no seu Site

Use o No CAPTCHA reCAPTCHA

Passo 1

Passo 2

Passo 3

Passo 4

Colocando Tudo Junto

Passo 1

Passo 2

Passo 3

Passo 4

Passo 5

Conclusão

Recursos úteis

Envato Tuts+ is now part of Envato Elements

One subscription provides unlimited access to: