Jak działa to pole wyboru recaptcha i jak mogę z niego korzystać?

150

Niedawno zarejestrowałem się na stronie oneplusone https://account.oneplus.net/sign-up i zauważyłem to pole wyboru recaptcha

checkbox recaptcha

Jak to działa i jak mogę go używać w moich witrynach? O wiele lepiej niż te tajemnicze słowa / cyfry :)

Witryna recaptcha nie wspomina o żadnej nowej metodzie recaptcha ... https://www.google.com/recaptcha/intro/index.html

Pedro Maia Costa
źródło
14
Widziałem to dokładnie w tym samym miejscu i zastanawiałem się dokładnie to samo. Stawiam nagrodę, żeby zwrócić na siebie uwagę. Ja też jestem ciekawa.
Madara's Ghost
Może jest w fazie testów i nie jest jeszcze gotowy do wydania?
user3791372
1
Prostym sposobem na to jest to, że $('form input[type=submit]') .before('<div>Are you a human? <input type="checkbox" name="captcha" /></div>');boty nie zaznaczą pola, ponieważ nie jest to część formularza. jsfiddle.net/s6jkchmz
TylerH
1
Istnieje również metoda honeypot polegająca na umieszczeniu w formularzu nieodpartego pola wejściowego (np. „Komentarze”), a następnie ukrycie go za pomocą css / js. Jeśli dane są obecne, to nadawca jest botem. Użyłem tego i działa zaskakująco dobrze.
David H. Bennett
2
Do Twojej wiadomości: googleonlinesecurity.blogspot.hu/2014/12/...
Pred

Odpowiedzi:

30

To jest beta API dla reCAPTCHA. Zbieram to ze źródła ich JS API: https://www.google.com/recaptcha/api.js odwołując się do „API2”. Znalazłem też to: http://jaswsinc.com/recaptcha-ads/ Najwyraźniej zrobili oni wersję beta ich „bez CAPTCHA reCAPTCHA” tylko dla zaproszonych, więc ... Prawdopodobnie nie będziesz w stanie tego zrobić Twoja witryna, jeszcze. Nie mogę znaleźć żadnych informacji na temat włączania wersji beta, ale jeśli wyszukasz „No CAPTCHA reCAPTCHA beta”, zobaczysz wiele osób, które wspomniały o otrzymaniu e-maila od Google, aby mogli dołączyć.

Jeśli znajdziesz miejsce, w którym możesz dostać się do wersji beta, udostępnij to! W przeciwnym razie wygląda na to, że publiczne wydanie pojawi się w 2015 roku ...

Ian M.
źródło
1
Państwo mogli spróbować frankenstein coś razem używając gstatic.com/recaptcha/api2/r20140903161709/recaptcha__en.js jeśli wyszukać „g-reCAPTCHA”, „Nie jestem robotem” lub „pole” można znaleźć kod, który jest wdrażanie go tam.
Ian M
3
Wyciąg z e-maila:We expect to move all existing reCAPTCHA sites to the new API in 2015.
Timothy Zorn,
1
Oto post na blogu Google zapowiadający nową funkcję reCAPTCHA bez CAPTCHA: googleonlinesecurity.blogspot.com/2014/12/ ...
Nealvs
4
Gdzie to wyjaśnia, jak No CAPTCHA reCAPTCHAdziała nowa ?
Nikhil Girraj
5
@NikhilGirraj, jeśli chcesz wiedzieć, jak działa No CAPTCHA reCAPTCHA , odsyłam do tego posta .
Igor Savinkin
114

Ten wpis nie odpowiada na pierwotne pytanie, jednak pomaga wdrożyć podobne rozwiązanie. Jak powiedział @IanM, checkbox recaptcha jest w fazie beta i nie można go używać bez zaproszenia.

WAŻNA EDYCJA Google wprowadził nową reCAPTCHA

To jest CAPTCHA oparta na JavaScript.

Ponieważ większość robotów spamujących nie wykonuje JavaScript i nie może zidentyfikować korelacji między wyświetlanym tekstem a DOM lub wymaganymi działaniami, nie mogą kliknąć pola wyboru.

Zwróć uwagę, że w ogóle nie ma pola wyboru, jest to po prostu element div z pewnymi stylami CSS. Spamboty próbują wypełnić elementy wejściowe formularza, ale w CAPTCHA nie ma danych wejściowych. Znacznik wyboru to po prostu kolejny element div (klasa css).

Po kliknięciu pola żądanie AJAX powiadamia serwer, że kliknięto element div, a serwer przechowuje te informacje w tymczasowej pamięci (oznacza token: ten token został aktywowany przez człowieka). Kiedy wysyłasz formularz, ukryte pole wysyła token, który został aktywowany, a następnie, gdy serwer zweryfikuje informacje z formularza, rozpozna, że ​​token został aktywowany. Jeśli token nie zostanie aktywowany, formularz zostanie unieważniony.

Kroki w punktowanych punktach:

  • Wygeneruj unikalny identyfikator i dodaj go do formularza z ukrytymi danymi wejściowymi
  • Renderuj checkbox na stronie (bez użycia <input>elementu, ewentualnie używając <div>) i dodaj do niego wygenerowany wcześniej identyfikator (możesz skorzystać z data-*atrybutów html5 )
  • Gdy użytkownik kliknie to pole wyboru, wyślij żądanie AJAX do serwera i sprawdź poprawność CAPTCHA, jeśli jest poprawne, zaznacz je jako in use. (Pokaż wynik - identyfikator jest OK / nie OK - użytkownikowi)
  • Gdy użytkownik wysyła formularz, dane formularza zawierają identyfikator. Sprawdź jeszcze raz, powinno istnieć i powinno być w in usestanie.
  • Jeśli wszystkie walidacje zostaną zakończone, dane formularza są gotowe do użycia / przetworzenia

Możesz powiązać identyfikator z sesją użytkownika, adresem IP i / lub możesz użyć ograniczeń czasowych w celu zwiększenia bezpieczeństwa.

UWAGA Ten rodzaj CAPTCHA działa tylko wtedy, gdy włączony jest JavaScript!

UWAGA (edycja 1) Jak stwierdził @crazypotato, istnieje kilka narzędzi do automatyzacji, które mogą wykonywać JavaScript, narzędzia te mogą również wysyłać odpowiednie żądanie AJAX i uruchamiać zdarzenie Click w polu wyboru div.

UWAGA (edycja 2) Zwróć uwagę, że skrypt napisany do konkretnej witryny lub w celu złamania jednego typu captcha wcześniej czy później przejdzie. Nie ma ostatecznej ochrony, możesz tylko zmusić boty (lub ich twórców) do cięższej pracy.

UWAGA (edytuj 3) Kroki i opis w tej odpowiedzi zawierają tylko podstawowe informacje na temat tego typu captcha, zawsze musisz dodać dodatkowe walidacje i kroki bezpieczeństwa, aby uczynić go bezpieczniejszym. Na przykład Google noCaptcha systematycznie uruchamia standardową reCaptcha po 3 „kliknięciach div”.

Pred
źródło
4
Myślę, że pytanie dotyczy konkretnie „Jak włączyć tę funkcję z Google reCAPTCHA?” Jestem przekonany, że sam potrafię to zaimplementować, ale w ich przypadku nie jest to takie proste.
Madara's Ghost
Jeśli klikniesz Zgłoś problem u dołu strony Streetview, otrzymasz tę samą nową Recaptcha. Tam po raz pierwszy go zobaczyłem i znalazłem tę stronę SO, kiedy szukałem.
user2605793
1
Co uniemożliwiłoby botowi wysłanie tego żądania ajax? Gdyby wszyscy (lub częściowo duża witryna) wdrożyli takie CAPTCHA, z pewnością i tak zostałoby to wykorzystane. Cloudflare ma podobny system wykrywania botów, który wydaje się działać bez konieczności wykonywania jakichkolwiek czynności przez użytkownika.
Steen Schütt
Po pierwsze, całkowicie zgadzam się z twoim komentarzem i tak, bot napisany bezpośrednio w celu wykorzystania jednej strony przejdzie (i to jest prawdą dla każdego rodzaju capthas). Zacząłem most botspisać od i nie all bots. Istnieją również rozwiązania, w których oparty na obrazie przerywacz captcha po prostu wysyła obraz do oprogramowania i ludzi w postaciach (a pracownikowi płaci się liczba pomyślnych postów). Jak byś temu zapobiec? :)
Pred
1
@Pred "Spamboty próbują wypełnić dane wejściowe formularza, ale w CAPTCHA nie ma danych wejściowych." To żałosne. jackiechanface.jpg
crazypotato
9

Oto mój kod działający bez problemu w PHP:

Strona klienta:

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

Po stronie serwera:

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
źródło
czy nie pominąłeś niektórych części kodu HTML / klienta po stronie klienta? tylko pytam, ponieważ w kodzie PHP sprawdzasz post o nazwie, g-recaptcha-responseale żaden taki element nie jest zdefiniowany w kodzie po stronie klienta ... czy czegoś mi brakuje?
benomatis
5

Przyszedłem tutaj w poszukiwaniu, nie widziałem odpowiedzi, więc szukałem dalej.

Po moich poszukiwaniach to okno było nadal otwarte, więc aktualizuję ten post o moje ustalenia.

Tutaj możesz dowiedzieć się o reCAPTCHA :

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

Zasadniczo jednak dodajesz to do swojej strony internetowej:

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

Aby uzyskać klucze reCAPTCHA , przejdź do tej witryny Google:

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

Gdy masz już klucze, korzystając z powyższego linku, możesz dokładniej zapoznać się z ich kodowaniem, korzystając z następujących informacji Google:

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

UWAGA:

Z dokumentacji Google:

Skrypt należy załadować za pomocą protokołu HTTPS i można go dołączyć z dowolnego miejsca na stronie bez ograniczeń.

Oto przykład, jak sprawiłem, że to działa:

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

Jeśli chcesz sprawdzić poprawność w kodzie ASP.NET, po prostu sprawdź, czy kontrolka „g-recaptcha-response” jest wypełniona:

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.";
    }
}

Miejmy nadzieję, że niektórzy z was uznają to za przydatne.

jp2code
źródło
3

Dziękuję wszystkim za wkład w ten wątek, wspaniale jest widzieć tak wiele osób zainteresowanych nowym narzędziem recaptcha.

Nie mogłem znaleźć implementacji .net, więc stworzyłem prostą kontrolkę formularzy internetowych, którą możesz znaleźć tutaj https://github.com/pnmcosta/recaptchav2dotnet

Pedro Maia Costa
źródło