Como esta caixa de seleção recaptcha funciona e como posso usá-la?

150

Recentemente, me inscrevi no site oneplusone https://account.oneplus.net/sign-up e notei esta caixa de seleção recaptcha

caixa de seleção recaptcha

Como funciona e como posso usá-lo em meus sites? Muito melhor do que aquelas palavras / dígitos enigmáticos :)

O site recaptcha não menciona nenhum novo método de recaptcha ... https://www.google.com/recaptcha/intro/index.html

Pedro Maia Costa
fonte
14
Eu vi exatamente no mesmo lugar e me perguntei exatamente a mesma coisa. Estou oferecendo uma recompensa para atrair atenção. Eu também estou curioso.
Ghost de Madara
Talvez esteja em teste e ainda não esteja pronto para ser lançado?
User3791372
1
Uma maneira fácil de fazer isso é que os $('form input[type=submit]') .before('<div>Are you a human? <input type="checkbox" name="captcha" /></div>');bots não marcarão a caixa porque não faz parte do formulário. jsfiddle.net/s6jkchmz
TylerH
1
Há também o método honeypot de colocar um campo de entrada irresistível no formulário (como 'comentários') e depois ocultá-lo com css / js. Se os dados estiverem presentes, o remetente é um bot. Eu usei isso e funciona surpreendentemente bem.
David H. Bennett
2
Para sua informação: googleonlinesecurity.blogspot.hu/2014/12/…
Pred

Respostas:

30

Esta é uma API beta para reCAPTCHA. Reunimos isso na fonte da API JS: https://www.google.com/recaptcha/api.js referenciando "API2". E também achei o seguinte: http://jaswsinc.com/recaptcha-ads/ Aparentemente, eles fizeram uma versão beta apenas para convidados do seu "no CAPTCHA reCAPTCHA" Então ... Você provavelmente não será capaz de fazê-lo funcionar seu site, ainda. Não consigo encontrar nenhuma informação sobre a opção beta, mas se você pesquisar "No CAPTCHA reCAPTCHA beta", poderá ver várias pessoas que mencionaram receber o e-mail do Google para participar.

Se você encontrar um lugar para entrar na versão beta, compartilhe! Caso contrário, parece que o lançamento público está chegando em 2015 ...

Eu sou
fonte
1
Você pode tentar frankenstein algo junto usando gstatic.com/recaptcha/api2/r20140903161709/recaptcha__en.js se procurar por "g-recaptcha", "eu não sou um robô" ou "caixa de seleção", você pode encontrar o código que é implementá-lo lá.
9134 Ian M #
3
Trecho do email:We expect to move all existing reCAPTCHA sites to the new API in 2015.
Timothy Zorn
1
Aqui está post do blog do Google anunciar o novo recurso Sem CAPTCHA reCAPTCHA: googleonlinesecurity.blogspot.com/2014/12/...
Nealvs
4
Onde isso explica como os novos No CAPTCHA reCAPTCHAfuncionam?
Nikhil Girraj
5
@NikhilGirraj, se você gostaria de saber como o CAPTCHA reCAPTCHA funciona , eu indico a você este post .
Igor Savinkin
114

Esta entrada não responde à pergunta original, no entanto, ajuda a implementar uma solução semelhante. Como o @IanM disse, a caixa de seleção recaptcha está na fase beta e não pode ser usada sem convite.

EDIÇÃO IMPORTANTE O Google apresentou o novo reCAPTCHA

Este é um CAPTCHA baseado em JavaScript.

Como a maioria dos spambots não executa JavaScript e não pode identificar a correlação entre o texto exibido e o DOM ou as ações necessárias, eles não podem clicar na caixa de seleção.

Observe que não há nenhuma caixa de seleção; é apenas um elemento div com algum estilo CSS. Spambots estão tentando preencher os elementos de entrada do formulário, mas não há entrada no CAPTCHA. A marca de seleção é apenas mais uma div (classe css).

Quando você clica na caixa, uma solicitação ajax notifica o servidor que clicou no div e o servidor armazena essas informações em um armazenamento temporário (marca o token: esse token foi ativado por um ser humano). Quando você envia o formulário, um campo oculto envia o token que foi ativado; quando o servidor validar as informações do formulário, ele reconhecerá que o token foi ativado. Se o token não estiver ativado, o formulário será invalidado.

As etapas nos pontos de marcador:

  • Gere um identificador exclusivo e adicione-o ao formulário com uma entrada oculta
  • Renderize uma caixa de seleção no site (sem usar o <input>elemento, possivelmente usando <div>) e adicione o identificador gerado anteriormente a ele (você pode usar os data-*atributos html5 )
  • Quando o usuário clicar na caixa de seleção, envie uma solicitação ajax ao servidor e valide o CAPTCHA, se for válido, marque-o como in use. (Mostrar o resultado - o identificador está OK / não está OK - para o usuário)
  • Quando o usuário envia o formulário, os dados do formulário contêm o identificador. Verifique mais uma vez, deve existir e deve estar no in useestado.
  • Se todas as validações forem aprovadas, os dados do formulário estarão prontos para uso / processo

Você pode vincular o identificador à sessão, endereço IP do usuário e / ou usar limites de tempo para melhorar a segurança.

NOTA Esse tipo de CAPTCHA funciona apenas quando o JavaScript está ativado!

OBSERVAÇÃO (editar 1) Como o @crazypotato afirmou, existem algumas ferramentas de automação que podem executar JavaScript; essas ferramentas também são capazes de enviar a solicitação AJAX adequada e acionar o evento Click na div da caixa de seleção.

NOTA (editar 2) Observe que um script escrito especificamente em um site ou para interromper um tipo de captcha será executado mais cedo ou mais tarde. Não há proteção definitiva, você só pode fazer os bots (ou seus desenvolvedores) trabalharem mais.

NOTA (editar 3) As etapas e a descrição nesta resposta contêm apenas algumas informações básicas sobre esse tipo de captcha; você sempre precisa adicionar validações e etapas de segurança adicionais para torná-lo mais seguro. Por exemplo, o Google noCaptcha dispara sistematicamente um reCaptcha padrão após 3 "cliques div".

Pred
fonte
4
Acho que a pergunta é especificamente sobre "Como habilito esse recurso com o reCAPTCHA do Google?" Estou bastante confiante de que posso implementar isso sozinho, mas não é tão simples assim.
Ghost de Madara
Se você clicar em Relatar um problema na parte inferior de uma página do Streetview, receberá o mesmo novo Recaptcha. Foi aí que eu o vi pela primeira vez e encontrei esta página SO quando fui pesquisar.
user2605793
1
O que impediria um bot de enviar essa solicitação ajax? Se todos (ou um site semi-grande) implementassem um CAPTCHA como este, certamente seria explorado de qualquer maneira. O Cloudflare possui um sistema de detecção de bots semelhante que parece funcionar sem exigir que o usuário faça nada.
Steen Schütt
Primeiro de tudo, eu concordo totalmente com o seu comentário e sim, um bot escrito diretamente para explorar um site passará por isso (e isso é verdade para qualquer tipo de capthas). Comecei meu post com most botse não all bots. Também existem soluções quando o captcha captcha baseado em imagem simplesmente envia a imagem a um software e a um humano digita nos caracteres (e o empregado é pago pela contagem de postagens bem-sucedidas). Como você impediria isso? :)
Pred
1
@Pred "Spambots estão tentando preencher os elementos de entrada do formulário, mas não há entrada no CAPTCHA." Isso é patético. jackiechanface.jpg
crazypotato
9

Aqui está o meu código sendo executado sem problemas no PHP:

Lado do Cliente:

<div class="g-recaptcha" data-sitekey="PUBLIC_KEY"></div>

Lado do servidor:

if (isset($_POST['g-recaptcha-response'])) {
    $captcha = $_POST['g-recaptcha-response'];
    $privatekey = "SECRET_KEY";
    $url = 'https://www.google.com/recaptcha/api/siteverify';
    $data = array(
        'secret' => $privatekey,
        'response' => $captcha,
        'remoteip' => $_SERVER['REMOTE_ADDR']
    );

    $curlConfig = array(
        CURLOPT_URL => $url,
        CURLOPT_POST => true,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_POSTFIELDS => $data
    );

    $ch = curl_init();
    curl_setopt_array($ch, $curlConfig);
    $response = curl_exec($ch);
    curl_close($ch);
}

$jsonResponse = json_decode($response);

if ($jsonResponse->success == "true")
    doSomething();
else
    doSomeOtherThing();

:)

ismaestro
fonte
você não deixou de fora algumas partes do código do lado do cliente / html? apenas perguntando, porque no seu código PHP você está verificando uma postagem chamada, g-recaptcha-responsemas nenhum elemento é definido no código do lado do cliente ... estou perdendo alguma coisa?
Benomatis 03/03
5

Eu vim aqui em minha pesquisa, não vi uma resposta e continuei pesquisando.

Após a minha pesquisa, essa janela ainda estava aberta, por isso estou atualizando esta postagem com minhas descobertas.

Aqui é onde você pode aprender sobre o reCAPTCHA :

http://scraping.pro/no-captcha-recaptcha-challenge/

Basicamente, você adiciona isso à sua página da web:

<script src="https://www.google.com/recaptcha/api.js" >;
<form method="post">
    <div class="g-recaptcha" data-sitekey="[site key issued by google]"></div>
    <input value="submit" type="submit" />
</form>

Para obter suas chaves reCAPTCHA , acesse este site do Google:

https://www.google.com/recaptcha/intro/index.html

Depois de usar as chaves usando o link acima, você poderá se aprofundar na codificação usando as seguintes informações do Google:

https://developers.google.com/recaptcha/

NOTA:

Na documentação do Google:

O script deve ser carregado usando o protocolo HTTPS e pode ser incluído em qualquer ponto da página sem restrição.

Aqui está um exemplo de como eu consegui funcionar:

<html>
<head>
    <title>Contact</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
    var onloadCallback = function () {
        grecaptcha.render('dvCaptcha', {
            'sitekey': '<%=ReCaptcha_Key %>',
            'callback': function (response) {
                $.ajax({
                    type: "POST",
                    url: "CS.aspx/VerifyCaptcha",
                    data: "{response: '" + response + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        var captchaResponse = jQuery.parseJSON(r.d);
                        if (captchaResponse.success) {
                            $("[id*=txtCaptcha]").val(captchaResponse.success);
                            $("[id*=lblAlarm]").hide();
                        } else {
                            $("[id*=txtCaptcha]").val("");
                            $("[id*=lblAlarm]").show();
                            var error = captchaResponse["error-codes"][0];
                            $("[id*=lblAlarm]").html("RECaptcha error. " + error);
                        }
                    }
                });
            }
        });
    };
    </script>
</head>
<body>
    <form action="?" method="POST">
        <div id="dvCaptcha" class="g-recaptcha" data-sitekey="[site key issued by google]"></div>
        <br />
        <asp:Button ID="btnSubmit" runat="Server" Text="Send" OnClick="btnSubmit_Click" />
        <asp:Label ID="lblAlarm" runat="server" ForeColor="Red"></asp:Label>
    </form>
</body>
</html>

Se você precisar validar no code-behind do ASP.NET, basta verificar se o controle "g-recaptcha-response" está preenchido:

protected static string ReCaptcha_Key, ReCaptcha_Secret;

protected void btnSubmit_Click(object sender, EventArgs e)
{
    if (!String.IsNullOrEmpty(Request.Form["g-recaptcha-response"]))
    {
        // other code
    } else
    {
       lblAlarm.Text = "reCAPTCHA failed.";
    }
}

Felizmente, alguns de vocês acham isso útil.

jp2code
fonte
3

Obrigado a todos por sua contribuição para este tópico, é ótimo ver tantas pessoas interessadas na nova ferramenta de recaptcha.

Não consegui encontrar uma implementação .net, por isso criei um controle simples de formulários da web, que você pode encontrar aqui https://github.com/pnmcosta/recaptchav2dotnet

Pedro Maia Costa
fonte