Новая дыра в Сбербанк-онлайн
Вчера, 22.10.2014 в районе 21ч20м я пользовался услугами системы дистанционного управления финансами «Сбербанк-онлайн». Вход в систему осуществлял штатно, с вводом логина и пароля. Банковские операции провел штатно. Вход осуществлялся с моего ноутбука, на котором установлено и ежедневно обновляется антивирусное программное обеспечение и файрвол. Вход осуществлялся через проводной канал Ростелеком. Вход в систему «Сбербанк-онлайн» осуществлялся через браузер Chrome по защищенному соединению HTTPS-протоколу. В адресной строке браузера адрес сайта системы отображался верно, без добавленных символов или их замены. Помимо этого, на ноутбуке в данный момент из интернет-соединений был открыт только сайт сбербанка www.sberbank.ru, по ссылке из которого и был осуществлен вход в систему «Сбербанк-онлайн». В 21ч30м при попытке просмотра «истории операций» путем нажатия на соответствующую кнопку в системе «Сбербанк-онлайн» меня «выбросило» из системы на окно входа в неё. При этом я обратил внимание, что в адресной строке по-прежнему присутствовал верный адрес системы, соединение осуществлялось по защищенному протоколу HTTPS. Антивирус и файрвол никаких проблем при этом не зафиксировали.
После повторного входа в систему я увидел окно с предложением ввести одноразовый код из SMS-сообщения, отправленного на мой номер телефона. При этом на мой номер телефона никаких кодов не поступило. При попытке нажатия кнопки «Отменить» в окне ввода кода на ноутбуке оно закрывалось и меня повторно «выбрасывало» из системы «Сбербанк-онлайн». После пары неудачных попыток получить данный код, я ввел произвольные цифры, после чего открылось окно с предложением ввести новый код «для отмены последней совершенной операции». Данный код я якобы тоже был должен получить по SMS.
В 21ч37м я получил SMS-сообщение от отправителя 900 с текстом: «Сбербанк ОнЛ@йн. Изменение настроек безопасности: вводить одноразовый пароль при входе. Пароль для подтверждения изменений — ХХХХХ». Данное сообщение меня насторожило, но поскольку я так и не смог войти с ноутбука в Сбербанк-онлайн, я решил установить на свой смартфон приложение Сбербанк-Онлайн с сайта Google.play. Установка произошла успешно, я подтвердил вход в систему посредством ввода кодов, полученных через SMS от Сбербанка и смог увидеть свои карты. Сразу после этого мне поступил входящий звонок с номера +7-800-505-55-50 (Номер, как видите, только на 2 цифры отличается от номера поддержки Сбербанка). Звонившийся представился службой техподдержки Сбербанк-онлайн и спросил, испытываю ли я сложности с входом в Сбербанк-онлайн. Я ответил, что да, есть определенные проблемы. На это звонивший попросил меня выйти из приложения Сбербанк-онлайн на смартфоне (!), а войти на ноутбуке и ввести код из SMS, которое мне поступило во время его звонка. В соответствии с мерами информационной безопасности при работе в «Сбербанк-Онлайн» и подозревая, что сотрудники Сбербанка в таких ситуациях никогда сами не звонят клиентам, я прекратил все действия в системе и сразу перезвонил в Сбербанк по номеру 8-800-555-55-50, где и объяснил в подробностях произошедшее.
Текст SMS, полученного мною во время телефонного разговора с мошенниками, выглядит следующим образом: «Сбербанк ОнЛ@йн. Внимательно проверьте реквизиты операции: карта списания **** ХХХХ, сумма 9470,00 RUB, Билайн, Номер телефона/лицевого счета 965*24*3*1. Пароль для подтверждения данной операции — ХХХХХ» (здесь пароль не указываю и последние цифры карты не указываю, в SMS они был приведены). Отправитель — 900.
В службе поддержки Сбербанка мне сообщили, что данная операция находится в числе незавершенных. Данную операцию, по словам сотрудников банка, отменили. В ходе разговора с сотрудником Сбербанка были подтверждены две последних операции, совершавшихся мною через Сбербанк-Онлайн. Первая операция проводилась мною с подтверждением путем ввода кода из SMS, вторая — без подтверждения вводом кода.
По завершении разговора с сотрудником сбербанка мне было сообщено о блокировке в целях безопасности обеих моих карт и необходимости их перевыпуска, а также о блокировке доступа к Сбербанк-онлайн и Мобильному банку.
После сканирования ноутбука на предмет выявления вредоносного программного обеспечения вчера вечером (уже после завершения разговора с вашим сотрудником) мною было обнаружено наличие в кэше браузера и в папке C:\Documents and settings\All users двух одинаковых файлов размером 98 304 с датой создания 22.10.2014 в 21-30. Файл в кэше брайзера имел название A0038884.exe, второй — msfhgr.exe. Оба файла были определены антивирусом как TR/VB.Downloader.754 и помещены в карантин. Время создания данного файла в системе практически соответствует времени нажатия мною кнопки «История операций» в системе «Сбербанк-онлайн». Поскольку я не вводил номер телефона при появлении проблем с повторным входом в «Сбербанк-онлайн» (как и требуют правила безопасности), а мошенники смогли вычислить привязанный номер телефона, предполагаю, что либо они имеют доступ к базе данных Сбербанка, либо этот троян анализирует формы автозаполнения в Google Chrome, самостоятельно разыскивая номера телефонов. О таком варианте (сканирование форм автозаполнений браузера) на сайте Сбербанка упоминаний в качестве возможных угроз нет.
Запрос детализации разговоров у сотового оператора показал, что входящий звонок осуществлялся с номера 78005055550, а SMS-сообщения с указанием отправителя 900 на самом деле отправлялись с номера 79262000287 (видимо, это номер шлюза Сбербанка).
У меня остался один вопрос: поскольку мои карты выпущены Северо-Западным филиалом Сбербанка, а сейчас я нахожусь в зоне обслуживания Северо-Кавказского филиала Сбербанка, каким образом мне восстановить доступ к Сбербанк-онлайн и оформить перевыпуск карт и получить их, т.к. посетить Северо-Западный филиал Сбербанка я не имею физической возможности?
Как скачать Сбербанк Онлайн на iPhone: проверенный способ
«СберБанк Онлайн», «Сбербанк Инвестиции», «СберСпасибо», а также «СберБизнес», больше нельзя скачать в App Store. Если они уже установлены на телефоне, то удалять их не стоит. Ранее мы писали, как сохранить те приложения, которые уже установлены на телефоне. В этой статье рассказываем, как установить «Сбербанк Онлайн», обходя официальный App Store. При этом все способы легальные и делать джейлбрейк не потребуется.
Установка приложений из сторонних источников может быть рискованной. В особенности это касается банковских или прочих приложений для оплаты и проведения финансовых операций. Подобные действия вы выполняете на свой страх и риск!
Важно! В декабре 2022 года появилась официальная услуга от «Сбербанка» по установке «Сбербанк Онлайн» на телефон. На текущий момент это самый надежный и простой способ, но придется физически прийти в отделение. Подробную информацию можно узнать по ссылке на официальной странице «Сбербанка».
Как установить альтернативный магазин приложений
Зайдите на официальный сайт AltStore и скачайте версию, которая предназначена для операционной системы вашего компьютера. Программа доступна для macOS (от 10.14.4 и выше), а также для Windows 10. Сначала рассмотрим установку на примере Windows.
Windows
Архив с программой распакуйте в любое удобное место и затем запустите файл setup. Интерфейс при установке будет англоязычный, но сложностей возникнуть не должно. Регистрации не требуется. Можно оставить все параметры по умолчанию и просто прокликать все окна, пока не начнется установка (все равно никакой важной информации там нет).
Теперь перейдите в каталог, куда была установлена программа (по умолчанию это C:\Program Files (x86)\AltServer, но можно выбрать любое расположение). Запустите файл AltServer. Обратите внимание, что если у вас не установлен iTunes, то программа выведет окно с предупреждением iTunes Not Found.
Нажмите кнопку Download, чтобы перейти к загрузке, либо сделайте это вручную, скачав программу с официального сайта. Запустите iTunes и подсоедините iPhone к компьютеру при помощи кабеля.
Обратите внимание, при запуске программы AltServer на компьютере она сворачивается в трей. Ищите иконку в виде серого ромба. Работать с ней придется именно так. Теперь кликните левой кнопкой мыши и выберите пункт Install AltStore, а затем — свой смартфон.
Понадобится ввести логин и пароль от учетной записи. Если iCloud не был установлен ранее, то снова откроется окно с предупреждением. Скачать iCloud можно вручную (но не из Microsoft Store, но если нужен именно этот вариант, то на сайте AltStore есть инструкция) или через кнопку Download. После установки может потребоваться перезагрузка.
Если все сделано правильно, то приложение установится на смартфон. Если открыть его сейчас, то появится предупреждение «Ненадежный разработчик». Исправить это можно в настройках:
- Перейдите в «Основные», затем «VPN и управление устройством».
- Тапните на свой адрес электронной почты, который использовался для входа и выберите «Доверять» и затем еще раз подтвердите свой выбор.
Теперь AltStore можно открыть. Выдайте запрашиваемые разрешения и приложение готово к работе. Обратите внимание, что в самом приложении тоже потребуется ввести данные Apple ID.
macOS
Установка на macOS проще. Скачивайте на компьютер приложение AltStore с официального сайта. На верхней панели появится значок — серый ромб. Нажмите на него правой кнопкой мыши и затем на «Install Mail Plug-In». После установки перейдите в почтовое приложение Apple, выберите «Настройки» -> «Плагины». Поставьте галочку рядом с плагином «AltPlugin.mailbundle» и подтвердите установку.
Подключите iPhone кабелем к компьютеру. Снова кликните на серый ромб правой кнопкой мыши, далее «Install Altstore» и выберите из списка ваш iPhone. После установки значок AltSotre появится на рабочем столе iPhone — кабель можно отключить.
Как установить «Сбербанк Онлайн» через AltStore
В самом AltStore вы не найдете «Сбербанк Онлайн», есть лишь эмулятор консолей для запуска старых игр, а также менеджер буфера обмена. Так что «Сбербанк Онлайн» и все остальное придется скачивать через браузер. Для iOS нужны файлы с расширением ipa.
IPA можно искать, например, на форуме 4PDA. Впрочем, в случае со «СберБанк Онлайн» подходящий файл ipa, который успешно установился, был найден в телеграм-канале iApps.
- Скачайте файл на смартфоне через браузер.
- Далее откройте AltStore и перейдите на вкладку My Apps.
- В левом верхнем углу тапните плюс, затем на «Загрузки» и найдите скачанное приложение.
- Также можно открыть файл в загрузках через AltStore. Нажмите на значок квадратика со стрелочкой.
Приложение «СберБанка» успешно установилось, но вводить свои данные и идти далее стартового экрана мы не стали. Все же гораздо надежнее в текущих условиях выглядят смартфоны на Android, которые в отличие от iOS позволяют получить банковские приложения по официальным каналам. Если все-таки захотите воспользоваться этим способом, помните: AltStore — неофициальный магазин приложений, и разработчики не отвечают за сохранность данных. Чтобы не подвергать опасности свои финансы, устанавливайте «Сбербанк Онлайн» через официальные источники.
Что еще следует знать
Установленные приложения будут действовать только 7 дней (если у вас нет аккаунта разработчика), однако это не проблема. У AltStore есть полезная функция — он автоматически может их обновлять, если на компьютере запущен сервер и смартфон находится в той же сети. Убедитесь, что AltServer запускается вместе с системой, чтобы все происходило автоматически.
Вы не сможете установить больше трех приложений (включая сам AltStore). Если понадобится другое приложение, то предыдущие придется удалить с устройства.
Как перенести «Сбербанк Онлайн» на новый iPhone
Если способ с AltStore показался слишком сложным или ненадежным, то есть более простое решение, которым поделился блогер Romancev768. К слову, в сети полно предложений по установке «СберБанка» за небольшие деньги (потеряло актуальность в связи с тем, что это можно сделать в офисе «Сбербанка» бесплатно и безопасно), но с нашей инструкцией, все можно сделать и бесплатно.
Способ сработает, если вы ранее уже скачивали на свой телефон (или другое устройство, например, планшет) нужное приложение и вам требуется перенести его на новый (или ваш второй) iPhone. Если же у вас никогда не было приложения «Сбера», то читайте следующий раздел нашей статьи.
Скачайте на компьютер с Windows или MacOS программу iMazing с официальной страницы. Она переведена на русский и для наших целей хватит бесплатной версии, но помните, что некоторые функции, например обновление iOS на устройстве, будут недоступны (лицензия обойдется минимум в 3980 рублей). Подключите смартфон по кабелю. При необходимости разрешите доступ к устройству. При первом запуске программа предложит купить полную версию, а также сделать полную резервную копию, откажитесь.
Находясь в главном меню, выделите нужное устройство, затем кликните на вкладку «Управление приложениями» и далее в «Медиатека». Теперь попробуйте найти в поиске «СберБанк Онлайн». Если ничего не нашлось, то нажмите на нем правой кнопкой мыши и затем — «Установить на устройство».
Если приложение не нашлось, то понадобится ваш старый iPhone, на котором приложение установлено. Подключите его к программе и найдите приложение. Кликните на нем правой кнопкой мыши, затем на «Добавить в библиотеку». Также приложение можно экспортировать в виде файла формата ipa, а затем снова импортировать в библиотеку. После этого подключите новый телефон и установите приложение.
Как установить «СберБанк Онлайн»
Если на смартфоне никогда не устанавливался «СберБанк Онлайн» или вы используете новый Apple ID, то в «Медиатеке» ничего не будет. В этом случае придется переносить «Сбер» с другого устройства. В этом случае помогут друзья или рлдственники, у которых можно одолжить айфон.
Важно! Так как «Сбер» будет привязан к конкретной учетной записи App Store, вы не сможете просто установить его на свой айфон. Придется вводить данные от чужого Apple ID на своем устройстве. Это стоит учитывать, потому что не каждый пользователь на это согласится.
Порядок действий практически тот же. Подключите телефон кабелем к ПК и запустите программу iMazing. После этого кликните на смартфоне правой кнопкой мыши и выберите «Управление приложениями».
На вкладке «Устройство» найдите установленный «Сбер» (или его клон «СБОЛ») и перетащите его на «Рабочий стол» (если делаете это впервые, то выскочит окошко с призывом перезапустить Windows Explorer). Как вариант, можно кликнуть на приложении правой кнопкой мыши и далее «Создать копию данных приложения».
В следующем окне можно будет изменить место для сохранения файла (в нашем случае это «Рабочий стол»). Теперь нажмите «Далее» и дождитесь окончания процесса извлечения. В процессе программа может запросить пароль для резервной копии. В результате у вас должен получиться файл с расширением imazingapp. Обратите внимание, что не всё можно восстановить подобным образом.
Не закрывая iMazing, подключите айфон, на который вы хотите перенести «Сбер». Выберите это устройство и кликните на кнопку «Быстрый перенос» в правой части экрана. В новом окне перетяните только что созданный файл в указанную область или укажите путь к файлу через «Выбрать».
Далее подтвердите, что вы переносите «СберБанк Онлайн» именно в «Приложения» (скорее всего, будет доступен только один пункт, как на скриншоте). Нажмите кнопку «Перенос» в правом нижнем углу экрана, а затем «Продолжить» (потребуется отключить функцию «Найти iPhone» в настройках iOS).
Наконец, введите данные от Apple ID, который был использован для скачивания «Сбербанк Онлайн». Если подключена двухфакторная аутентификация, то также понадобится ввести код подтверждения, который получите при попытке входа. Дождитесь процесса восстановления и следуйте инструкциям программы.
Важно! Когда на телефоне появится экран «Ваши настройки для нового iPhone», нужно нажать «Настроить», а не «Продолжить». Затем из списка нужно выбрать «Не переносить приложения и данные».
Последним шагом останется только войти в свой аккаунт «Сбербанк Онлайн», используя номер карты, телефона или другой способ авторизации, и пользоваться им как обычно.
Что еще стоит учитывать
Позаботьтесь о безопасности и конфиденциальности. Программа iMazing создана сторонним разработчиком и не принадлежит компании Apple. После установки «Сбера», VK и других полезных сервисов, оказавшихся под санкциями, стоит сменить пароль. Хотя репутация у iMazing незапятнанная и никакой негативной информации в сети нет, лучше перестраховаться.
Если «СберБанк Онлайн» найти не удалось, стоит попробовать поискать его альтернативную версию — «СБОЛ», которую в течение некоторого времени можно было скачать на телефон из русского App Store («Сбербанк» периодически добавляет его, но затем компания Apple убирает из каталога, например, 10 октября 2022 года «СБОЛ» повторно появился, а затем снова пропал, то же самое происходило и в апреле 2023 года). Возможно, у кого-то из знакомых получилось его скачать. По возможностям «СБОЛ» не отличается от стандартной версии мобильного банка — можно проводить любые операции и пользоваться другими услугами «Сбербанка».
Даже если вы скачаете полноценный «Сбербанк Онлайн», устройства Apple в любом случае не подойдут для бесконтактной оплаты через NFC, так как она работает только с Apple Pay, где карты «Сбербанка» не принимаются.
Указанным в статье способом можно скачать и установить не только сервисы «СберБанка», но и другие, например, про «Тинькофф Банк» можно подробнее прочитать по ссылке.
Стоит учитывать, даже если «СберБанк Онлайн» тем или иным способом установится на устройство, обновления приходить не будут. Из-за этого, во-первых, страдает безопасность (разработчики не могут закрывать уязвимости в приложении). Во-вторых, нет гарантии, что все будет работать на новой версии iOS.
Если вас устраивает мобильная версия сайта «СберБанка» или любого другого банка, то в приложении как таковом смысла нет. По возможностям мобильная веб-версия «Сбербанк Онлайн» мало чем отличается — можно проводить все те же операции, управлять деньгами и счетами, проверять баланс карты, оплачивать штрафы и ЖКХ, менять валюту, осуществлять платежи и переводы, открывать вклады, погашать кредиты и получать другие услуги через интернет. Подробнее о том, как на iOS вывести ярлык для быстрого доступа к веб-версии «Сбера» мы писали в отдельной статье. Дополнительная информация доступна на официальной странице «Сбербанка» по ссылке.
Как установить «Сбер» на Android
Смартфоны на Android теперь выглядят еще более убедительно (подробнее читайте в статье «Что выбрать в 2022 году — iPhone или Android-смартфон?»). У них гораздо больше возможностей и ими можно полноценно пользоваться, несмотря на введенные для России ограничения. Так, «Сбербанк Онлайн» отсутствует в Google Play, а Google Pay не принимает русские карты. Но, все это решаемо: для бесконтактной оплаты подойдут карты «МИР», а банковские и другие полезные мобильные приложения можно скачать из альтернативных источников, например, с официального сайта банка или ресурсов вроде 4PDA.
С точки зрения безопасности лучше пользоваться только официальными источниками. Многие банки выкладывают установочные файлы в свободный доступ, с официального сайта пользователи могут их скачать без опасений. Касательно «Сбера» все просто — у банка есть официальная инструкция для пользователей смартфонов на Android (скачать файл apk можно по ссылке). Также клиентам банка рекомендуется использовать альтернативные сторы, например, Huawei AppGallery, RuStore и Samsung Galaxy Store. Подробнее о том, что делать владельцам Android мы писали в отдельной статье.
Это тоже интересно:
- Как поменять фон, аватар и скачать СберТян в «Сбербанк Онлайн» и «СБОЛ»
- Оплата улыбкой и не только. «Сбер» обновит свои терминалы
- Встречаем Kandinsky 2.2 — новая версия нейросети Сбера
Как работают приложения Сбербанк Онлайн: Workflow API и фрэймворки
Много кто пользуется приложением Сбербанк Онлайн, но немногие знают, как оно работает. Настало время приоткрыть завесу тайны – в этой статье мы расскажем о некоторых подходах, которые используем в разработке.
Здесь не будет биг даты, блокчейна, аджайла и другого рокет-сайенса. Зато будет описано API, на котором работают наши самые популярные приложения. Ценность этой статьи не в прорывных идеях, а в подходах и практиках, которые работают в большом приложении с одной из самых требовательных аудиторий.
Надеемся, что наш опыт поможет читателям сделать свой продукт лучше, а главное масштабируемым, потому что большинство шишек при разработке API мы уже поймали и исправили.
О чем пойдет речь
Мы расскажем, как в мобильном и веб приложениях Сбербанк Онлайн работают платежные сценарии, а именно про API между приложениями и сервер-сайдом.
Почему фокус на API? Все просто – это фактически единственный мостик, который соединяет клиентские приложения и бэкенд. Если проект небольшой, то мы можем легко менять API и переписывать под него приложения. Но если проект масштабный (такой, как у нас), то даже небольшие изменения API требуют вовлечения большого количества ресурсов как на фронте, так и на бэкенде, и становятся очень дорогими. И второй момент – чем раньше мы зафиксировали API, тем раньше фронтальные и бэковые команды могут начинать разработку. Им просто надо будет сойтись в одну точку.
Сначала мы немного расскажем о наших возможностях и ограничениях, чтобы было понятно, почему мы выбирали то, а не иное решение, а потом представим сам протокол API на верхнем уровне.
Специфика и мотивация
Приложения большие. Когда мы писали эту статью, приложение Сбербанк Онлайн на Android занимало около 800 000 строк кода, на iOS – 500 000 строк кода. И это только наш код, без подключаемых библиотек.
Обратная совместимость и много пользователей. MAU – 32 млн активных пользователей мобильного приложения. И если мы не сделаем обратную совместимость на уровне API, очень многим пользователям по всей стране придется качать приложения заново. Это очень нехорошо. Кстати, это одна из причин, почему у нас так много кода.
Сбербанк Онлайн разрабатывает много небольших команд. Вы, наверное, слышали про Agile в Сбербанке. Это правда, мы работаем по Agile в командах по 9 человек.
Приложение банковское: несмотря на то, что функциональность банковских приложений растет очень быстро, основное, что происходит в дистанционном банкинге – это последовательный процесс (обработка клиентских заявок). Такие процессы мы называем workflow. Заявки эти могут быть разного рода и обрабатываются они огромным количеством взаимосвязанных сервисов в периметре банка.
Два типа команд. Есть платформенные – они отвечают за разработку ядра приложения. И есть фичёвые команды – они создают прикладной функционал для конечных пользователей, используя архитектуру и инструменты, которые даёт платформа.
Омниканальность. Крайне важная история. Чтобы не разрабатывать бэк несколько раз – отдельно для мобильных приложений и отдельно, например, для веб-версии и банкоматов, нужно сделать так, чтобы API был максимально схожим для всех каналов (как минимум должна быть одинаковой структура ответа).
Мобильное приложение
Данные меняются динамически. Самые популярные операции в мобильном приложении – платёж и перевод. Реквизиты поставщиков услуг, набор полей, которые необходимо заполнить пользователю, – это динамическая информация, которая может часто меняться.
При этом пользователи могут не обновлять приложение, после того как установили его на устройство. Просто потому что могут. Чаще на это есть весомые причины, например, для обновления приложения нужно обновить версию ОС, а для этого купить новый телефон. Поэтому нам нужно решение, которое позволит менять данные без релиза приложения.
Мобильный интернет: наши приложения должны работать везде, даже где интернет нестабильный и медленный. Поэтому мы всегда боремся за размер и количество сообщений между мобильными приложениями и сервер-сайдом.
Лучший клиентский опыт: мы выбрали для себя основную технологию разработки мобильных приложений – разработка на нативных языках. Только так можно получить лучший клиентский опыт.
Если обобщить все эти требования – приложения должны разрабатываться на нативных языках, иметь повторно используемые компоненты внутри себя, но при этом вся бизнес-логика должна управляться со стороны сервера.
Как делать не стали
После того как мы обозначили граничные условия, расскажем, какие существующие решения мы анализировали.
Программирование на JSON
Логику проще описать императивно кодом, чем выдумывать (и изучать!) новый декларативный язык, который всегда будет ограничен сильнее, чем родной язык платформы. Кроме этого, надо предусмотреть песочницу, обработку ошибок, какой-то этап пилотирования – псевдокод должен постепенно распространяться на пользовательские устройства и при любых сбоях откатываться назад. Всё это усложняет разработку без ощутимых преимуществ.
Не используем описание стилей компонентов, поскольку они могут разниться от форм-фактора, платформы и даже режима работы (портретная/ландшафтная ориентация, responsive в web). Декларации стилей в конечной реализации всегда будут качественнее, ближе к реальности и корректнее работать с краевыми случаями. Кроме этого, бывает, что компоненты со схожей логикой принципиально по-разному работают на разных устройствах: например, ввод номера телефона – с телефонной книгой на мобильном устройстве и без неё в вебе.
Фиксация модели данных в интерфейсе приложения
Этот способ еще называется «прибить гвоздями». Смысл в том, что интерфейс приложения строится на уникальных идентификаторах объектов, которые передаются с сервера. В такой схеме любые изменения на стороне сервера приводят к переработкам клиентской части. Невозможно повторно использовать код. Сложно поддерживать.
Единственное, почему стоит выбирать такой способ на своем проекте, – уверенность на 99%, что API не будет меняться. Ну или если проект совсем небольшой и проектировать API дороже, чем быстро переделать пользовательский интерфейс под изменения в API.
Добавляем к каждому объекту признак стиля. UI приложений строим на основании этого признака. Стилей ограниченное число, поэтому появляется возможность строить интерфейс динамически. Но с увеличением функциональности UI приходится увеличивать количество стилей.
В этом варианте становится возможно управлять отображением отдельных элементов, но повышается сложность реализации связанности между разными полями. И главное – с ростом вариативности UI у вас будет постоянная необходимость расширять протокол API.
У JSON API детально описаны рекомендации по структурированию данных и описанию взаимосвязей между ними, но нет ничего, что могло бы описывать представление. Наша задача затрагивает в том числе визуальное расширение – добавление новых полей ввода, так что такой вариант нам не подходит.
Web Components / React Components API
Концепция веб-компонентов, которая в том числе значительно повлияла на API компонентов React, нам подходит уже намного лучше: с одной стороны, у нас есть контроль за отображением, с другой стороны – есть возможность привязывать данные к элементам UI.
К сожалению, всё слишком сильно завязано на HTML + CSS + JS. Напрямую не используешь, но запомним – потом пригодится.
Как решили делать
UI-контейнеры
Объекты упаковываются в контейнеры, презентационную логику приложения строим на этих контейнерах. Основное преимущество – можем группировать несколько простых объектов в один контейнер. Это дает свободу в программировании UX/UI на клиенте, например, можем управлять скрытием/отображением одного поля при заполнении данных в другом. При этом базовых типов объектов – ограниченное число, и весь бизнес-транспорт реализуется на них.
Мы выбрали именно этот подход. Сначала мы опишем протокол API, а потом – как устроены фрэймворки внутри мобильных и веб-приложений.
API
Чтобы было понятнее, рассмотрим API на примере простого процесса, например, перевод между своими счетами. Как добираемся до точки входа, не рассматриваем – это не процесс и для этого есть свой API (о нем мы тоже как-нибудь расскажем). Итого, процесс у нас начинается с точки входа:
Транспорт данных
Для начала договоримся об основных принципах – как передаём данные. За основу возьмём самый простой подход – пары «ключ-значение». Ключом пусть будет строка из букв латинского алфавита, значение – тоже строки, но уже произвольные.
Формы для заполнения бывают сложные, с вложенными элементами и подразделами, значит, надо допускать вложенность. Можно именовать ключи в формате camelCase, но они могут быть плохо читаемым (например, в логах) или даже «портиться» в системах, нечувствительных к регистру. Нужно ввести разделитель.
Самый очевидный разделитель – точка – во многих языках используется для доступа к свойствам объекта. При неаккуратном использовании ключи с таким разделителем будут создавать словари (или объекты), в которых возможны коллизии. Например, “foo.bar” = “foobar” и “foo.bar.baz” = “foobarbaz” в javascript может повлечь перезапись свойства “bar” объекта “foo” со строки на объект. В конце концов, договорились на двоеточии: с одной стороны, явное визуальное разделение и семантическое отражение вложенности, с другой стороны, достаточно безопасно для всех используемых языков.
Что делать с повторяемыми полями? Вводим дополнительное правило: между парой разделителей могут быть либо латинские буквы, либо цифры. Получаются конструкции вида: children:5:name:first.
Пожив некоторое время с такой структурой, обнаруживаем ограничение: множественный выбор оказывается нетривиальным в реализации и требует дополнительных ухищрений на бэкэнде, чтобы держать высокую нагрузку.
Решение: значение – либо строка, либо список строк. Так решение выглядит типовым, но в то же время накладные расходы оказываются незначительными.
Шаги
Шаг – это состояние процесса. Первый шаг у нас – выбор счета списания и счета зачисления и ввод суммы.
UI на этой картинке не видно, потому что шаг – это про серверную логику, а не про презентационную. Есть два подхода к работе с шагами: можно передавать с сервера только разницу (нарастающий итог в клиентском приложении) или каждый шаг целиком (нарастающий итог на сервере).
Анализ требований показал, что в ходе процесса экран может формироваться по-разному на разных шагах (ветвление процессов), поэтому вместо добавления управляющих команд для преобразования уже переданных сущностей проще каждый шаг передавать полностью таким, каким его должен увидеть пользователь.
Из дополнительных плюсов: при возврате к редактированию не нужно проигрывать весь сценарий или передавать дополнительный параметр “отдай всё”. При старте шага клиентское приложение сразу же получает всю нужную информацию для построения экранов.
"output": "screens": "events": "references":Экраны
Экран – это разделение процесса на этапы в клиентском приложении. Как правило, экраны используются, чтобы форма была проще для восприятия. В нашем случае всё просто: один шаг – один экран.
Для экранов мы ввели два правила:
- переход между экранами может быть только линейным, без ветвлений;
- переход между экранами не требует взаимодействий с бэкэндом.
"screens": "title": "UI Block": "properties":UI компоненты (блоки)
UI компонент – независимый компонент, который реализует клиентскую логику и наполняет документ данными. По сути, это ассоциация между управляющей командой в протоколе и куском кода и разметки в приложении. На первом экране три компонента:
- Счет списания
- Тот же компонент для счета зачисления
- Сумма перевода
Иногда что-то может пойти не так: например, в старую версию приложения передался новый процесс или старая версия блока была удалена в клиентском приложении, но осталась в одном из процессов серверного приложения. В этом случае приложение выполняет мягкую деградацию: блок заменяется на системный (простая группа полей), который не обладает никакой дополнительной логикой, а просто показывает поля в составе. Подробнее будет ниже.
В таком случае форма будет менее красивой, но пользователь хотя бы сможет заполнить данные и отправить их на сервер. Затем сервер провалидирует ввод и вернёт ошибки, которые можно исправить.
"UI Block": "type": "properties": "field": Поля
Поля – это атомарные компоненты, которые выступают транспортом для отдельных элементов данных и обрабатывают пользовательский ввод в случае деградации блока. Типов полей ограниченное число и все они поддерживаются на уровне фрэймворка: text, checkbox, select, multiselect.
Это значит, что любая версия приложения может отрисовать интерфейс, опираясь только на типы полей.
Поля в UI-компонентах из нашего примера:
1. Поле со ссылкой на справочник в счете списания и счете зачисления. Почему ссылка на статический справочник? Потому что счет мы выбираем из списка карт (счетов), без лишнего обращения к серверу.
2. Два отдельных поля для суммы и валюты в компоненте ввода суммы
Таким образом, формат для полей имеет такую структуру:
"field": "id": "type": "title": "value": "style": "validator": События
Так как приложения ничего не знают о процессе, логично, чтобы события (кнопки, которые видит пользователь) тоже были частью ответа от сервера.
События мы разделили на два типа.
1) Основные – они есть почти на каждом экране в привычных местах для пользователя. Как пример, это события «назад» и «продолжить». Первое осуществляет переход на шаг назад, а второе собирает заполненные данные с клиентской формы и отправляет их на сервер вместе с командой «Перейти на следующий шаг».
2) И специальные – для нестандартных действий, которые мы заранее спрогнозировать не можем, да и смысла закладывать их в часть движка нет, так как они редко используются.
В нашем случае на экране только основные события – «продолжить» и «назад». Они реализованы на уровне платформы.
У всех событий есть ряд атрибутов, такие как сам тип события, title и признак видимости. И никакого UI на сервер-сайде вроде размера кнопки, положения и цвета. Эта логика реализуется на фронте.
"events": "name": "type": "title": "description":Справочники
Со справочниками все стандартно. Если он небольшой, то мы его присылаем полностью в ответе от сервера и называем статическим. Сделано это для того, чтобы минимизировать количество запросов к сервер-сайду и время отклика на действие пользователя в интерфейсе. Чтобы его отобразить в форме на экране, добавляем поле с типом – selectList, одно из свойств которого – ссылка на статический справочник.
Если справочник большой, то он реализуется в виде отдельного rest-сервиса. В интерфейсе это выглядит как текстовое поле, по мере заполнения которого возвращается список возможных вариантов из справочника.
"references": "referenceId":Ошибки валидации на клиенте и сервере
Так как основной элемент интерфейса – поле ввода данных, логично валидировать его на клиенте. Вместе с полями передаются правила валидации и сообщения, которые отображаются, если валидация не прошла.
"validator": "value": "message": "type":Примерно так выглядит структура ответа:
"output": "screens": "title": "UI Block": "type": "properties": "field": "id": "type": "title": "value": "style": "validator": "value": "message": "type": "properties": "events": "name": "type": "title": "description": "references": "referenceId":Фрэймворки
Теперь немного о том, как с этим протоколом работают фрэймворки внутри приложений. Условно фрэймворки можно разделить на две основные части: workflow engine + обработчик UI-контейнеров. Такое разделение вызвано не только архитектурой приложений, но и организационной структурой. Движок разрабатывают и поддерживают платформенные команды, а UI-контейнеры фактически являются точками расширения и их программируют фичёвые команды. Таким образом, большему количеству команд не нужно вносить изменения в ядро.
Workflow engine
Движок внутри приложений (веб и мобильного) знает, что начался процесс работы с документом и что согласно протоколу ему придёт ряд атрибутов: шаги, экраны, UI-контейнеры и типы полей. На этих данных рисуется базовый интерфейс – нижнее и верхнее меню, основные кнопки, UI на простых типах полей, если они используются.
При этом движок не знает, сколько именно в сценарии будет шагов процесса, как шаги будут разбиты по экранам и какие там будут поля.
Если сценарий изменится, например, потребуется отобразить новое поле, то его будет достаточно добавить в ответ сервера, и клиентское приложение его отобразит. Для этого выпускать релиз фронтального приложения не потребуется.
Как работают UI-контейнеры?
Анализ потребностей дизайнеров и бизнес-заказчиков показал, что все потребности не получится удовлетворить простым расширением атрибутивного состава полей.
Поэтому нужны были точки расширения. Этими точками расширения стали UI-компоненты – это нативная реализация кода в самих приложениях, который идентифицируется движком по названию. По сути, это группировка поля/нескольких полей в логический блок, который может отображать кастомный UI. При этом модель данных протокола используются только для транспорта данных на бэкенд, весь UX и UI реализуется на стороне приложения.
Два режима работы фрэймворка
Когда движок парсит модель данных, он сравнивает список имен UI-контейнеров с реестром, который хранится внутри приложения. Если приложение не находит имени компоненты, то интерфейс строится на простых типах полей. Процесс будет полностью рабочим, но на стандартных UI-элементах.
Слева – как может отображаться контейнер для ввода суммы на списке из простых типов полей. Справа – если в сборке приложения есть UI-контейнер. Несмотря на то, что в режиме списка простых полей нет слайдера и есть отдельное поле вместо иконки с выбором валюты, – мы можем передать все данные с PL и процесс будет рабочим.
И тут мы получаем одно из основных преимуществ движка – доставить пользователю изменения без обновления приложения. В сборке есть маппинг имен компонентов на классы, в которых запрограммирован UI этих компонентов и пользовательский интерфейс строится на нем.
Каких правил мы стараемся придерживаться при работе с UI-компонентами:
- Поддерживать работу функционала в режиме списка простых типов полей. У любого прикладного проекта есть соблазн превратить динамический протокол в статический. Поэтому мы всех просим сначала разработать функционал на типовом UI-контейнере, а потом обогащать UX/UI добавлением кастомных контейнеров на этой модели данных. Это не только позволит в будущем обновлять процессы на старых сборках, но и автоматически поддерживает логическую целостность API.
- Не менять модель данных (JSON) для UI-контейнера, если он уже готов (проходит финальное тестирование или уже в продакшене). Так как логика на PL жестко связана с моделью данных, её изменение сломает функционал на версиях мобильного приложения, которые не обновляются. Тем не менее, модель можно расширять при условии сохранения обратной совместимости.
- Называть свой UI-компонент системным именем. Так как имя UI-компонента – обязательный атрибут протокола и должен быть минимум один на каждом экране, мы ввели специальное системное имя, которые реализует простой список полей.
- Не реализовывать бизнес-логику на UI-компонентах. Логику необходимо реализовывать на сервере, почему – писали выше.
Coming soon…
Мы очень старались писать лаконично, но это первая техническая статья про платформу Сбербанк Онлайн и она должна была многое охватить.
Пишите в комментариях, что непонятно, что интересно – постараемся писать меньше, но чаще и в цель. У нас много интересных вызовов, и поэтому много материала.
- dmitry_zadorin Дмитрий Задорин, работает над Сбербанк Онлайн в команде «Интеграционная платформа», Digital Business Platform, Сбербанк и Сбертех
- stcherenkov Стас Черенков, архитектор веб-приложения Сбербанк Онлайн, Сбербанк и Сбертех
Где найти кнопку расширения сбербанк онлайн
Виджет — это информационный блок, содержащий, например, информацию о Ваших счетах или картах.
Вы можете самостоятельно настраивать внешний вид страниц системы Сбербанк Онлайн: добавлять новые блоки (виджеты) на страницу, удалять их, изменять положение виджетов относительно друг друга, перемещать боковое меню, а также настраивать стиль отображения страниц приложения.
Для перехода в режим редактирования страниц щелкните ссылку Настроить в верхней правой части страницы. В результате раскроется панель настройки страницы.
Внимание! Для возможности работать с виджетами в пункте меню Настройки — Настройка интерфейса в разделе Интерфейс выберите значение «Расширенный».
Каталог виджетов
В данном разделе настроек Вы можете добавить новые блоки на главную страницу, изменить их положение, настроить параметры и при необходимости удалить неиспользуемые виджеты.
При входе в этот раздел отображается каталог виджетов, в котором для каждого блока показана иконка, название, краткое описание и ссылка Добавить.
Примечание. Для навигации по списку виджетов Вы можете воспользоваться стрелками и или прокрутить горизонтальную полосу прокрутки под каталогом виджетов.
Для того чтобы изменить наполнение главной страницы системы, Вы можете выполнить следующие действия:
- Добавить виджет. Для того чтобы добавить виджет на главную страницу, в списке виджетов нажмите левой кнопкой мыши на интересующий Вас виджет и, не отпуская кнопку, перетащите его вниз на страницу, либо щелкните ссылку Добавить. В результате виджет появится на главной странице системы.
- Переместить виджет. Если Вы хотите изменить положение виджета на странице, перетащите его на нужное место.
- Настроить виджет. В режиме редактирования Вы можете изменить внешний вид виджетов следующим образом:
- Если Вы хотите свернуть или развернуть блок, щелкните значок в виде стрелочки, расположенный перед названием виджета. В свернутом режиме отображается только название виджета, в развернутом — вся доступная по нему информация.
- Для того чтобы изменить параметры настраиваемых виджетов, щелкните значок . Затем задайте интересующие Вас параметры и нажмите кнопку Применить. Если Вы передумали изменять настройки виджета, нажмите кнопку Отменить.
- Если Вы хотите удалить виджет с экрана, щелкните значок .
Для того чтобы сохранить выполненные изменения, нажмите кнопку Сохранить на панели настройки страницы, и Вы выйдете из режима редактирования. При этом главная страница системы будет отображаться в измененном виде.
Если Вы передумали изменять наполнение страницы, нажмите кнопку Отменить, в результате Вы вернетесь к системе Сбербанк Онлайн без изменений.
Для того чтобы вернуть настройки страниц, заданные по умолчанию, нажмите кнопку Сбросить настройки.
Формат страниц
Вы можете изменить положение бокового меню на страницах приложения. Для этого на панели настроек страницы щелкните ссылку Формат страниц.
Вы можете переместить боковое меню одним из следующих способов:
- Перетащите меню влево. Если Ваше личное меню находится с левой стороны, то перетащите его вправо.
- На панели настроек страницы в разделе «Формат страниц» щелкните значок нужного Вам формата («Меню справа» или «Меню слева»).
После этого нажмите кнопку Сохранить. В результате настройка будет применена ко всем страницам приложения.
Если Вы передумали изменять формат страниц, нажмите кнопку Отменить, в результате Вы вернетесь к системе Сбербанк Онлайн без изменений.
Для того чтобы вернуть настройки страниц, заданные по умолчанию, нажмите кнопку Сбросить настройки.
Настройка стиля
Вы можете выбрать другой стиль отображения системы Сбербанк Онлайн на панели настроек системы в разделе Настройка стиля.
В этом разделе будут показаны иконки с возможными стилями отображения системы. Если Вы хотите изменить стиль, щелкните значок интересующего Вас стиля, и он будет применен к странице, на которой Вы находитесь. Для того чтобы выбранный стиль был применен ко всей системе, нажмите кнопку Сохранить.
Если Вы передумали изменять стиль отображения страниц, нажмите кнопку Отменить, в результате Вы вернетесь к системе Сбербанк Онлайн без изменений.
Для того чтобы вернуть настройки страниц, заданные по умолчанию, нажмите кнопку Сбросить настройки.
Также рекомендуем посмотреть:
- Настройки
- Переводы и платежи