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

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

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

Рекомендуется передать сложности процесса аутентификации третьей стороне, используя аутентификацию без пароля. Поэтому сегодня мы рассмотрим защиту приложений Vue.js с помощью аутентификации без пароля.

Что такое беспарольная аутентификация?

Аутентификация без пароля использует концепции безопасного шифрования с открытым и закрытым ключами через OAuth и SAML, чтобы предоставить пользователям доступ к вашей платформе через доверенных сторонних поставщиков удостоверений, таких как Google, Okta или Facebook. Ваше приложение отправит запрос одному из этих поставщиков удостоверений, и они подтвердят личность вошедшего в систему пользователя. Как только они разрешат это, ваше приложение получит токен, содержащий информацию о пользователе. Поскольку вы уверены, что Facebook отвечает их личностью, они аутентифицируются без необходимости создавать новый пароль!

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

В современных приложениях мы можем отдать на аутсорсинг большую часть тяжелой работы по поддержке безопасных решений, внедрив службы, которые сделают это за нас. В сегодняшнем уроке мы будем использовать Frontegg, провайдер аутентификации, и Vue.js, прогрессивный веб-фреймворк. В частности, Frontegg — это инструмент управления пользователями, который обеспечивает отличный контроль над пользовательскими функциями и аутентификацией.

Настройка беспарольной аутентификации с помощью Frontegg

Предпосылки

Чтобы использовать Frontegg, нам понадобится некоторый контент для аутентификации. Создайте папку для проекта, затем npm init папку, чтобы мы могли использовать npm для проекта.

Далее мы установим зависимости. Если у вас еще нет Vue CLI, загрузите его, запустив npm install –global vue-cli, а затем npm i vue, чтобы получить поддержку Vue локально.

Руководство

Нам нужно создать шаблон приложения, поэтому запустите npm create vue@3, чтобы запустить создание шаблона проекта Vite. Я собираюсь использовать TypeScript, JSX и маршрутизатор Vue. Как только это будет сделано, перейдите в каталог и запустите npm install, чтобы настроить зависимости. Теперь мы можем npm run dev запустить сервер Vite и увидеть, как приложение работает локально.

Следующее, что мы хотим сделать, это очистить шаблон. Домашнее представление будет иметь смысл для нас после того, как мы завершим вход в систему, поэтому давайте пока сохраним его и удалим /view/AboutView.vue и отредактируем index.ts, чтобы также удалить маршрут для него. Я также собираюсь зайти на Unsplash.com и взять изображение для отображения на главном экране, заменив HomeView.vue на <BeautifulView /> в качестве компонента, который мы показываем. Вот код:

Если вы сейчас перезагрузите браузер, выбранное нами изображение отобразится справа от значка Vue. Так легко!

Но нашему приложению необходимо скрыть это представление от неавторизованных пользователей. Для этого нам понадобится какая-то защита маршрута и возможность отслеживать аутентифицированное состояние пользователя во время его перемещения по системе. Мы установим Frontegg с npm i @frontegg/vue.

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

Здесь мы добавили код приложения для просмотра «Предварительный просмотр». Когда пользователи впервые попадут на сайт, они увидят это очень красивое изображение, но оно будет размытым:

Мы также добавим ссылку маршрутизатора на страницу /authenticated — HomeView, куда наши пользователи будут переходить, чтобы инициировать процесс входа в систему. Итак, давайте вернемся к HomeView и внесем некоторые дополнения, поскольку у нас установлен Frontegg. Вот код:

Теперь метод настройки и экспорт по умолчанию в HomeView будут вызывать useFrontEggAuthGuard, который автоматически перенаправляет на страницу входа без пароля, если мы не вошли в систему через Frontegg.

Я буду использовать выбор «Войти с помощью» Google внизу, чтобы войти в систему. Frontegg выполнит рукопожатие SSO, которое получит токен входа для меня, и перенаправит на страницу, которую я указал в своей конфигурации. Нас снова встретит наш прекрасный вид:

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

Заключение

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

Frontegg делает добавление безопасности к вашим приложениям Vue простым и быстрым, и вы будете наслаждаться преимуществами и спокойствием безопасного решения для управления учетными записями. Интеграция их библиотеки соответствует спецификации Vue, и с ней довольно легко работать! Они также имеют сертификаты GDPR, CCPA, SOC 2, CSA Star, L1 и ISO27001, с которыми сложно иметь дело.

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

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