Выбор правильного метода аутентификации для вашего React-приложения

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

Выбор правильного метода аутентификации для вашего React-приложения

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

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

Выбор лучшего метода аутентификации для вашего приложения

Выбор правильного метода аутентификации для вашего React-приложения

Аутентификация может быть выполнена несколькими различными способами, и у пользователей есть несколько вариантов на выбор. Например, компании все чаще внедряют аутентификацию без пароля, что устраняет потенциальный риск потери или кражи паролей. Термин «беспарольный» относится к нескольким различным методам аутентификации, которые можно использовать вместо традиционного статического пароля.

Возможно, вы уже сталкивались с аутентификацией без пароля. Каждый раз, когда вы получаете одноразовый пароль (OTP) или «волшебную ссылку» на свой адрес электронной почты или номер телефона для входа в учетную запись, вы проходите аутентификацию без пароля. Как видите, это набирает популярность, поскольку людям больше не нужно создавать несколько сложных паролей — им просто нужно максимально защитить свои главные учетные записи, а затем использовать их для получения одноразовых паролей и магических ссылок.

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

Реализация безопасного входа в React с использованием Frontegg

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

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

Выбор правильного метода аутентификации для вашего React-приложения

Мы также можем выбирать из социальных сетей, таких как Facebook, Google, Github и т. д.

Выбор правильного метода аутентификации для вашего React-приложения

Начнем с интеграции панели входа в наше приложение.

Выбор правильного метода аутентификации для вашего React-приложения

Мы будем использовать встроенный вход с помощью React.

На первом этапе мы будем создавать React-приложение. Чтобы сгенерировать команду достижения, используйте эту команду:

   npx create-react-app react-app-with-frontegg

Выбор правильного метода аутентификации для вашего React-приложения

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

   cd react-app-with-frontegg

   npm install @frontegg/react react-router-dom

Выбор правильного метода аутентификации для вашего React-приложения

Теперь, когда у нас есть необходимый код, давайте правильно реализуем панель входа.

Для правильной работы Frontegg Provider должен быть обернут вокруг нашего корневого компонента. Включите следующий код в файл index.js.

import React from ‘react’;\
import ReactDOM from ‘react-dom’;\
import App from ‘./App’;\
import ‘./index.css’;

import { FronteggProvider } from ‘@frontegg/react’;

const contextOptions = {\
baseUrl: ‘https://app-yvs5knxxwv8i.frontegg.com’,\
};

ReactDOM.render(\
<FronteggProvider contextOptions={contextOptions}>\
<App />\
</FronteggProvider>,\
document.getElementById(‘root’)\
);

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

import React from ‘react’;\
import { useAuth } from ‘@frontegg/react’

function App() {\
const { user, isAuthenticated } = useAuth();\
return (\
<div className=’App’>\
{isAuthenticated && (\
<div>\
<img src={user.profilePictureUrl} alt={user.name} />\
<span>{user.name}</span>\
</div>\
)}\
</div>\
);\
}

export default App;

Когда все будет готово, просто запустите npm с помощью следующей команды:

   npm start   

Выбор правильного метода аутентификации для вашего React-приложения

Экран регистрации будет находиться по адресу http://localhost:3000/account/sign-up.

Экран входа будет находиться по адресу http://localhost:3000/account/login.

Если вы уже вошли в систему, перейдите по адресу http://localhost:3000/account/logout и выйдите из системы.

Выбор правильного метода аутентификации для вашего React-приложения

Заключение

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

Оцените статью
Поделиться с друзьями
Валерий Матафонов

Автор блога WM-IT.pro. Занимаюсь разработкой и оптимизацией сайтов с 2010 года.

WM-IT.pro - Блог об информационных технологиях
Добавить комментарий

  1. Георгий

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

    Ответить