История о том, как, как я большой тупой манекен, но JavaScript хорош.
(Первоначально опубликовано на Середина )
TL; DR: 💯
Я не назначил важную встречу, и в следующем месяце не было никакого доступного … Поэтому я использовал JavaScript, чтобы найти его в течение нескольких дней! Я использовал Chrome Devtools Чтобы выяснить, как работает веб -сайт о бронировании встреч, и написал немного JavaScript, чтобы написать мне, когда наступления стали доступны!
Сюрприз Сюрприз. Я напортачил. 🤪
Я недавно переехал из Новой Зеландии в Швецию 🇸🇪, и, честно говоря, это было довольно просто! Мне посчастливилось получить роль, когда агентство по переезду организовало почти все мое перемещение. Мне пришлось заполнить несколько форм и собрать свои вещи. На самом деле, для меня было обработано многое из того, что я не выполнил свою супер -важную задачу — забронируйте биометрическое назначение в Mygrationsverket в Стокгольме. Это назначение является важным шагом в процессе миграции, который позволил бы мне получить Personnummer Анкет Этот номер позволил бы мне открыть шведский банковский счет и начать получать оплату! Люди заказывают эти встречи за несколько недель и недель, поэтому я не мог подняться и разобраться.
Чтобы сделать это немного более смущающим для меня, моя девушка пыталась найти время для ее собственной встречи. Когда она спросила меня, нужно ли мне сделать то же самое, я заверил ее (ошибочно 😅), что агентство по переселению разобралось с моим. У нее были проблемы с поиском встречи на сайте. Мы думали, что сайт не работает, но на самом деле назначения очень мало. Они разбиваются, как только станут доступными!
Я хотел, чтобы это разобралось как можно скорее (потому что деньги 💰)! Я проверил, смогу ли я записаться на прием в другом городе, или я мог бы поехать в другую страну. Мой консультант по переезду заверил меня, что люди часто отменяют свои встречи, поэтому я должен продолжать проверять. В Швеции есть 14 различных мест встречи, и для получения списка доступных времен! Это означает, что требуется немного времени, чтобы пройти через все варианты. Я слишком ленив за это, и боюсь, что я пропустил бы, потому что я смотрел не на то место в неподходящее время.
Я могу автоматизировать это! 🤖
К счастью для меня, я пишу код так же, как я живу — плохо. Я склонен продолжать, когда дело доходит до выяснения, как все работает. Мне пришлось создать набор инструментов для того, чтобы выходить из таких ситуаций. Я был очень уверен, что смогу изменить веб -сайт и автоматизировать процесс. Я подумал об использовании Кукольник Чтобы водить браузер и заполнить формы, но я подумал, что может быть более простой способ. Я решил использовать HTTP -запросы, получить данные с веб -сайта MigrationSverte и отправить себе электронное письмо всякий раз, когда стало доступно новое назначение.
Выяснить, что это казалось, что это было бы довольно просто, но оказалось, что это далеко от этого. Давайте посмотрим на шаги, которые я предпринял, чтобы выяснить, что происходит.
Шаг 1) откуда берутся данные?
Сначала я использовал Сеть Вкладка, чтобы я мог посмотреть, какие запросы предпринимал браузер, когда я использовал его. Я перейдем к веб -сайту, заполнил форму и нажал на календарь, чтобы просмотреть каждую неделю. Сеть Вкладка Позвольте мне посмотреть запросы, как они произошли. Каждый щелчок вызвал запрос на "BehaviorListener.1-form-Kalendar" :
Когда я изучал каждый отдельный ответ, я видел данные JSON для списка встреч, возвращающихся! Woohoo 🎉!
Я думал, что смогу сделать запрос на этот URL и быть сделанным … это выглядело примерно так:
Увы, если бы это было так просто. Когда я запустил приведенный выше код, я вернул кусок HTML, содержащий следующее 😔:
"The requested page has expired. To countinue booking try to go back using the navigation buttons in your web browser." (Yes, "countinue" is in the real response)
Шаг 2) Как получить реальные данные?
Я знал, откуда поступают данные, но я не мог их получить. Так что происходит? У меня было несколько подсказок. Ответ упомянул «истек». Это подразумевало, что есть какое -то состояние. Это намекало на меня, что могут быть вовлечены куки, и я знал, что смогу это легко подтвердить. С помощью «Копировать как curl» Инструмент в Devtools, я мог бы воспроизвести запрос, включая все файлы cookie и посмотреть, что у меня есть:
Когда я воспроизводил весь запрос, включая файлы cookie и другие заголовки, я получил ожидаемый ответ!
Шаг 3) Как получить данные для разных мест?
Следующим вопросом было то, что оригинальный URL -адрес запроса не содержит фактического «запроса». У него есть старт и конец Даты, но как насчет места? Мне нужно больше информации.
Я прошел процесс назначения еще несколько раз, искав подсказки. Я заметил, что независимо от того, в каком месте я выбрал, я всегда получал URL в следующем формате:
Когда я немного возился, я обнаружил, что последний параметр запроса, похоже, не имеет значения. Это была просто текущая временная метка. Оставшихся параметров, старт и конец важны, но они не дали никакой новой информации. Первый параметр интересен — он менялся с каждым новым запросом страницы. Откуда это было? Сервер должен генерировать его, но как?
Следующее, что я попробовал, это посмотреть на Сеть Вкладка снова, на этот раз, глядя на большую картину. Какие запросы представляет сайт на протяжении всего процесса? Я включил «Сохранить журнал» и «Отключить кеш» варианты, чтобы я мог видеть запросы по всему потоку:
Короткий ответ в том, что есть лоты запросов. К сожалению, я не смог найти ничего полезного здесь, поэтому мне пришлось попробовать что -то еще …
Моей следующей идеей было отключить JavaScript. Вы можете сделать это, перейдя в настройки DevTools (три вертикальные точки для «Настройка и управление Devtools» , затем «Настройки» ) и нажав «Отключить JavaScript» Флажок:
Теперь, когда я снова попытался пройти через процесс, нажав на «Продолжить» Кнопка не сработала! Google Translate также был сломан 🤪! Это подтвердило, что подачу формы обрабатывалась JavaScript! Теперь мне нужно было исследовать и посмотреть, что именно он сделал. Я использовал «Осмотрите элемент» Инструмент, чтобы лучше взглянуть:
Проверка элемента показал, что он имел id , что означало, что у меня была другая подсказка! Я использовал Devtools «Поиск», чтобы просмотреть весь сайт для любых ссылок на это id :
Поиск показал, что к кнопке прикреплен обработчик щелчка. Этот конкретный код выглядел так:
Я добавил точку останова, чтобы увидеть, куда пойдет настоящий перенаправление:
А теперь у меня было больше подсказок! Новый URL, с новой страницей и новыми параметрами запроса. Что произойдет, если мы сделаем запрос на этот URL?
На этот раз я получил реальный ответ 🥳:
Du har valt att boka tid för 2 personer för att lämna fingeravtryck och bli fotograferad hos NATIONELLT SERVICECENTER 1 STOCKHOLM
или же
You have chosen to book time for 2 people to leave fingerprints and be photographed at NATIONAL SERVICE CENTER 1 STOCKHOLM
Ответ также содержал URL для "BehaviorListener.1-form-Kalendar" Анкет Он даже включал параметр запроса с изменяющимися значениями номеров. Это выглядело довольно хорошо!
Я прошел процесс назначения с каждым из разных мест. Это позволило мне сделать вывод, что Enhet Параметр запроса контролировал местоположение. Я создал небольшое отображение для различных возможных значений:
В этот момент у меня было три важных кусочка информации:
Формат URL -адреса для запроса страницы сгенерированного календаря. Запросы на этот URL также возвращают необходимые файлы cookie.
Формат URL для запроса данных JSON для назначений.
Список различных местоположений для параметра ENHET.
Шаг 4) Как мне собрать все это вместе?
Мой сценарий Node.js стал немного сложнее. Он создает первый запрос, основанный на месте, а затем просматривает ответ, чтобы найти URL для IbehaviorListener Анкет Затем он берет случайные числа, а затем создает второй запрос, основанный на случайном числе. Ответ — это набор встреч!
Здесь есть несколько маленьких «трюков», которые заставляют его работать:
Включив
{jar: true}, это говоритЗапросмодуль для хранения файлов cookie. Это означает, что второй запрос не дает нам сообщение «истек».- Небольшое регулярное выражение, чтобы найти правильные данные в теле первого запроса. Это особенно хрупко и подозревает, что нарушается, если их код изменится (😢).
Шаг 5) Как его работать автоматически?
У меня уже была основная функциональность. Все, что мне нужно было сделать, это сделать его перевернуть каждое местоположение и проверить, есть ли новые встречи. Это включало в себя какой -то валовой код (🤢), но эй, это сработало!
Каждые пять секунд сценарий будет делать запрос в следующем месте и хранить список встреч в All_papointments объект. К сожалению, конечная точка назначений иногда ничего не возвращает, хотя это доступны. Данные в конечном итоге появляются, поэтому у нас есть еще один тайм -аут, который ждет за несколько минут, прежде чем сценарий начнет отправлять электронные письма. К сожалению, это необходимо, но на самом деле это объясняет, почему у моей девушки было такое тяжелое время с сайтом! Через две минуты информация должна быть стабильной, и любые «новые» назначения должны быть новыми. Это означает, что мы можем отправить уведомление по электронной почте.
Шаг 6) Как мы отправим электронное письмо?
Благодаря замечательной экосистеме Node.js, этот шаг был на самом деле легким! Я использовал Nodemailer , и это сработало чудесно:
Это отправляет мне электронные письма от меня, с небольшим псевдонимом ( +Biometrics-Appintment ), чтобы я мог отфильтровать их. Sender_email и Sender_password Получите установку в качестве переменных среды. `Sender_password должен был быть сгенерированным «Пароль приложения» чтобы обойти мой два фактора.
Это означало, что каждую ночь я получаю довольно много электронных писем 😅:
Все это:
И собрав все это вместе, весь сценарий выглядел так:
Эти 123 строки кода означали, что вместо того, чтобы ждать почти месяц для встречи, я забронировал в Стокгольм в течение трех дней. Я также мог бы найти встречу для моей девушки на свидание, которое совпало с ее посещением меня. В общем, это был большой успех!
Завершение:
Я добрался до своей встречи! Я был немного опоздал (конечно 🙄), но все прошло хорошо, и теперь у меня есть карта биометрии и банковский счет. JavaScript не может решить большую часть моих повседневных неудач, но это, конечно, приятно, когда это возможно! Devtools очень полезны, и уловки, которые мы используем для отладки наших собственных сайтов, также могут быть использованы, чтобы выяснить, как работают другие веб -сайты 🚧.
В любом случае, это было довольно глупо, но также немного весело, и я надеюсь, что вы нашли это интересным/полезным. Пожалуйста, обратитесь ко мне в Twitter ( @phenomnominal ) и дайте мне знать, что вы думаете!
🦄
Оригинал: «https://dev.to/phenomnominal/solving-life-problems-with-javascript-2525»