Яндекс капча: попытки установки для самых джун’ых
meta-data
Это моя первая статья, так что просьба сильно яро не минусовать, а то расстроюсь и вообще ничего рассказывать не буду. Это не шутка. Спасибо за сочувствие, начнём понемногу.
Да ладно, шучу я
Данная статья сделана вовсе не для кармы, а для помощи людям, которые столкнулись с теми же проблемами, с которыми когда-то столкнулся и я. А потому, читатели должны чётко понимать, с материалом какого уровня они здесь имеют дело. И если этот текст не достаточно хорош или, тем более, вреден, беспощадно минусуйте, просто желательно при этом обосновывать, что именно не так и как нужно было сделать на самом деле
И так, поехали!
Яндекс капча: попытки установки для самых джун«ых.
Для чего?
Почему вдруг «молодо-зелено» учит «плавали-знаем» тому, что и так описано в оф.документации? Дело в том, что эта документация не сильно newbie‑friendly. И если вы никогда до этого не ставили на сайт капчу, то имеется ненулевой шанс, что и не поставите, не прочитав данное «крео». Документация написана довольно сносно, но не для тех, кто здесь впервые. Не хватает основы — концепции (хотя раздел концепций в документации имеется…).
Возможно, кому-то покажется, что данный материал просто пересказывает официальные инструкции своими словами, но это не так. Дока безжалостна к новичкам, которые просто не понимают, что скрывается за «умными» словами. Я же здесь попытался устранить это досадное упущение.
Статья поможет избавить любопытный ум от множества пугающих вопросов, которые невозбранно поселяются в утомлённой голове при попытке понять процесс, который издалека кажется таким простым, но вскоре выясняется, что он таковым лишь притворяется.
Здесь нет примеров кода, но он вам и не понадобится: понимая концепцию работы и прочитав документации, вы сможете самостоятельно накодить нужное решение для своей конкретной ситуации.
И так, начнём.
Пара слов о тех самых «квадратиках с гидрантами»
Придётся поговорить о том, что такое капча. Нет я серьёзно! Ещё несколько лет назад этот абзац никто не стал бы читать, так как все испытывали фрустрацию от непонимания нужно ли тыкать квадратик, на который едва попало два пикселя гидранта или он тут лишний. Но сегодня мир защиты сайтов представлен широким ассортиментом капчений под любой нескромный повод и диаметр проблемы. И размытые картинки, и едва читаемый текст, и ползунки, и чёртовы светофоры с гидрантами, и даже простой чек-бокс с вопросом «Ты не робот? Ты уверен?» — всё это инструменты для одной простой задачи — не пустить на сайт ботов (ну и нашему умишке поразмяться)).
Ну и расшифруем сам акроним CAPTCHA для полноты картины — Completely Automated Public Turing test to tell Computers and Humans Apart. Всё, можно смело забывать…
Ты не видишь кабана… (ну, как в том фильме)
Иногда, зайдя на сайт и пугливо оглядевшись вокруг, ты вдруг с облегчением вздыхаешь: «Тут нет капчи». Но в этот момент она смотрит на тебя в упор… Ощупывает тебя невидимой клешнёй и алчет протестировать гидрантами. Такова и Yandex SmartCaptcha.
Ты не видишь её, но она видит тебя насквозь… Прячется за зарослями фоток, смотрит на тебя, как на вредоносный код, и пытается понять, чисты ли твои помыслы есть ли у тебя душа. И если ты ей чем-то не угодишь, будешь решать её загадки, как миленький.
Что ж, попробуем разобраться как посадить этого милого цербера на цепь и на своём сайте.
Нужны Yandex«у деньги — се ля ви
Чтобы с головой окунуться в мир капченья, придётся сначала лицом к лицу столкнуться с жабой рыночными отношениями. В какой-то момент, Яндекс невзначай предложит перейти на новый уровень отношений и привязать к аккаунту карту. Да-да, ту самую, с деньгами секретным кодом. Но, на самом деле, это — всё. Платить ни за что не придётся. В месяц можно сделать 250 000 проверок бесплатно. Что для подавляющего числа сервисов, наверно, за горизонтом мечтаний. Те же, у кого получится набрать столько заявок в месяц, деньги на капчу считать, наверно, не станут.
И так, с теми отчаянными смельчаками, у кого есть платёжный аккаунт яндекса, мы продолжаем. А для того, кто понимает, что тут вопрос не только в деньгах, есть альтернатива.
Набор ключей
Перед началом, нужно вытряхнуть из яндекса пару увесистых инструментов: ключ сервера и ключ клиента.
Какие же двери открываются этими ключами? Первая дверь впускает на сайт скрипт для работы яндекс капчи. Через вторую дверь уходит запрос на проверку пользователя. Но между этими дверями нужно преодолеть долгий путь по мрачным коридорам настройки яндекс капчи. Приглашаю пройтись по этому пугающему месту вместе. Берите кресты и канделябры — мы начинаем…
7 шагов в бездну
Чтобы поставить SmartCaptcha на сайт, нужно пройти 7 кругов ада шагов ада…:
1. Прибить скрипт загрузки куда-нибудь в код сайта:
Теперь капчё сможет загрузить себя на сайт, чтобы грудью прикрыть форму отправки от ничтожных ботов.
Нет-нет, бубен откладывать пока рано, он нам ещё пригодится
2. Далее нужно отвести специальное место под капченье. Я не шучу! Надо указать капче её место, чтобы знала, кто тут босс:
3. Теперь нужно навертеть на форму проверку яндекс-капча (далее буду ласково звать этого зверя »япча», чтобы как у индейцев отражало суть):
Привожу полный код из документации, чтобы было понятно, как это работает «в пробирке»:
На этом этапе может показаться, что всё выполнено как надо и можно идти квасить чай, но сильно наквашиваться рано, потому что япча тебя только обнюхала и даже не распахнула свою пасть
4. Разжиться токеном
Что такое токен? Зашифрованное досье, хэш вселенной? По-сути, токен — это набор символов, по которым различают одну сущность от другой. Такой себе отпечаток пальца посетителя сайта.
Токен получается во время выполнения функции callback, указанной выше. Так же он прилетает в контейнер капчи, созданный на втором шаге и сохраняется в значении инпута.
Куда с этим токеном идти? Благо япча сильно далеко не шлёт, только на сам сервис проверки посетителя Yandex SmartCaptcha, чем мы дальше и попробуем поразвлекаться.
Но, прежде чем переходить к следующему шагу, думаю, стоит убедится, что на данном этапе всё понятно и информация не вызывает отторжения, а потому немного повторим всё что произошло до этого этапа, другими словами.
Код из доки пунктом выше выглядит дружелюбным и понятным, но это не так — япча водит тебя за нос. Внимательно следите за яйцами (цены то вверх, то вниз). По пунктам:
1) подключили скрипт, где указали, какая функция будет запускаться при загрузке скрипта
