Зупиніть боти за допомогою Google ReCAPTCHA

Зберігання ботів завжди є цифровою грою - На жаль, наявність простих у використанні бібліотеки машинного навчання, зроблене розтріскування багатьох класичних типів CAPTCHA Simple. Google виступає на передньому плані ботової бурі - адже щось існує лише, якщо його можна знайти (помітно) у індексах великого G.

Завдяки цьому інженери Google присвячують значні обсяги зусиль для проектування анти-ботних систем та рішень. Вони надаються третім особам через продукт, який називається reCAPTCHA, який ми будемо разом під час наступних кроків. Для отримання додаткових інструментів, не пов'язаних з ботами, див Інструменти для веб-дизайну пост.

Проте, перш ніж почати роботу, слід очистити кілька основних речей. Перш за все: зберігання ботів завжди є серверною грою. Перевірка повернення вартості вашого боротьби з клієнтом є ідіотство. Зловмисник може проаналізувати вихідний код або просто працювати навколо нього шляхом виправлення зворотної перевірки.

По-друге, майте на увазі, що не всі боти створюються рівними. Наприклад, заблокуючи GoogleBot, призводить до вашого веб-сайту, який не індексується. Подібні проблеми можуть виникати з іншими галузями-специфічними ботами, які часто більш добре, ніж шкода. Нарешті, боти можуть бути меншим злом у деяких випадках - коли трафік - це все, що вам потрібно, бот клацає, щоб бути лише клацанням клік.

• 8 дивовижні Google API (і як їх використовувати)

01. Зареєструватися!

Google зберігає близькі очі на reCAPTCHA користувачів. Голова тут та використовуйте свій обліковий запис Google, щоб увійти. Додати "Localhost" на додаток до улюбленого домену під доменами. Виберіть "Я не робот" прапорець тип, як це найвідоміший анти-бот.

02. Магазин сайтів та ключів сервера

Постійність Google Rewards у роботі через процес налаштування, відображення сервера та ключа сайту. Поки останній може бути розділений третіми сторонами, переконайтеся, що секретний ключ ніколи не залишає обмеження вашого серверного середовища.

03. Зрозуміти перевірку сайту

Google використовує варіацію процесу відгуку, щоб забезпечити цілісність результату. Приклади CAPTCHA повертають криптографічну цінність, яку сервер повинен "увімкнути" до системи верифікації, розміщена BIG G - якщо результати виявляються дійсними, правильна відповідь HTTP повертається до спини логіки.

04. Налаштування Express.js

Важливо, щоб демонструвати розчин повороту, що показує весь потік автентифікації. Завдяки цьому ми повинні почати з "сервером" сортів - Express JS була частою темою нещодавно, тому розгорнути його до новоствореного проектного скелету.

 Tamhan @ Tamhan-ThinkPad: ~ / NodeSpace / Nodeverify $
npm init --y
Написав до /home/tamhan/nodespace/nodeverify/package.json:
  . . .
tamhan @ tamhan-thinkpad: ~ / nodepace / nodeverify $
npm встановлення body-parser express request --save
. . .
+ [email protected]
+ [email protected]
+ [email protected] 

05. Підготуйтеся до служби

Завантаження відомого "Я не робот" прапорець потрібний файл HTML. Враховуючи, що це зразок, що демонструє потоки взаємодії, починається з статичним документом, що містить показник, який показав, що супроводжує цей крок.

 & lt; html & gt;
& lt; head & gt;
& lt; title & gt; recaptcha demo: проста сторінка
& 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; форма дії = "?" метод = "post" & gt;
& lt; div class = "g-recaptcha" data-staykey = "your_site_key" & gt; & lt; / div & gt;
& lt; br / & gt;
& lt; Вхідний тип = "Надіслати" value = "Надіслати" & gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt; 

06. Зрозумійте і випробування

Google надає файл API, який містить логіку CAPTCHA. Коли завантажується API.JS, код, що міститься в ньому, аналізує DOM і замінює будь-яку & lt; div & gt; теги, що містять правильний класовий тег. & lt; надіслати & gt; Теги залишаються окремо, як це написання. У будь-якому випадку, запустіть код у браузері вибору, щоб побачити результати, показані вище.

07. Завантажте деякі елементи

Створення ланцюга доставки в Express.js вимагає трохи інтелекту. Один дійсно корисний помічник - це бодурник. Коли вбудований у робочий процес рендеринга, окремі поля, повернуті з сервера, можна отримати за допомогою об'єктно-орієнтованих візерунків, що значно спрощують їх.

 Var Express = вимагає ("Express");
var bodyparser = вимагає ("body-parser");
var request = потрібно ("запит");

var myapp = express ();

myApp.use (bodyparser.json ());
MyApp.use (bodyparser.ourlencoded ({endended: true})); 

08. Підготуйтеся до перевірки ...

Колекс Google робить свою магію у фоновому режимі - коли це зроблено, нове поле називається g-recaptcha-відповідь додається до атрибутів форми. Ці дані повинні бути відправлені до серверів Google для перевірки. Довгий рядок у коді, що супроводжує цей крок, буде замінено за допомогою одного Google, призначеного вам.

 MyApp.post ("/ Tamstest", функція (запит, відповідь) {
var recaptcha_url = "https://www.google.com/recaptcha/api/siteverify?";
recaptcha_url + = "secret = 6lewmzguaaaaairsb2gv5akkx2cwyfrmzrmd7ws & amp;";
recaptcha_url + = "відповідь =" + request.body ["g-recaptcha-відповідь"] + "& amp;";
recaptcha_url + = "Remoteip =" + запит.Connection.remoateadress; 

09. ... і дізнайтеся у серверах Google

Наступний акт передбачає вистрілити URL-адресу на сервер. Це здійснюється через традиційний запит JSON заснований на адресі, створеній на попередньому кроці. Його результати потім аналізуються - якщо викидається помилка, відмова буде повернута до програми клієнта.

 Запит (recaptcha_url, функція (помилка,
Відповідно, тіло) {
тіло = json.parse (тіло);
якщо (body.success! == невизначене & amp; & amp;! Тіло.
успіх) {
Return Reffect.Send ({"повідомлення":
"Перевірка CAPTCHA не вдалося"});
}
відповідь. Наприклад, ("тип вмісту",
"Заява / JSON"). Надіслати (тіло);
});
}); 

10. Встановіть його

HTTP-сервер Express.js повинен бути розв'язаний. Це найкраще виконати за допомогою програми.Listen Structure. Майте на увазі, що порти з числом, що менше 1024, обмежуються кореневим користувачем на унікальних операційних системах - 3000, тому безпечна ставка.

 Var Server = MyApp.listen (3000, функція () {
Console.Log ("Слухати" + сервер.
адреса (). Порт);
}); 

11. Налаштуйте форму

Нарешті, наша форма повинна бути об'єднана з локальним сервером, що працює всередині вузла. Це найкраще виконати, регулюючи рядок дій - обов'язково вказуйте ціль до дійсного домену, особливо якщо ви не використовуєте місцевий сервер Express.JS.

 & lt; body & gt;
& lt; форма дії = "http: // localhost: 3000 / tamstest" method = "post" & gt;
& lt; div class = "g-recaptcha" data-staykey = "6lewmzguaaaaaepswpvp6hlulnjxa_scwtwhyhge" & gt; & lt; / div & gt;
& lt; br / & gt; 

12. Принесіть його!

Тестування нашої системи клієнт-серверу вимагає двох серверів через перевірку походження Google. На щастя, Python забезпечує швидкий HTTP-сервер - використовуйте його для надання index.htm, тоді як express.js отримує зарахований до виконання перевірки повернутого відповіді.

 Tamhan @ Tamhan-ThinkPad: ~ / NodeSpace / Nodeverify $
node index.js
Прослуховування 3000
tamhan @ tamhan-thinkpad: ~ / nodepace / nodeverify $
python3 -m http.server
Обслуговування HTTP на 0.0.0.0 порт 8000 ... 

13. Виконайте сухість

Під час запуску перевірте прапорець і виконайте будь-які виклики, великий G може кинути у вас. Сервер, як правило, не вимагає багато з точки зору перевірки, і надходять до відображення вмісту, показаного вище.

14. Вимкніть кнопку "Надіслати"

Приклади Google ігнорують кнопку відправки клієнта, оскільки зловмисник завжди може зробити його знову з'являтися з деяким JavaScript. При відключенні ручки подання по відношенню до CAPTCHA не покращує безпеку, він має позитивні наслідки для зручності використання. Давайте почнемо, вимкнувши кнопку після запуску.

& lt; форма дії = "http: // localhost: 3000 / tamstest" method = "post" & gt;
& lt; div class = "g-recaptcha" data-staykey = "6lewmzguaaaaaepswpvp6hlulnjxa_scwtwhyhge" & gt; & lt; / div & gt;
& lt; br / & gt;
& lt; тип введення = "Надіслати" value = "Надіслати" відключення & gt;
& lt; / form & gt; 

15. Ручка CAPTCHA Події

Наступна робота, обробник подій повинен бути доданий. API CAPTCHA Google викликає це, коли користувач пройшов спробу перевірки з точки зору клієнта.

 & lt; html & gt;
& lt; head & gt; . . .
& lt; сценарій & gt;
функція ondcfired (значення) {
console.log (значення);
}
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; форми дії = "http: // localhost: 3000 /
tamstest "method =" post "& gt;
& lt; div class = "g-recaptcha" data-staykey = "6lewmzguaaaaaepswpvp6hlulnjxa_skwtwhyhge" data-callback =
"ondcfired" & gt; & lt; / div & gt; 

16. Екскурсія: Динамічний рендеринг CAPTCHA

Google не обмежує розробників до нерест-recaptcha елементів під час завантаження сторінки. Точний рендеринг () Метод, знайдений у API RECAPTCHA, дозволяє призначити один або декілька & lt; div & gt; Теги на веб-сайті, які повинні бути перетворені в віджети reCAPTCHA.

 var mycallback = функція (val) {консоль.
log (val); };
grecaptcha.render (
document.getlelementsbyid ('MY-ID'),
{
Callback: MyCallback,
SiteKey: MySitekey
}); 

17. Увімкнути кнопку, якщо потрібно ...

З цим залишається одна головна проблема. Кнопка "Надіслати" повинна бути повторно включена, коли подія кліків, надана reCAPTCHA, прибуває до нашого коду програми. Завантаження jQuery у такий простий приклад є непотрібним, тому замість цього поверніть до деякого простого javascript.

 & lt; script & gt;
функція ondcfired (значення) {
document.getleementByid
("Кнопка"). Вимкнено = false;
}
& lt; / script & gt; 

 & lt; Вхідний тип = "Надіслати" id = "Кнопка"
value = "Надіслати" відключення & gt; 

18. ... і очистити після нас

Google не може зберігати дані відповіді назавжди. Через це, час перевірки досить швидко - за замовчуванням, наша програма не дізнається про це. На щастя, API містить додаткове поле, яке можна використовувати для повідоминня.

 Функція ondcexpired (значення) {
document.getleementbyid ("кнопка").
вимкнено = true;
} 

 & lt; div class = "g-recaptcha" data-staykey = "6lewmzguaaaaepswpvp6hlulnjxa_skwtwhyhge"
Data-Callback = "Ondcfired" Data-Callback = "OndCexpired" & GT; & lt; / div & gt; 

19. Використовуйте додаткові атрибути

Голова тут Щоб знайти список властивостей, включених до API JavaScript. Вони дозволяють налаштувати різні поведінки - наприклад, віджет reCAPTCHA також може бути наданий у нічному кольоровій схемі!

20. Робота прозоро ...

Google нещодавно представила третю версію API RECAPTCHA, яка не вимагає явного взаємодії користувачів. Замість цього ви просто завантажуєте його під час ініціалізації сторінки - код автоматично відслідковує поведінку користувача, що працює на веб-сайті.

 & lt; script src = "https://www.google.com/recaptcha/api.js?render=recaptcha_site_key" & gt; & lt; / script & gt;
& lt; сценарій & gt;
grecaptcha.ready (функція () {
grecaptcha.execute ('recaptcha_site_key',
{ACTION: "HOMEPAGE"}).
потім (функція (маркер) {
...
});
});
& lt; / script & gt; 

21. ... і надайте додаткову інформацію

Плагін прибутків від подальших даних про дія, яка виконується на веб-сайті. Фрагмент, що супроводжує цей крок, оголосить, що користувач зараз відвідує вашу домашню сторінку. Більш детальну інформацію про API можна знайти в документації.

 & lt; script & gt;
grecaptcha.ready (функція () {
grecaptcha.execute ('recaptcha_site_key',
{ACTION: "HOMEPage"});
});
& lt; / script & gt; 

Приєднуйтесь до нас у March Mix, ShoreRition 26 вересня для створення CSS, проведення конференції для веб-дизайнерів, принесених до вас творчим блоком, мережею та веб-дизайнером. Забронюйте свій ранній квиток на птахів до 15 серпня www.generateconf.com .

Ця стаття була опублікована у випуску 287 журналу Creative Web Design Веб-дизайнер . Купити проблему 287 тут або Підписатися на веб-дизайнер тут .

Пов'язані статті:

• 8 основних секретів безпеки WordPress
• Як кодепен зробив себе безпечним
• 9 Поради щодо безпеки для захисту вашого веб-сайту від хакерів