Внешние скрипты с доступом к вашим кредиткам и личному кабинету / Хабр

Что еще необходимо учесть в своем проекте

Дизайн.
Главную страницу можно сделать в виде лендинга, на котором будет приветствие посетителей вашего курорта. В целом, наша система уже по умолчанию имеет хороший лаконичный дизайн. Можно настраивать его под себя – цвета, размеры, шрифт и т.д.
Объем.
Чем меньше первая версия для внедрения, тем меньше бюджет, быстрее будет реализован проект, и тем оперативнее вы получите обратную связь от потребителя. Старайтесь убрать все второстепенное из первой версии своего продукта. Далее все это можно будет развивать на основе обратной связи от пользователей.

Что можно сделать чтобы получить первичную оценку подобного проекта?

Определить структуру всех страниц (разделить на кабинеты/роли и для каждой прописать список страниц). Можно отталкиваться от нашего базового решения.
Для каждой страницы определить кратко возможности
Прописать все необходимые интеграции с внешними системами. Подобный документ уже позволит вам получить более менее точную оценку (с разбросом в /-15%) по бюджету и срокам.

Что такое клиентский сервис на сайте

Ваш бизнес обслуживает клиентов. Продажи могут проводиться по телефону или при личной встрече, счета,акты передаваться вручную или через почту.

Выбор и заказ услуг клиентом проводится через некоего менеджера по продажам.

Для подобных задач можно сделать личный кабинет клиента в вашей экосистеме.

Что входит в решение

Ключевые части решения Falcon Resort, которое мы предлагаем:

Относительно быстро можно запустить базовую часть системы, а затем постепенно ее развивать и адаптировать под свои нужды.

Решение можно менять и адаптировать под себя

Внешние скрипты с доступом к вашим кредиткам и личному кабинету

Скажите, как бы вы отнеслись к тому, чтобы продавцы давали возможность собрать атрибуты ваших карточек, включая номер, фамилию и CVC, какому-то постороннему лицу еще в момент оплаты, а также, без пароля, пускали посмотреть, что вы делаете в личном кабинете какого-то сервиса, кому и сколько платите, например. Сколько у вас телефонов и как вы ими пользуетесь. Т.е. вы входите под паролем, подтверждаете право владения по SMS, зашли, а там народ толпится, кто зашел просто посмотреть. Бред? Тем не менее, так делают многие сервисы. Кем бы вы себя ощущали, если бы в комнате для вскрытия банковских ячеек обнаружили камеру наблюдения? Но, не будем снова о банках, давайте обо всем последовательно.

Заранее прошу прощения у тех, кому объяснения покажутся слишком разжевывающими, несмотря на аудиторию, в прошлый раз многие вообще не поняли, о чем идет речь.

Большинство вебмастеров игнорируют тот факт, что страницы с чувствительной информацией должны быть статичными по содержимому кода. Чем отличается от обычной программы вирус? Тем, что на компьютере появляется программа, написанная непонятно кем, потребляет ресурсы и выполняет непонятно какие действия в целях их авторов (позвольте вольное определение для пользы объяснения). И вот берем страницу, например, личного кабинета Билайн.

Помимо штатного адреса Билайна, мы видим, что в странице присутствуют адреса, которые к нему не относятся. Т.е. есть код, который написали работники Билайна и есть код, который грузится с каких-то других серверов, написанный другими людьми, причем, код этот вообще никак сотрудниками Билайна не контролируется, поскольку загружается не через Билайн, а по тем адресам, которые вы видите. Раз не контролируется, то и какие действия он выполняет, тоже не понятно.

Вот, пожалуйста, небольшое видео по тому, что можно творить внешними скриптами в личном кабинете

Если кому-то интересно почитать подробности вот они, именно по Билайн

Переходим к следущему тому, что обещал в заголовке.

Проходя мимо сайта оплаты МТС, случайно обнаружил протесты баннерорезки. К счастью, скриптов не очень много. Но популярная гуглоаналитика там есть. Прямо вот на страничке, где вы вводите номера карточек и CVV.

Небольшое поясняющее видео:

Опишу происходящее на видео, если кто-то не может его посмотреть. Обманув DNS, я перенацелил скрипты аналитики на свой веб-сервер, где их благополучно подменил на свои. Это не взлом и целью выставить обнаруженное уязвимостью нет, хотя некоторая вероятность такого тоже существует. Своими скриптами я благополучно собрал вводимые самим собой тестовые произвольные номера кредиток и отправил себе на сервер. Для демонстрации возможностей скрипта я еще и сумму оплаты поменял.

Извините, повторюсь, есть некоторая компания (перечисленные выше, как и многие другие, не суть название). Они пишут сайт, в который закладывают секретности и какой-то функционал, где (я верю в это) личные данные никто править не должен и они наружу никуда не утекают. Для того, чтобы собирать статистику по своим пользователям, они ленятся и пользуются чужими скриптами. Т.е. браузерам пользователей они в своем сайте дают команду — зайдите на другой сервер и возьмите там скрипт для статистики. Какой этот скрипт в данный момент времени знают только владельцы другого сервера. Что он делает, владельцы сайта не могут знать. Более того, браузерам пользователя в некоторых случаях можно сказать, чтобы скрипты брались откуда-то еще и тогда количество тех, кто может их поменять, резко возрастает. Владельцы же серверов статистики и прочих вставок вообще без проблем могут собирать все, до чего дотянутся. Куда им захочется дотянуться, тоже уверен, владельцы основных сайтов вообще не представляют.

Верить в честность компании, предоставляющей аналитику, не приходится. Однако, работают в ней люди. А люди иногда нарушают закон. И хоть компания потом будет выводить за баню и расстреливать сотрудников-нарушителей, будет ли лично вам от этого легче? Сможет ли это компенсировать потери? Я принципиально не понимаю, зачем давать лишнюю возможность получить доступ к таким данным? Если кто-то очень надеется на SMS, рекомендую почитать вот эту статью и вспомнить недавнюю историю с тем, как недобросовестные работники одного из салонов дублировали симкарты оператора сотовой связи.

Мое письмо в МТС:

Добрый день, уточните, пожалуйста, зачем используются сторонние скрипты, в том числе иностранные, на страницах сайта МТС? Это же может быть угрозой сохранности информации, передаваемой между вашей компанией и пользователем.

И полученная такая вот отписка

Здравствуйте, Олег Андреевич.
Сохранность информации защищена законодательством РФ.
С уважением,
**** ******
ПАО «МТС»

И смех, и грех. Не хочу, чтобы сотрудника сделали козлом отпущения, что произошло мне вполне понятно, потому зазвездил имя. Потом уже снял и отправил видео, которое вы видели выше, после чего было сообщение о том, что оно отправлено в какое-то подразделение по безопасности и дальнейших сообщений я уже не получил никаких. Собрал и

хронологию по МТС

Ну, и чтобы меня не заподозрили в предвзятости, у Мегафона все тоже самое.

Два скрипта, метрики и аналитики. Меняем на свои и наслаждаемся получением данных и изменением всяких текстов.

На всякий случай поясню, каким образом можно посмотреть, подложили ли свинью в ваш личный кабинет. Например, с помощью браузера Chrome. Заходите в личный кабинет или что у вас там содержит персональные данные, нажимаете Shift-Ctrl-J, выбираете раздел Network, подраздел JS и нажимаете F5. В списке, который заполнится после этого не должно быть никаких «чужих» адресов, только принадлежащие тому ресурсу, на котором вы находитесь. Крайне желательно, конечно, чтобы в этот момент все расширения браузера были выключены. Найдете что-то интересное — пишите в комментариях, какой ресурс и что подключает в личный кабинет. Сразу не паникуйте, все же есть некоторые ограничения на доступ скриптов к содержимому. Но на сайтах веб-мастеров, которые уделяют внимание безопасности, внешние скрипты исключены в принципе. Этого правила рекомендую придерживаться всем, кто не хочет подставить людей, пользующихся сервисом. Статистика может быть собрана и собственными средствами, а наиболее точная она будет по журналам веб-сервера, где нет искажений от баннерорезок. Есть варианты JS-статистики, скрипты которой можно хранить у себя.

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

Деплой первого и второго варианта

Способов деплоя множество. Вот один самый простецкий.

Ставим gunicorn:

pip install gunicorn

В папке my_app создаем новый файл wsgi.py со следующим содержанием:

from app import create_app

app = create_app()

И запускаем:

gunicorn wsgi:app

Заказать создание личного кабинета клиента. стоимость разработки личного кабинета

Цена разработки личного кабинета для сотрудников компании или клиентов будет сильно зависеть от функциональности кабинета, т.к. какие возможности должен предоставлять личный кабинет для вашего клиента.

Предлагаем такой путь: создание концепции проекта -> оценка бюджета в виде КП -> поэтапная работа над проектом с постепенным наращиванием возможностей в кабинете.

Создавайте концепт, присылайте нам, и мы сделаем первичную оценку вашего проекта.

Зачем нужен кабинет клиенту?

Это позволяет экономить. Персональные акции, накопительные скидки.
Это дает информацию. Человек может получить оперативно всю необходимую информацию по вашим услугам и объектам (например, если для банка – это информация о ближайших банкоматах).
Это упрощает заказы. Клиент минимизирует издержки на своем взаимодействии с вами. Чем проще покупать – тем ниже шансы, что он сойдет с дистанции на пути заказа у вас.

Зачем нужен личный кабинет клиента бизнесу?

Это повышает лояльность клиента. Если у меня есть 4000 баллов в вашем бизнесе, пойду ли я к конкурентам (при прочих равных)?
Это уменьшает издержки на обслуживание клиента.
Уменьшается человеческий фактор. Клиент сам выбирает и заказывает, а затем сам отслеживает заказ.
Не нужно держать большой колл-центр для разъяснения банальных вопросов покупателей. Теперь они самостоятельно могут смотреть все в личном кабинете.
Это дает постоянный контакт с покупателем. Email письма компаний отправляются в спам. Телемаркетинг только раздражает потребителя. Через личный кабинет вы неявно продвигаете дополнительные услуги и предложения.
Находясь на вашей “территории” клиент более благосклонно будет воспринимать любые предложения от вас.
Уменьшит риски воровства и угона клиента. Если все проходит через систему, то гораздо сложнее недобросовестному сотруднику договориться с клиентом о работе в обход фирмы.
Также клиентский сервис позволяет частично решить потерю клиента, которого пытается переманить ваш бывший продавец. Клиент теперь не завязан чисто на личность вашего продавца, он взаимодействует с компанией через личный кабинет.

Для бизнеса клиентский сервис в виде кабинета делает клиента ближе и доступнее

Из чего состоит личный кабинет клиента

Все вертится вокруг заказов. Именно за этим пришел потребитель. Практически каждая часть клиентского сервиса так или иначе завязана на механизм заказов.

Клиент выбирает необходимые услуги и продукцию и создает заказ. Это может сопровождаться оплатой онлайн заказа. Также может быть интеграция с другими системами (например, калькулятор транспортных систем).

Клиент может посмотреть, что он раньше заказывал. Также в деталях изучить состояние по каждому заказу, может связаться с менеджером по заказу.

Каждый заказ – это новые баллы в копилке клиента. Баллы можно обменять на продукцию (а это увеличение среднего чека и повторных покупок). Баллы могут давать некий статус в системе, что увеличивает лояльность клиента.

Если вы действительно можете делать хорошие спец предложения, то для клиента это будет еще одним поводом пользоваться личным кабинетом. При этом вы можете создавать некие клубы (как Ikea Family), для которых будет действовать специальные скидки. Это глубже втягивает клиента в вашу систему. По сути, клубы могут сегментировать вашу аудиторию (молодые мамы, семейные, пенсионеры и т.д.) и направлять на них специальный контент и предложения.

Дорога к обеду ложка. Важно вовремя уведомлять человека о важных для него событиях. “Ваш заказ готов”, “Заказ доставлен по такому-то адресу”, “Появилось свободное место к мастеру” и т.д. Уведомления могут быть пуш или отправляться в мессенджер. Более старомодный вариант – на почту или СМС. В вашей системе реализованы пуш-уведомления, Телеграм, email и СМС.

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

Очень важна оперативная связь и контакт с клиентом

Для человека важно иметь возможность быстро задать вопрос, получить информацию и двигаться дальше.Телефон для обратной связи – плохой вариант! Почему? Нужна оперативность ответа. Если клиенту не отвечают хотя бы 30 секунд, то это уже негатив.Если же на сайте будет возможность написать в чат менеджеру, то клиент напишет и пойдет по своим делам.

Для клиента очень важно, чтобы вы были у него “под рукой”. Есть вопрос – сразу задал вам через свой кабинет. Кабинет также поможет вам сразу получить всю полноту информации о клиенте: кто он, что он заказывал, на сколько он заказывал, в каких клубах состоит, какая у него скидка.

Если он просто звонит вам на телефон, то вам придется по CRM по номеру выискивать очень оперативно информацию и обрабатывать ее, параллельно общаясь с клиентом. Если менеджер от природы не очень быстрый, то для клиента создается впечатление тугодума (он же не знает, что менеджер параллельно ищет о нем информацию).

Как включить личный кабинет на вашем сайте

Для того чтобы создать личный кабинет для своих клиентов, перейдите в приложение «Сайт» в раздел Личный кабинет. Включите авторизацию на вашем сайте.

После этого в главном навигационном меню вашего сайта сразу появятся ссылки «Вход» и «Регистрация».

Как выглядит процесс работы

Процесс работы над проектом описан здесь Работа над веб-проектом

Клиентский сервис через смартфон

99% пользователей будут использовать смартфон

Если говорить о нативных мобильных приложениях (те, что устанавливаются через AppStore и Google Play) – мы их не делаем. Наша платформа полностью адаптивна под мобильные устройства. Также Falcon Space поддерживает технологию PWA. Это практически стирает разницу между мобильным приложением и веб-сайтом: можно создать иконку на экране телефона и запускать его как приложение, есть функции геолокации, доступ к камере и некоторые другие функции.

Личный кабинет клиента к существующему сайту

Если у вас уже есть сайт, вы можете создать кабинет клиента на поддомене вашего домена.

Наше демо клиентского сервиса на примере курорта

Представьте ситуацию, вы приезжаете на курорт. На рецепции говорят на английском, а у вас с этим не очень. Вам что-то говорят на ломаном русском и поясняют, что дальше делать. Вы понимаете 20% из сказанного, что-то заполняете, находясь в состоянии глубокого транса.

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

Подробности

За основу я взял модуль

Преимущества pwa

Это значительно дешевле, чем делать по сути три приложения: веб сайт, IOS и Android. Бюджет сокращается в разы.
Быстрее можно вносить изменения. В нативном приложении для обновления необходимо, чтобы пользователь переустановил приложение на своем телефоне. На PWA изменения будут мгновенно применяться у всех пользователей, т.к. данные запрашиваются с сервера.
Нет ненужной прокладки в виде AppStore. Долгая модерация, возможность отказа в публикации. PWA проще себе установить на телефон.
Просто клик на кнопке (на IOS чуть сложнее – Share/Add to my homescreen).
Сложно заставить пользователя себе что-то ставить на телефон по соображениям безопасности, занимаемого места на телефоне.

То, что вашему туристу не нужно ставить мобильное приложение на телефон – скорее плюс, чем минус, т.к. никому не хочется засорять свой телефон временным приложением (которое он планирует использовать только две недели).

Сколько может стоить мой проект?

Базовая стоимость решения Falcon Resort указана на странице Решения

Очень вероятно, что вам потребуется кастомизация под себя и создание новых модулей для вашей специфики. В этом случае необходимо делать проект по доводке решения под ваши реалии.

Скриншоты

Вот что получается из коробки:

Профиль пользователя после авторизации:

Создаем анимацию

Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:

#register{
    z-index: 21;
    opacity: 0;
}

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.

Теперь самое интересное: меняем формы местами, используя псевдо класс :target. Вам нужно понять одну вещь по поводу :target: для перемещения мы будем использовать якоря. Нормальное поведение якоря — прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами.

И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login{
    z-index: 22;
    animation-name: fadeInLeft;
    animation-delay: .1s;
}

Вот, что происходит: когда мы кликаем на кнопку Присоединиться, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться.

Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

Стилизуем формы, используя css3

Во-первых, давайте назначим нашим формам базовый стиль.

#subscribe,
#login{
    position: absolute;
    top: 0px;
    width: 88%;
    padding: 18px 6% 60px 6%;
    margin: 0 0 35px 0;
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189,0.8);
    box-shadow:
        0pt 2px 5px rgba(105, 108, 109,  0.7),
        0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    border-radius: 5px;
}
#login{
    z-index: 22;
}

Мы добавили две тени к элементу: одна — с целью создать внутреннее голубое свечение, а вторая — внешняя тень. Чуть позже я объясню вам z-index.

Здесь мы назначим свойства для шапки:

Точки расширения

Важный момент – мы исходим из того, что любое коробочное решение можно и нужно доводить под себя. Поэтому мы внедряем базовое решение и через проектную работу дорабатываем решение до нужного состояния.

Любое решение на Falcon Space содержит несколько точек расширения:

можно создавать новые объекты учета (разделять типы туристов, создавать клубы по интересам, добавлять опросы, фотографии и т.д.)
можно менять бизнес-логику существующих страниц (например, изменить процесс адаптации туриста в системе)
можно менять внешний вид страниц, настраивать стилизацию проекта (фирменные цвета, логотип, шрифты).
можно интегрироваться с внешними системами через универсальный API (например, с системами отзывов о пребывании на курорте).

Похожее: Sprinthost - Инструкции файла .htaccess