Конфигурация http сервиса jwt авторизации + клиент React JS

Публикация № 1472648 04.07.21

Разработка - Системная интеграция - Интеграция с WEB

1c + React js Set-Cookie accessToken refreshToken jwt авторизация http

Если мы используем 1С в качестве Back-End для SPA, очень важно реализовать аутентификацию внешних пользователей. В данной публикации приведен пример конфигурации, реализующей аутентификацию , а также клиент, написанный на React js.

При создании данной публикации использовалась статья Sasha Zmts "Про токены, JSON Web Tokens (JWT), аутентификацию и авторизацию. Token-Based Authentication"
https://gist.github.com/zmts/802dc9c3510d79fd40f9dc38a12bccfc

А также реализация jwt токена на платформе 1с представленная Vasily Pintov
https://github.com/pintov/1c-jwt
 

Api конфигурации

`${API_URL}/?typerequest=login
Комментарий: Получение ключей по логину и паролю

Запрос {email,password}
Ответ {error, AccessToken, RefreshToken}
set-cookie {refreshToken}

`${API_URL}/?typerequest=RefreshToken
Комментарий: Обновление ключей 
Запрос {}
Ответ {error, AccessToken, RefreshToken}
set-cookie {refreshToken}

`${API_URL}/?typerequest=getConformationCode
Комментарий: Получение письма с кодом подтверждения на указанный адрес
Запрос {userID}
Ответ {error, requestKey }


`${API_URL}/?typerequest=getKeyChangePassword
Комментарий: Получение ключа изменения пароля
Запрос {userID, requestKey - уникальный код запроса, формируется сервером при выполнении getConformationCode, code - код из письма}Ответ  {error, key}
 

`${API_URL}/?typerequest=passwordChange

Комментарий: Установка нового пароля
Запрос {passwordСhangeKey, password}
Ответ {error, AccessToken, RefreshToken}
set-cookie {refreshToken}

Для тестирования сервиса авторизации мной был разработан js клиент

Исходный код доступен по ссылке https://github.com/inzarubin80/authorization 

В проекте используются следующие основные библиотеки React, material-uri, formik, redux, react-router axios 

Тестировал на платформе 1С:Предприятие 8.3 (8.3.19.1150) + Apache 2.4.23-x86 

Скачать файлы

Наименование Файл Версия Размер
Реализация http сервиса jwt авторизации

.cf 106,61Kb
2
.cf 106,61Kb 2 Скачать

Специальные предложения

Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. PROGRAM1S 04.07.21 15:04 Сейчас в теме
Для работы с конфигурацией просит 19 платформу. Есть возможность выложить на 18 платформе?
2. van_za 144 04.07.21 16:18 Сейчас в теме
(1) сейчас установлю режим совместимости с 18 и выложу, там нет использования каких то новейших фишек, просто какая была платформа в той и делал.
3. van_za 144 04.07.21 16:29 Сейчас в теме
Если кто решит развернуть клиент локально для разработки в vs code например то в нужно будет в файле setupProxy.js изменить путь к вашему сервису 1с, он тоже должен быть локально (api и фронтенд должны быть в одном домене что бы 1с могла устанавливать куки)
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:80/TaskManagement/hs/api',
changeOrigin: true,
})
);
};
В случае продакшина проксирование нужно делать средствами веб сервера, например так как это описано в
https://gist.github.com/zmts/802dc9c3510d79fd40f9dc38a12bccfc
4. malikov_pro 710 05.07.21 06:04 Сейчас в теме
Еще один шаг к реализации https://github.com/gothinkster/realworld

По JWT нужно указать что это HS256 c использованием статичного ключа на стороне сервера

"очень важно реализовать авторизацию внешних пользователей" - аутентификацию

"Api конфигурации" - postman коллекцией можно реализовать и прогонять тесты (проще чем писать клиент), у realworld http тесты бекенда не проходили при реализации на node.js.
5. van_za 144 05.07.21 09:11 Сейчас в теме
(4) ну как бы да... можно тестирования так не заморачиваться...понятно что для этого не нужна библиотека предназначенная дли визуализации.
вдруг кто то еще работает в связке react + 1c, будет полезно наверное...
6. dkoder 4 22.07.21 14:50 Сейчас в теме
Да связка супер. Только вместо redux, как по мне, лучше использовать MobX State Tree. Технология идеологически ближе к архитектуре 1С. И работать с ней проще.
7. van_za 144 22.07.21 19:54 Сейчас в теме
спасибо за отзыв!

Мне нравится conext появившийся в react, сейчас в основном его использую без отдельных библиотек для состояний.
https://github.com/inzarubin80/btb/blob/master/src/context/

вот что то пишут
https://habr.com/ru/post/489854/ - "Redux против MobX без путаницы"

плюс redux в том что он все таки очень простой... там вроде 80 строк в библиотеке, ну и так сказать создан отечественным программистом:)
минус в том что для работы с асинхронными вызовами (например для запросов на сервер) нужна дополнительная библиотека например react-thunk, ну и громоздкость конструкций
8. dkoder 4 26.07.21 13:01 Сейчас в теме
(7) Уточню. Я говорил не про MobX, а про Mobx State Tree (MST). Использовали его на проектах достаточно крупных интернет магазинов.
Мое мнение, что redux библиотека, и все приходится прописывать руками, особенно, не нравится, что приходится прописывать меппинги в компонентах. А MST ближе к фрейворку. Прописывать нужно гораздо меньше. Структура понятнее. Например, есть товар - он описывается отдельной моделью в MST, и все его реквизиты и методы прописаны в одном файле. Далее в ТЧ заказа делается реквизит с типом товар. При этом очень просто подготовить состояние на back в виде JSON и грузануть в состояние.
Очень похож на известный фреймворк 1С ;)
9. van_za 144 27.07.21 15:25 Сейчас в теме
(8)
Mobx State Tree

буду изучать, спасибо
Оставьте свое сообщение

См. также

daСклонение: склонение ФИО, должностей, чисел, прилагательных, существительных на языке 1С + ТестЦентр Промо

Универсальные функции v8 1cv8.cf Абонемент ($m)

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

1 стартмани

14.02.2015    112853    114    daMaster    90    

Обзор полезных методов БСП 3.1.4

Практика программирования БСП (Библиотека стандартных подсистем) v8 1cv8.cf Бесплатно (free)

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

25.03.2021    27628    rayastar    49    

Сравнение реального дохода со средним доходом из API.HH.RU

Зарплата Управленческие v8 v8::СПР ЗУП3.x УУ Абонемент ($m)

Внешняя обработка на управляемой форме для 1С:Предприятие 8.3 по интеграции с HH.RU используя HH REST API. Ключевые функции: получение списка вакансий по должностям (Ключ для работы не нужен); расчет среднего дохода; Тестирование проводилось на платформе 1С:Предприятие 8.3 (8.3.13.1513) Зарплата и управление персоналом, редакция 3.1 (3.1.11.68) совместно с API.HH.RU.

1 стартмани

11.11.2019    5557    8    solaru    2    

Конфигурация для рекламного агентства

Управление услугами и сервисом Управление взаимоотношениями с клиентами (СRM) Производство готовой продукции (работ, услуг) Управление взаимоотношениями с клиентами (СRM) Производство готовой продукции (работ, услуг) v8 Реклама, PR и маркетинг УУ Абонемент ($m)

Данная конфигурация выполнена для решения тестового задания: Цель задания: 1) Понять, на каком из клиентов сколько мы заработали;  2) Понять, по какому виду СМИ сколько мы заработали;  3) Проследить по каждой услуге: у кого за сколько купили и кому за сколько продали, с возможностью перейти в соответствующий документ. Реализовано с помощью: 1. Справочники - контрагенты, номенклатура 2. Документы - Поступление услуг, реализация услуг 3. Отчеты - отчет по контрагентам, номенклатуре и движений.

1 стартмани

21.05.2019    7514    0    solaru    0    

Загрузка номенклатуры в УТ 10.3 из Excel файла с генерацией штрихкодов

Загрузка и выгрузка в Excel Обработка справочников Оптовая торговля Розничная торговля Учет ТМЦ Оптовая торговля Розничная торговля Учет ТМЦ v8 УТ10 Россия Абонемент ($m)

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

1 стартмани

24.03.2017    9077    7    solaru    0    

Под капотом управляемых форм

Практика программирования v8 1cv8.cf Бесплатно (free)

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

26.08.2013    285020    Evil Beaver    275    

[NotaBene] Универсальный отчет по таблице значений

Практика программирования v7.7 1cv7.md Россия Абонемент ($m)

1C v.7.7 Готовое решение. Не требует настройки. Не требует допрограммирования. Данная обработка решает часто встречающуюся задачу вывода в "красивом" виде таблицы значений (полученной, например, из запроса). Поддерживается произвольное группирование данных, отключение/включение группировок, в т.ч и создание "шахматок" (типа "продажи понедельно"). Обработка может использоваться как и в отладочных целях (для нормального просмотра ТЗ), так и в составе вполне рабочих отчетов. По крайней мере, я неоднократно клиентам данную обработку ставил вместо того, чтобы каждый раз писать замороченные выводы данных. И клиенты довольны, и мне - проще...

4 стартмани

07.05.2007    31425    2902    CheBurator    64