БЕСПАРОЛЬНАЯ АУТЕНТИФИКАЦИЯ В REACT + MOJOAUTH Текст научной статьи по специальности «Компьютерные и информационные науки»

Столыпинский вестник №9/2022

Научная статья Original article УДК 004

БЕСПАРОЛЬНАЯ АУТЕНТИФИКАЦИЯ В REACT + MOJOAUTH

PASSWORD-FREE AUTHENTICATION IN REACT + MOJOAUTH

Берьянов Максим Сергеевич, Магистрант, 2 курс, Факультет ПИиКТ, Университет ИТМО Россия, г. Санкт-Петербург

Монченко Артем Сергеевич, Магистрант, 2 курс, Факультет ПИиКТ, Университет ИТМО Россия, г. Санкт-Петербур

Богданов Илья Александрович, Магистрант, 2 курс, Факультет ПИиКТ, Университет ИТМО Россия, г. Санкт-Петербург

Buryanov Maxim Sergeevich, [email protected] Monchenko Artem Sergeevich, [email protected] Bogdanov Ilya Alexandrovich, [email protected]

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

Столыпинский вестник

5247

произведено исследование создания React-приложения с использованием данного сервиса.

Abstract. Passwordless authentication is a new improved alternative to the traditional username and password authentication method. It improves overall security and reduces costs for the company. It can be difficult to create an application with this kind of authentication from scratch, but MojoAuth takes care of many nontrivial aspects of the technology in question, providing a turnkey solution and flexibility to choose an authentication mode. This article will explore the creation of a React application using this service.

Ключевые слова: веб-разработка, React.JS, аутентификация, MojoAuth. Keywords: web development, React.JS, authentication, MojoAuth.

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

Аутентификация без пароля [1], как следует из названия — это способ аутентификации пользователей без необходимости использования паролей. Вместо этого для аутентификации используется какой-либо однозначный идентификатор, например адрес электронной почты или номер телефона. Затем на данный идентификатор отправляется «магическая» ссылка [2] или одноразовый пароль [3], который используется для аутентификации пользователя. Каждый запрос генерирует новую ссылку или OTP и делает недействительными все предыдущие успешные аутентификации для обеспечения безопасности.

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

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

5248

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

В этой статье мы получим базовое представление об аутентификации без пароля и научимся включать ее в приложение React [4]. Мы создадим интуитивно понятное приложение, управляющее пользовательскими маршрутами для лучшего пользовательского взаимодействия.

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

В первую очередь, необходимо проверить, установлен ли на компьютере инструмент Node.JS с помощью команд node -v и npm -v в терминале. В случае отображения установленной версии, можно продолжать дальнейшую настройку проекта, иначе Node.JS нужно скачать с официального сайта (Node Package Manager установится автоматически). Исследование процесса интеграции

Для демонстрации мы будем использовать библиотеку MojoAuth [5] в качестве службы аутентификации без пароля. Для начала нужно создать учетную запись на MojoAuth. После этого нужно инициализировать React проект с помощью приложения create-react-app: npx create-react-app mojoauth-demo. Данная технология облегчает нам задачу по настройке множества аспектов разработки, к примеру, таких как сборщик проекта, его окружение и другие. Иными словами, запустив данную команду мы получаем уже готовый проект «из коробки». Далее нужно установить обсуждаемую нам библиотеку: npm

5249

install mojoauth-web-sdk. В качестве UI, мы будем использовать компоненты Semantic UI [6]: npm install semantic-ui-react semantic-ui-css. Чтобы добавить маршрутизацию в проект, необходимо установить библиотеку React Router [7]: npm install react-router-dom.

В панели инструментов MojoAuth необходимо получить свой ApiKey и добавить URL-адрес проекта в список разрешенных в разделе настроек. Также, предыдущие данные нужно указать в файле config.js, который нужно создать в папке src (рисунок 1).

mojoauth-demo -/Desktop/a

> idea

> ■ node_modules library root

> public v src

I config.js

index.css jS index.js {> package.jsor О package-lockjson

> 11 External Libraries

> Scratches and Consoles

•Î function getConfigO {

return -£ api_key:

process.env.REACT_APP_MOJCAUTH_APIKEY I I 1 JPk. . .¿.BMW1 , redirect_ur"l:

process.env.REACT.APP_REDIRECT.URL || http://localhost:3EBB/dashboard',

};

export default getConfigO;

Рисунок 1 - Конфигурационный файл Теперь приступим к созданию интерфейса Login пользователя. В папке src необходимо создать еще одну папку с именем login, где будет находиться файл

LTseÉ//ect( effect С) => { let mojoconfig = -( language: "en",

source: [{type: 'phone', feature: 'otp'}, -{type: 'email', feature: 1magiclink1>], reclirect_url: config. redirect_url

>

const mojoauth = new MojoAuth(config.api_key, mojoconfig); localStorage.getltemf key; 1 React-AccessToken1) ? navigate С'/dashboard 1) : mojoauth, siginInC) .thenCpavlcad -> {

localStorage.setItem('React-AccessToken', pavload.oauth.access_token) localStorage.setltemCReact-Identifier', pavload.user.identifier)

>, deps: []);

Рисунок 2 - Объект входа MojoAuth с именем index.js. Этот файл будет содержать необходимый код.

5250

В хуке useEffect инициализируем объект MojoAuth и вызовем метод signin. Сохраним токен доступа и идентификатор в локальном хранилище для дальнейшего использования (рисунок 2).

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

Во-первых, импортируем необходимые компоненты. Во-вторых, в компоненте Dashboard получаем stateid из URL-адреса. Далее, в хуке useEffect входим в систему, используя идентификатор состояния и вызывая функцию signlnWithStatelD (рисунок 3).

const params = search ? QueryString .parse (search. search) : {}-;

moioauth.signlnWithStatelD fpa rams.state_id).then(paylead => {

localsto rage.setltemf'React-Accessio ken', pavload.oauth.access_token); localsto rage.setltemt1React-Identifier', pavload.user.identifier);

Рисунок 3 - Использование идентификатора состояния для входа Создание интерфейса

Теперь мы хотим показать форму входа во всплывающем окне. Для этого мы будем использовать сущность Modal из Semantic UI. Для этого нужно определить состояние, которое будет содержать параметры открытия и закрытия всплывающего (модального) окна.

В качестве возвращаемого значения компонента Login обозначим модальное окно, чтобы отобразить его при нажатии на кнопку входа (логина), как это можно заметить на рисунке 4. Для того, чтобы экземпляр MojoAuth запускался

5251

только при открытии всплывающего окна, устанавливаем условие if (open) {} в функции useEffect.

return t<>

<div className=1 container1 >

<hl className=1 main-title'>React + HojoAuth Research Article </hl? <div className='login-container'?

<hl className=1 title 1?До6ро пожаловать!</hl>

<h4 className= ' subtitle 1 ^»Войдите, используя HojoAuth</h4>

<Modal

onClose = -(0 setOpen С value; false)}

onOpen = -{C) => setOpen С value; true)}

open^open}

dimmer=-itrue}

basic={true}

size =1 tiny'

trigger=-£<Button className='login' primary?BoiiTH</Button?}

<cliv id= ' mojoauth-passwordless-form' ></div> </Hodal>

<p className='footer'>Используя MojoAuth</p> </div> </div>

Рисунок 4 - DOM-объект входа

const App = О -> { return С <Routes>

<Route path='/h exact element={<Login/>}/> <Route path= '/dashboard ' exact element=-{<Dashboard/>}/> </Routes>

);

Рисунок 5 - Маршрутизация в приложении В компоненте Dashboard покажем имя пользователя (идентификатор), если пользователь вошел в систему. Кроме того, также отобразим кнопку выхода,

5252

которая выведет пользователя из системы и удалит токен доступа из локального хранилища (рисунок 5).

return С

<div className='container'?

<hl className='main-title'>React + MojoAuth Research Article Dashboard </hl? <h3 className="main-subtitle">Bbi успешно вошли!</ЬЗ> <div className='login-container1>

<hl className=1 title 1>Добро пожаловать </hl>

<h4 className= ' subtitle '>-{localStorage. getltem( key: 1 React-Identifier1 )}</h4> «Button className='login' primary onClick=-(0 = > { localStorage. removeIterri( key: ' React-AccessToken 1); }}?Logout</Button?

<p className=1 footer1>Используя HojoAuth</p> </div> </div>

Рисунок 6 - DOM-объект успешного входа После того, как наши компоненты логина и панели управления (Login, Dashboard) готовы, наступает очередь маршрутизации. В файле app.js предлагается использовать маршруты из загруженной в начале данной статьи библиотеки react-router-dom. Данные

маршруты будут выводить созданные ранее

компоненты в зависимости от названия пути. Подробнее это можно увидеть на рисунке 6.

Рисунок 7 - Ввод почтового ящика

Рисунок 8 - Ожидание

5253

Таким образом, можно запустить приложение, используя команду npm start. Главный результат данного исследования заключается в полностью работающем приложении на библиотеке React,

предоставляющем важную функцию беспарольной аутентификации с помощью почтового ящика. Примеры работы представлены на рисунках 7 и 8. Письмо, высланное на почтовый ящик, можно увидеть на рисунке 9. После того, как произойдет переход по ссылке, предложенный почтовый ящик будет подтвержден, и мы получим новый идентификатор состояния, тем самым достигая необходимого функционала от приложения в виде беспарольной аутентификации по email. Таким образом, было продемонстрировано использование современных технологий в области веб-разработки интерфейсов и, в частности, контексте аутентификации. Удобство беспарольной аутентификации, несомненно, является полновесным доказательством того, что данный принцип аутентификации будет распространяться на многие приложения и веб -сервисы в будущем. Подобные сервисы, как MojoAuth помогают реализовывать данный принцип, и, как мы убедились ранее, достаточно тривиальным и проверенным способом.

Библиографический список

1. Беспарольная аутентификация [Электронный ресурс] URL: https://habr.com/ru/company/vk/blog/343288/ (дата обращения: 08.11.2022).

2. Отправляем магические ссылки с помощью Node.js [Электронный ресурс] URL: https://habr.com/ru/company/vk/blog/343288/ (дата обращения: 08.11.2022).

Рисунок 9 - Верификационное письмо

5254

3. TOTP (Алгоритм Time-based One-Time Password) [Электронный ресурс] URL: https://habr.com/ru/post/534064/ (дата обращения: 09.11.2022).

4. React.js [Электронный ресурс] URL: https://reactjs.com (дата обращения: 09.11.2022).

5. Mojo.Auth [Электронный ресурс] URL: https://mojoauth.com/docs/ (дата обращения: 09.11.2022).

6. Semantic UI [Электронный ресурс] URL: https://semantic-ui.com/ (дата обращения: 09.11.2022).

7. React Router [Электронный ресурс] URL: https://reactrouter.com/en/main (дата обращения: 09.11.2022).

Bibliographic list

1. Password-free authentication [Electronic resource] URL: https://habr.com/ru/company/vk/blog/343288 / (accessed: 08.11.2022).

2. We send magic links using Node.js [Electronic resource] URL: https://habr.com/ru/company/vk/blog/343288 / (accessed: 08.11.2022).

3. TOTP (Time-based One-Time Password Algorithm) [Electronic resource] URL: https://habr.com/ru/post/534064 / (accessed: 09.11.2022).

4. React.js [Electronic resource] URL: https://reactjs.com (accessed: 09.11.2022).

5. Mojo.Auth [Electronic resource] URL: https://mojoauth.com/docs / (accessed: 09.11.2022).

6. Semantic UI [Electronic resource] URL: https://semantic-ui.com / (accessed: 09.11.2022).

7. React Router [Electronic resource] URL: https://reactrouter.com/en/main (accessed: 09.11.2022).

© Берьянов М.С., Монченко А.С., Богданов И.А., 2022 // Научный сетевой журнал «Столыпинский вестник» №9/2022.

Для цитирования: Берьянов М.С., Монченко А.С., Богданов И.А. БЕСПАРОЛЬНАЯ АУТЕНТИФИКАЦИЯ В REACT + MOJOAUTH // Научный сетевой журнал «Столыпинский вестник» №9/2022.

5255