Zatrzymaj boty z Google Recaptcha

Sep 16, 2025
Jak
Stop the bots with Google reCAPTCHA
(Kredyt obrazu: przyszłość)

Utrzymywanie botów zawsze jest gra numeryczna - niestety, dostępność łatwych w użyciu bibliotek uczenia maszynowego uczyniły pękanie wielu klasycznych typów CAPTCHA proste. Google stoi na czele burzy bottingu - w końcu coś tylko istnieje tylko wtedy, gdy można go znaleźć (widocznie) w indeksie Big G.

Ze względu na to, inżynierowie Google poświęcają znaczne ilości wysiłku w projektowanie systemów i rozwiązań anty-botów. Są one udostępnione osobom trzecim za pośrednictwem produktu o nazwie RECAPTCHA, które przejdziemy razem podczas następujących kroków. Aby uzyskać więcej narzędzi niezwiązanych z botami, zobacz nasz Narzędzia do projektowania stron internetowych. Poczta.

Przed rozpoczęciem, jednak należy usunąć kilka podstawowych rzeczy. Przede wszystkim: Utrzymywanie botów jest zawsze gra po stronie serwera. Sprawdzanie wartości powrotnych pomiaru anty-botu na kliencie jest idiotyczne. Atakujący może przeanalizować kod źródłowy lub po prostu pracować wokół niego, łatając walidację powrotną.

Wtórnie pamiętaj, że nie wszystkie boty są tworzone równe. Na przykład blokowanie GoogleBot prowadzi do Twojej witryny, która już nie jest indeksowana. Podobne problemy mogą wystąpić w przypadku innych botów specyficznych dla branży, które często bardziej dobre niż szkoda. W końcu boty mogą być mniejszym złem w niektórych przypadkach - gdy ruch jest wszystkim potrzebny, bot kliknie okazuje się tylko kliknięciem.

  • 8 Amazing Google API (i jak ich używać)

01. Zarejestruj się Go-Go!

Stop the bots with Google reCAPTCHA: Sign-up a go-go!

Użyj swojego konta Google, aby zalogować się do reCAPTCHA (Kredyt obrazu: Tam Hanna)

Google zapewnia bliskie oko na użytkowników recaptcha. Głowa tutaj I użyj konta Google, aby się zalogować. Dodaj "LocalHost" oprócz ulubionej domeny w dziedzinach. Wybierz typ pola wyboru "Nie jestem robotem", ponieważ jest to najbardziej znany środek anty-bota.

02. Sklep internetowy i klucze serwera

Trwałość Google Rewards w pracy przez proces konfiguracji, wyświetlając serwer i klucz witryny. Podczas gdy ta ostatnia może być udostępniona osobom trzecim, upewnij się, że tajny klucz nigdy nie pozostawia koncernów środowiska serwera.

03. Zrozumienie weryfikacji witryny

Google wykorzystuje odmianę procesu odpowiedzi na wyzwanie, aby zapewnić integralność wynikową. Instancje CAPTCHA zwróć wartość kryptograficzną, którą serwer ma "włączyć" do systemu weryfikacyjnego hostowanego przez Big G - jeśli wyniki okazują się poprawne, poprawna odpowiedź HTTP jest zwracana do logiki tylnej końcówki.

04. Ustaw Express.js

Ważne jest, aby zademonstrować rozwiązanie do klucza obrysowego pokazującego cały przepływ uwierzytelniania. Dzięki temu musimy rozpocząć się z "serwerem" sortów - Express JS był ostatnio częstym tematem, więc wdrożyć go do nowo utworzonego szkieletu projektu. 

 Tamhan @ Tamhan-ThinkPad: ~ / Godespace / Nodeverify $
NPM init -y.
Napisał do /home/tamhan/nodespace/nodeverify/package.json:
  . . .
Tamhan @ Tamhan-ThinkPad: ~ / Godespace / Nodeverify $
NPM Install Body-Parser Express Request --Save
. . .
+ ciał[email protected].
+ proś[email protected].
+ [email protected]

05. Przygotuj się do służenia

Ładowanie dobrze znanego "I nie jestem robotem" wymaga pliku HTML. Biorąc pod uwagę, że jest to próbka demonstrująca przepływ interakcji, rozpocznij z dokumentem statycznym zawierającym wykazujący znak towarowy towarzyszący temu etapowi. 

 HTML & GT;
& lt; Head & GT;
& LT; tytułowy i GT; Recaptcha Demo: Prosta strona
& lt; / title & gt;
& LT; Script SRC = "https://www.google.com/recaptcha/api.js" async Defer & GT; & LT; / Script & GT;
& LT; / Head & GT;
& lt; body & gt;
& LT; Form Action = "?" Metoda = "Post" & GT;
& lt; div Class = "G-Recaptcha" Data-SiteKeyey = "Your_site_key" & GT; & LT;
& lt; br / & gt;
& LT; Typ wejścia = "Prześlij" wartość = "Prześlij" & GT;
& LT; / Form & GT;
& lt; / body & gt;
& lt; / html & gt;

06. Rozumiem i testuj

Stop the bots with Google reCAPTCHA: Understand and test

Uruchom kod, aby zobaczyć te wyniki (Kredyt obrazu: Tam Hanna)

Google zapewnia plik API zawierający logikę CAPTCHA. Gdy API.JS jest załadowany, kod zawarty w IT analizuje dom i zastępuje się & lt; div & gt; Tagi zawierające poprawną tagę klasy. Przyłożono; Tagi są pozostawione samodzielnie jak na tym pisaniu. Tak czy inaczej, uruchom kod w wyborze przeglądarki, aby zobaczyć wyniki pokazane powyżej.

07. Załaduj niektóre elementy

Tworzenie łańcucha dostaw w Express.js wymaga odrobiny inteligencji. Jeden naprawdę przydatny pomocnik jest bodyparser. Po wbudowanym w przepływ pracy renderowania poszczególne pola zwracane z serwera mogą być dostępne za pomocą wzorców projektu zorientowanych na obiekty, które znacznie upraszczają ich obsługę. 

 var Express = wymagać ("Express");
var bodyparser = wymagać ("body-parser");
var prośba = wymagać ("żądanie");

var myApp = Express ();

myApp.use (bodyparser.json ());
myApp.use (bodyparser.urlended ({przedłużony: true}));

08. Przygotuj się do weryfikacji ...

Pole wyboru Google wykonuje swoją magię w tle - po zakończeniu, nowe pole G-Recaptcha-Response jest dodawany do atrybutów formularzy. Dane te muszą być wysyłane do serwerów Google do weryfikacji. Długi ciąg w kodzie towarzyszący temu kroku zostanie zastąpiony przez ten Google przypisany do Ciebie. 

 myApp.post ("/ Tamstest", funkcja (żądanie, odpowiedź) {
var recaptcha_url = "https://www.google.com/recaptcha/api/siify?";
Recaptcha_url + = "Secret = 6lewmzguaaaaersB2Gv5AKKX2CwyFulkZRMD7WS & AMP;
Recaptcha_url + = "Odpowiedź =" + żądanie.body ["G-Recaptcha-Response"] + "& AMP;";
RECAPTCHA_URL + = "DUMERIP =" + żądanie.Connection.Remoteldress;

09. ... i zapytaj o serwery Google

Następny akt polega na wystrzeleniu adresu URL na serwer. Osiąga się to poprzez tradycyjne żądanie JSON oparte na adresie utworzonym w poprzednim kroku. Jego wyniki są następnie analizowane - jeśli zostanie rzucony błąd, awaria zostanie zwrócona do aplikacji po stronie klienta. 

 Żądanie (recaptcha_url, funkcja (błąd,
Odpad, ciało) {
body = json.parse (ciało);
Jeśli (body.success! == niezdefiniowany & amp; & amp;! ciało.
sukces) {
Return Response.Send ({"Wiadomość":
"Walidacja CAPTCHA nie powiodła się"});
}
odpowiedź.header ("Typ treści",
"Aplikacja / JSON"). Wyślij (ciało);
});
});

10. Ustaw go luźne

Serwer HTTP Express.js musi być rozpętany. Najlepiej jest to osiągnąć za pomocą struktury App.listen. Należy pamiętać, że porty z liczbą mniejszą niż 1024 są ograniczone do użytkownika korzeni w systemach operacyjnych Unixoid - 3000 jest zatem bezpiecznym zakładem. 

 Var Server = myApp.listen (3000, funkcja () {
Console.log ("Słuchanie na" + serwer.
adres (). Port);
});

11. Dostosuj formularz

Wreszcie, nasz formularz należy umieścić w kontakcie z lokalnym serwerem biegnącym w węźle. Najlepiej jest to osiągnąć, dostosowując ciąg akcji - upewnij się, że chcesz wskazać cel do prawidłowej domeny, zwłaszcza jeśli nie używasz lokalnego serwera Express.js. 

 Ciało;
& LT; Form Action = "http: // localhost: 3000 / Tamstest" Metoda = "Post" & GT;
& LT; LIV Class = "G-Recaptcha" Data-SiteKey = "6lewmzguaaaaApswPvp6hlulnjxa_scwtHyhge" & GT;
& lt; br / & gt;

12. Przynieś!

Stop the bots with Google reCAPTCHA: Bring it up!

Użyj Szybkiego serwera HTTP Pythona, aby przetestować system serwera klienta (Kredyt obrazu: Tam Hanna)

Testowanie naszego systemu klient-serwer wymaga dwóch serwerów z powodu weryfikacji Pochodzenia Google. Na szczęście Python zapewnia szybki serwer HTTP - użyj go do świadczenia index.htm, podczas gdy Express.js zostaje zaciągnięty do wykonywania weryfikacji zwracanej odpowiedzi. 

 Tamhan @ Tamhan-ThinkPad: ~ / Godespace / Nodeverify $
Węzeł index.js.
Słuchanie 3000.
Tamhan @ Tamhan-ThinkPad: ~ / Godespace / Nodeverify $
Python3 -m http.server.
Serwowanie HTTP na 0.0.0.0 Port 8000 ...

13. Wykonaj suchy bieg

Stop the bots with Google reCAPTCHA: Perform a dry run

Daj swojemu CAPTCHA test testowy (Kredyt obrazu: Tam Hanna)

Po uruchomieniu zaznacz pole wyboru i spełnij wszelkie wyzwania Big G może rzucić na ciebie. Serwer zwykle nie wymaga zbyt wiele pod względem weryfikacji i przechodzi do wyświetlania zawartości pokazanej powyżej.

14. Wyłącz przycisk Prześlij

Stop the bots with Google reCAPTCHA: Disable the submit button

Wyłączenie przycisku przesyłania na starcie jest dobre dla użyteczności (Kredyt obrazu: Tam Hanna)

Przykłady Google ignorują przycisk Prześlij po stronie klienta, ponieważ atakujący może zawsze sprawić, że pojawi się ponownie z jakimś JavaScript. Podczas wyłączania pokrętła w odniesieniu do CAPTCHA nie poprawia bezpieczeństwa, ma pozytywny wpływ na użyteczność. Zacznijmy, wyłączając przycisk po uruchomieniu. 

& LT; Form Action = "http: // localhost: 3000 / Tamstest" Metoda = "Post" & GT;
& LT; LIV Class = "G-Recaptcha" Data-SiteKey = "6lewmzguaaaaApswPvp6hlulnjxa_scwtHyhge" & GT;
& lt; br / & gt;
& LT; Typ wejścia = "Prześlij" Wartość = "Prześlij" Wyłączone i GT;
& LT; / Form & GT;

15. Uchwyt wydarzeń CAPTCHA

Stop the bots with Google reCAPTCHA: Handle CAPTCHA events

Teraz dodaj obsługę zdarzeń (Kredyt obrazu: Tam Hanna)

Dalej należy dodać przewodnik zdarzeń. API CAPTCHA Google przywołuje go, gdy użytkownik zdał próbę weryfikacji z punktu widzenia po stronie klienta. 

 HTML & GT;
& lt; Head & GT; . . .
& lt; script & gt;
Funkcja ondcfired (wartość) {
konsola.log (wartość);
}
& lt; / script & gt;
& LT; / Head & GT;
& lt; body & gt;
& LT; Form Action = "http: // localhost: 3000 /
Tamstest "Metoda =" Post "& GT;
& lt; div Class = "G-Recaptcha" Data-SiteKey = "6lewmzguaaaaEpswPvp6hlulnjxa_scwtChyhge" Data-Callback =
"Ondcfired" & lt; / Div & GT;

16. Wycieczka: Dynamiczne renderowanie CAPTCHA

Google nie ogranicza programistów do tarła elementów reCAPTCHA podczas obciążenia strony. The. renderowanie() Metoda znaleziona w API reCAPTCHA umożliwia wyznaczenie jednego lub więcej & lt; div & gt; Tagi na stronie internetowej, które należy przekształcić w widżety reCAPTCHA. 

 var mycallback = funkcja (Val) {konsola.
log (Val); };
Grecaptcha.Render (
Document.getelementsByid ('My-ID'),
{
Callback: myCallback,
SiteKey: Mysiteye.
});

17. Włącz przycisk W razie potrzeby ...

Z tym pozostaje jeden główny problem. Przycisk przesyłania musi być ponownie włączony, gdy zdarzenie Click dostarczone przez Recaptcha przybywa do naszego kodu aplikacji. Ładowanie jQuery do takiego prostego przykładu jest niepotrzebne, więc wraca do niektórych zwykłego javascriptu. 

 script & gt;
Funkcja ondcfired (wartość) {
Document.getElementByid.
("Przycisk"). Wyłączone = false;
}
& lt; / script & gt; 
 Typ wejścia = "Prześlij" ID = "przycisk"
Wartość = "Prześlij" Wyłączone i GT;

18. ... i posprzątać po nas

Google nie może przechowywać danych odpowiedzi na zawsze. Ze względu na to, weryfikacja razy dość szybko - domyślnie nasz program nie dowie się o tym. Na szczęście API zawiera dodatkowe pole, które można wykorzystać do powiadamiania. 

 Funkcja OndcexPired (wartość) {
Document.getElementByid ("Przycisk").
wyłączone = prawdziwe;
}

19. Użyj dodatkowych atrybutów

Stop the bots with Google reCAPTCHA: Handle CAPTCHA events

Jest mnóstwo użytecznych właściwości do gry (Kredyt obrazu: Tam Hanna)

Głowa tutaj Aby znaleźć listę nieruchomości zawartych w API JavaScript. Pozwalają dostosować różne zachowania - na przykład widżet reCAPTCHA może być również renderowany w nocnym schemacie kolorów!

20. Pracuj przejrzysty ...

Google wprowadzono ostatnio trzecią wersję API reCAPTCHA, która nie wymaga wyraźnej interakcji użytkownika. Zamiast tego po prostu załadujesz go podczas inicjalizacji strony - kod automatycznie monitoruje zachowanie użytkownika biegającego na witrynie sieci Web. 

 ° C.
& lt; script & gt;
Grecaptcha.Ready (funkcja () {
Grecaptcha.execute ("Recaptcha_site_key",
{Akcja: "Strona główna"}).
Następnie (funkcja (token) {
...
});
});
& lt; / script & gt;

21. ... i podaj dodatkowe informacje

Zyski wtykowe z dalszych danych o działaniu wykonywanej na stronie internetowej. Fragment towarzyszący temu kroku ogłosi, że użytkownik odwiedza obecnie Twoją stronę główną. Więcej informacji na temat interfejsu API można znaleźć w dokumentacji. 

 script & gt;
Grecaptcha.Ready (funkcja () {
Grecaptcha.execute ("Recaptcha_site_key",
{Akcja: "Strona główna"});
});
& lt; / script & gt;

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

(Kredyt obrazu: przyszłość)

Dołącz do nas w Rich Mix, Shoreditch 26 września do generowania CSS, konferencję na zamówienie dla projektantów stron internetowych przyniósł do CEATE Creative Bloq, Net and Web Designer. Zarezerwuj bilet wczesnego ptaka przed 15 sierpnia www.generateconf.com. .

Ten artykuł został pierwotnie opublikowany w wydaniu 287 kreatywnego magazynu projektowania stron internetowych Projektant stron internetowych . Kup problem 287 tutaj lub Subskrybuj tutaj projektant stron internetowych .

Powiązane artykuły:

  • 8 Security Security WordPress
  • Jak włączył się do Codepen
  • 9 Wskazówki bezpieczeństwa Aby chronić swoją witrynę od hakerów

Jak - Najpopularniejsze artykuły

8 Amazing New Graphic Design Tutorials

Jak Sep 16, 2025

Niezależnie od tego, czy rozpoczynasz się w projekcie graficznym lub doświadczonym pro, zawsze jest coś nowego, aby dowiedzieć się, czy chcesz zostać wyprzedaż gry. Projekt graficzny ..

Jak narysować znak w piórze i atramentowi

Jak Sep 16, 2025

Jako artysta w studio gier zapomniałem najbardziej tradycyjnych mediów, ale atrament zawsze zwraca mnie do mnie. Po dniu wpatry..

Jak zrobić mandelbulb

Jak Sep 16, 2025

Mandelbulb jest trójwymiarowym fraktalem, który staje się coraz bardziej popularny 3d art. i vfx. W tym artykul..

Jak przygotować grafikę Illustratora dla po efektach

Jak Sep 16, 2025

Nie mogę ci mówić, ile Adobe Illustrator. Pliki zostały mi przekazane do animacji, która wyraźnie nie była ..

Narysuj portret ołówkiem psa

Jak Sep 16, 2025

Podczas rysowania portretów zwierząt domowych nie musisz tylko wiedzieć Jak rysować zwierzęta : Zadaniem jest..

10 Złote zasady reagowania SVG

Jak Sep 16, 2025

Wiele zalet SVG - w tym nieskończenie skalowalne obrazy wektorowe, małe rozmiary plików i bezpośredniej integracji z domem - ..

Jak zrobić renderujące renderowanie samochodów sportowych

Jak Sep 16, 2025

W ciągu ostatnich lat wyhonowałem moje umiejętności w oświetleniu i renderowaniu, a także niektóre inne techniki z różny..

Jak uzyskać więcej z GIFS

Jak Sep 16, 2025

Gify pracują w bezszwowych cyklach, które Rebecca Mock. opisuje jako "doskonała pętla". Ta pętla powinna idealnie wymazać..

Kategorie