Кейс: менеджер паролей с браузерными расширениями для Firefox, Chrome, Edge и Safari

Кейс: менеджер паролей с браузерными расширениями для Firefox, Chrome, Edge и Safari

Коротко о проекте

  • 01
    Клиент

    Компания из США, которая занимается страхованием и инвестициями

  • 02
    Задача

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

  • 03
    Результаты
    • Разработали SaaS-решение на основе сервиса заказчика
    • Разработали браузерные расширения для Firefox, Chrome, Edge и Safari
    • Сервис сохраняет любые данные пользователей, поддерживает двухфакторную аутентификацию и полное шифрование

Американская компания хочет продавать подписку на менеджер паролей

К нам обратилась американская компания, которая занимается страхованием и инвестициями. У нее была корпоративная программа по хранению паролей на PHP-фреймворке Fat-Free Framework — система заметок со списком категорий, где пользователи сохраняли свои пароли, генерировали QR-коды и делали записи.

Заказчик хотел продавать эту программу как SaaS-решение — коммерческий продукт, распространяемый по подписке. Для этого ее нужно было доработать до полноценного менеджера паролей. Пользователи смогли бы пользоваться сервисом, оплатив один из тарифов: бизнес-, семейный или личный. А компания получила бы дополнительный источник дохода.

В другой статье мы рассказали, как аутсорс-команда OrbitSoft помогает финской компании разрабатывать SaaS-платформу для анализа и автоматизации рекламных кампаний

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

Скриншот 1
Вид базы с зашифрованным паролем для одного пользователя — администратора

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

Скриншот 2
Например, расширение для перевода предлагает перевести текст прямо на странице, без перехода в другие вкладки

Доработали менеджер паролей

Команда OrbitSoft состояла из менеджера, fullstack-разработчика, фронтенд-разработчика, DevOps и дизайнера. Сначала мы проанализировали функции исходного сервиса заказчика и создали план работы. В качестве прототипа выбрали менеджер паролей Dashlane.

Скриншот 3
Прототип плагина — менеджер паролей Dashlane

Мы создали отдельное приложение для регистрации пользователей и управления подпиской. SaaS-платформа и пользовательские функции мы вынесли в разные Docker-контейнеры. Разделять нужно, потому что это разные бизнес-процессы: у них разные ресурсы и микросервисы.

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

Оплата и управление подписками осуществляются через PayPal или Stripe. Какие еще есть сервисы онлайн-оплаты и в чем их особенности, мы рассказали в статье «Какой платежный шлюз самый удобный». Мы сравнили Stripe, CoinPayments, PayPal, Google Play Billing и Apple In-App Purchase, а когда их оказалось мало, предложили заказчику другое решение.

Как работает менеджер паролей

1. Когда пользователь регистрируется на сайте, менеджер паролей генерирует надежный пароль и сохраняет его

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

Как правило, пользователям трудно запоминать такие пароли, поэтому программа не только предлагает случайный набор символов в виде пароля, но и сохраняет его для последующего использования. Также она предлагает сохранить другие часто вводимые данные: номер карты, адрес, ФИО пользователя.

2. При повторном входе на сайт менеджер паролей автоматически подставляет нужный пароль в окно ввода

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

Таким же образом менеджер паролей предлагает автозаполнение при оплате картой и там, где нужно указывать адрес. Это быстро и удобно: пользователю не нужно держать всю информацию в голове и каждый раз вводить ее вручную.

3. Все данные сохраняются в зашифрованном виде

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

Разработали браузерные расширения для Chrome, Firefox, Edge и Safari

По ТЗ заказчика менеджер паролей должен работать в виде плагина в Google Chrome, Firefox и Safari. Все эти браузеры поддерживают Web Extensions API той или иной версии Manifest — API для браузерных расширений от Google.

Мы вели разработку с учетом обеих версий Manifest:

  • Google Chrome и большинство chromium-браузеров уже работают с Manifest V3, а некоторые chromium-браузеры запрещают добавление новых расширений на предыдущей версии Manifest V2.
  • Firefox и Safari пока поддерживают Manifest V2 и частично поддерживают Manifest V3.
  • В некоторых случаях с версии V2 легко перейти на V3.

Мы начали с расширения для Chrome с использованием Manifest V2, чтобы затем импортировать его в Firefox и Safari. После успешной реализации перенесли на Manifest V3 для Chrome.

Скриншот 4
Расширение для Chrome можно скачать из Магазина расширений

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

С браузером Safari было сложнее: разработка требует среды macOS и специфического инструментария. Мы использовали XCode — среду для разработки ПО для Apple. В ней можно не только разработать, но и собрать расширение. Поддержка Manifest V2 в Safari реализована хорошо — импортирование кода для этого браузера не вызвало сложностей.

Результаты

OrbitSoft разработал браузерные расширения менеджера паролей для Google Chrome, Firefox и Safari. Они автоматически сохраняют и обновляют пароли и другие данные пользователей при регистрации на сайтах.

Создание и хранение паролей

Разработчики продумали путь пользователя после клика на кнопку расширения:

Сгенерированные пароли сохраняются в истории в виде списка с отметкой времени. Их можно просмотреть, скопировать в память и буфер обмена, удалить отдельные пароли или весь список.

Двухфакторная аутентификация

Расширение поддерживает как обычную, так и двухфакторную аутентификацию. Для этого есть раздел One-time password — одноразовый пароль. Это набор символов, который пользователь может использовать раз в течение 30 секунд. Это удобно, например, при работе с платежными данными: если злоумышленники получат доступ к одноразовому паролю, они не смогут ввести его повторно.

Скриншот 5
Раздел One-time password

Полное шифрование данных

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

Скриншот 6
Данные полностью зашифрованы. Например, в столбце 1 содержится уникальный идентификатор записи для работы с нужной строкой этой таблицы, а в столбце 3 — закодированное значение поля

В чем бы вы ни нуждались, мы можем помочь!

Расскажите нам, с какими проблемами вы сталкиваетесь в своем бизнесе. Мы с нетерпением ждем вашего ответа.

Получите ответ по смс

Ваше сообщение успешно отправлено!
Представьтесь пожалуйста
Укажите номер, на который придет ответ
Нажимая на кнопку, вы даете согласие
на обработку персональных данных.