Проекты

Кейс: менеджер паролей с браузерными расширениями для 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 — закодированное значение поля

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

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

Перезвонить вам, чтобы ответить на вопросы?

Когда с вами связаться?

Связаться по телефону:+7 499 321-59-32

Нажимая на кнопку, я принимаю условия политики и пользовательского соглашения

Фото эксперта
Дмитрий

Проектный менеджер

Получите ответ на ваш вопрос в любимом мессенджере

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

Telegram WhatsApp

Рассчитать стоимость проекта

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

Напишите ваше имя
Укажите ваш email

Выберите удобный для вас способ связи

Мы сразу получим ваш запрос и поможем в решении проблемы

Написать в Telegram

Написать в WhatsApp

Позвонить нам