Логотип «2Captcha»Перейти на главную страницу
Туториалы по обходу капчи

Эта статья была полезной?

Как решить капчу Drag & Drop

Джерри Слиман
Джерри Слиман

Технический специалист

Введение

Встречаются капчи, для прохождения которых требуется перетащить одну или несколько картинок в определённое место на фоновом изображении. Часто решение таких капч токеном затруднено или невозможно. Для таких случаев мы разработали новый метод DragAndDropTask.

Ни sitekey, ни токен для обхода таких капч нам не нужен. Работает метод так: вы отправляете сервису фоновое изображение и картинки, которые надо перетащить, а сервис присылает координаты — куда поставить каждую картинку. Перетаскиваете вы сами, своим кодом.
Ниже разберём, что добавить в запрос, как интерпретировать ответ и как получить картинки со страницы. Отдельно остановимся на том, из-за чего чаще всего ломаются интеграция.

Каким капчам подходит метод Drag & Drop

Перетаскиванием решаются несколько видов капч, однако не все из них можно обойти этим методом. Отличить их просто. В ответе DragAndDropTask приходят координаты точки, то есть два числа: x и y. Если для решения капчи нужно одно число, значит это другой метод. Ниже перечислим три случая, когда Drag & Drop не подойдёт:

  • Если на картинке есть отсутствующий элемент, а под ней полоса слайдера, вам нужно расстояние по горизонтали. Для таких капч используют метод Coordinates, и о нём есть отдельная статья: Как обойти Slider Captcha: Полное руководство.
  • Если картинку нужно повернуть стрелками или слайдером, вам нужен угол поворота. Для этого есть метод RotateTask и статья Как обойти rotate капчу.
  • У некоторых известных виджетов есть свой отдельный тип задачи — например, у Capy Puzzle и Temu. Для них лучше взять этот отдельный тип: сервис пришлёт готовый ответ, и с координатами работать не придётся.
DND

А если на фоне нужно разместить одну или несколько картинок, то это как раз тот случай, когда подходит метод Drag & Drop.

Как отправить задачу Drag & Drop в API

Эндпоинт API: POST https://api.rucaptcha.com/createTask

Параметр Тип Обязательный Описание
type String Да DragAndDropTask
background String Да Фоновое изображение, закодированное в Base64
images Array of String Да Картинки для перетаскивания в Base64. Порядок важен — он же используется в ответе
comment String Нет Комментарий для исполнителя, например текст задания из виджета
json Copy 
{
  "clientKey": "YOUR_API_KEY",
  "task": {
    "type": "DragAndDropTask",
    "background": "BASE64_BACKGROUND",
    "images": ["BASE64_IMAGE_1", "BASE64_IMAGE_2", "BASE64_IMAGE_3"],
    "comment": "Перетащите ОДНО животное к подходящему силуэту"
  }
}

В запросе всего три поля. Готовой функции для этого метода нет ни в одном официальном SDK, поэтому запрос придётся собрать вручную.

В ответ на createTask сервис пришлёт taskId — номер задачи. С этим номером обращайтесь к методу getTaskResult по адресу POST https://api.rucaptcha.com/getTaskResult и повторяйте запрос каждые 3–5 секунд. Пока задача решается, в поле status будет значение processing. Когда она решится, ответ появится в solution.coordinates.

json Copy 
{
  "errorId": 0,
  "status": "ready",
  "solution": {
    "coordinates": [
      {"x": 120, "y": 340},
      null,
      {"x": 210, "y": 90}
    ]
  },
  "cost": "0.0012",
  "createTime": 1692863536,
  "endTime": 1692863556
}

Как читать координаты

У массива coordinates есть три особенности. Если их не учесть, интеграция не заработает.

Значение null — это ответ, а не ошибка. Так отмечена картинка, которую перемещать не нужно. Это не координаты (0, 0) и не сбой в работе сервиса. Длина массива и порядок ответов в нём всегда такие же, как у массива images, который вы отправили: первой картинке соответствует первый ответ, второй — второй, и так далее. Поэтому идите по обоим массивам одновременно и просто пропускайте null. Удалять такие элементы нельзя, иначе картинки и ответы перестанут совпадать.

Координаты указывают на центр картинки, а отсчёт идёт от левого верхнего угла фона. Здесь два важных момента:

  1. Точка (0, 0) находится в левом верхнем углу фонового изображения, а не страницы.
  2. Присланная точка — это место, где должен оказаться центр картинки, а не её левый верхний угол.

Поэтому смещать ответ на половину картинки не нужно: берите картинку за центр и отпускайте курсор ровно в присланной точке.

Координаты даны в пикселях того изображения, которое вы отправили. Если на странице фон показан меньше, чем он есть на самом деле, координаты надо пересчитать. Умножьте их на отношение показанного размера к настоящему и только после этого прибавляйте положение фона на странице. Если этого не сделать, картинка встанет не туда. Например, когда фон показан вдвое меньше настоящего размера, картинка уедет ровно в два раза дальше, чем нужно.

Анализ страницы

Откройте DevTools (F12) на нужном сайте, изучите исходный коди ответьте на три вопроса.

В каких элементах лежат картинки? Это могут быть элементы <canvas>, в которых виджет рисует картинки сам, обычные теги <img> или картинки, заданные через CSS. От этого зависит, как их получить. Из <canvas> изображение получают методом toDataURL(). У <img> оно уже есть в атрибуте src — либо готовой строкой Base64, либо ссылкой, которую надо скачать. Если элементы находятся внутри #shadow-root, обращайтесь к ним через document.querySelector(host).shadowRoot. О том, как вообще понять, с какой капчей вы имеете дело, есть отдельная статья: Как определить тип капчи на сайте.

Какой элемент отправлять как фон? Отправляйте само изображение, а не блок виджета целиком. Панель с картинками может лежать в том же блоке, что и фон, или заходить на его край — как на скриншоте выше. Если сделать скриншот всего виджета, эта панель попадёт внутрь картинки, которую будет разбирать исполнитель.

Показан ли фон в настоящем размере? У <canvas> настоящий размер записан в атрибутах width и height, а у <img> его дают свойства naturalWidth и naturalHeight. Сравните это значение с размером, который элемент занимает на странице. Отношение этих двух размеров и есть множитель из предыдущего раздела, поэтому запишите оба числа.

Каким бы способом вы ни получали картинки, помните о двух вещах:
Первое: сервис принимает только сам код Base64, без приставки data:image/png;base64,. Если её не убрать, придёт ошибка ERROR_IMAGE_TYPE_NOT_SUPPORTED.
Второе: порядок картинок менять нельзя. Отправляйте их в том порядке, в котором они идут на странице, потому что в этом же порядке придут координаты.

Что делать, если капча появляется только после чекбокса

Некоторые виджеты показывают картинки не сразу. Сначала они показывают чекбокс, по клику проверяют сессию и только после этого выдают саму капчу. Запрос к API от этого не меняется — меняется только то, как вы до этой капчи добираетесь.

Чекбокс и капча обычно лежат в разных iframe. Переключайтесь в каждый из них отдельно и не забывайте возвращаться на верхний уровень: самая частая ошибка — остаться во фрейме с чекбоксом и не найти там фон. И дожидайтесь, пока фрейм с капчой появится, а не ставьте паузу на фиксированное время. Иначе можно начать работу раньше, чем виджет закончит отрисовку.

После одной решённой капчи проверка может не закончиться. Будьте готовы пройти весь цикл заново и каждый раз получать картинки снова: новая капча — это новые картинки, и старые координаты к ним уже не подходят. Капча действует ограниченное время, поэтому применяйте ответ сразу, как получили его.

Как отправлять отчёты о решениях

Проверьте на сайте, принят ваш ответ или нет, и сообщите об этом сервису. Если сайт ответ не принял, отправьте taskId методом reportIncorrect. Если принял — методом reportCorrect. Отчёты улучшают качество распознавания, а иногда по ним возвращают деньги за неверное решение.

json Copy 
{ "clientKey": "YOUR_API_KEY", "taskId": 80306543329 }

Сохраняйте taskId у себя в коде, чтобы отправить отчёт уже после того, как сайт подтвердит отправку формы. Каждый случай рассматривают отдельно, и возврат по жалобе не гарантирован, поэтому отправляйте отчёты только после настоящей проверки. А если успешных решений у вас почти нет, reportIncorrect лучше не отправлять вовсе: скорее всего, дело в вашем коде, а не в решениях. Подробнее об отчётах есть отдельная статья: Как отправлять отчёты.

Частые ошибки

Ошибка или проблема Причина Что делать
ERROR_IMAGE_TYPE_NOT_SUPPORTED Не убрана приставка data:image/png;base64, Отправляйте только сам код Base64
ERROR_ZERO_CAPTCHA_FILESIZE Отправлена пустая картинка. Обычно это значит, что <canvas> прочитали раньше, чем виджет успел его нарисовать Дождитесь, пока фон нарисуется, и только потом читайте его
ERROR_CAPTCHA_UNSOLVABLE Задачу нельзя решить в том виде, в котором вы её отправили Проверьте качество картинок и передайте текст задания в поле comment
Код падает с ошибкой на значении null Значение null приняли за координаты Пропускайте null. Длина и порядок массива всегда совпадают с images
Картинка встаёт рядом с нужным местом, а не в нём Координаты не пересчитаны по масштабу Сначала умножьте их на отношение показанного размера к настоящему, потом прибавляйте положение фона

Полный список кодов ошибок API: Коды ошибок.

Чеклист

  • Фон и картинки закодированы в Base64, без приставки data:image/png;base64,
  • В параметре background отправлено само изображение, а не блок виджета целиком
  • Картинки отправлены в том же порядке, в котором они идут на странице
  • Текст задания передан в параметре comment
  • Ответ проверен перед использованием (errorId, status, solution.coordinates)
  • Значения null пропускаются, но не удаляются из массива
  • Отправка отчётов reportIncorrect и reportCorrect реализована

Полезные ссылки

Заключение

Главная сложность в капчах с перетаскиванием — не в самом запросе, а в применении ответа: сервис присылает точку, а попасть в неё должен ваш скрипт. Мест, где легко ошибиться, всего три: порядок картинок, точка отсчёта и масштаб фона.

Сам метод DragAndDropTask устроен просто: три поля в запросе и массив координат в ответе, который один в один повторяет отправленные картинки. Если помнить, что каждая точка задаёт центр картинки и отсчитывается от левого верхнего угла фона, всё остальное — обычная работа с DOM.

Не забывайте про отчёты reportIncorrect и reportCorrect: они улучшают качество распознавания.