Интеграция с Front-end

Frontend Boilerplate for Directual developers

Рассмотрим пример интеграции Frontend-приложения, написанного на React с приложением, разработанным на Directual. Платформа не ограничивает выбор frontend фреймворков, поэтому вы можете использовать любой понравившийся вам фреймворк или же вовсе обойтись без него.

Используемые технологии:

Установка

  1. Убедитесь, что на вашем компьютере установлены:

  2. Сделайте fork репозитория https://github.com/directual/react-boilerplate

  3. Клонируйте репозиторий на свой компьютер;

  4. Перейдите в корневую папку проекта и выполните следующие команды в консоли:

  • установите все необходимые зависимости проекта:

npm install
  • запустите приложение в режиме “development” с указанными параметрами окружения (настройка параметров окружения). Как развернуть приложение будет написано далее.

npm start

Параметры окружения

Для корректной интеграции с вашим приложением Directual необходимо указать следующие параметры окружения в файле .env.development. Все параметры имеют префикс REACTAPP в силу специфики примера. В режиме “production” использование этого префикса необязательно.

Переменная

Значение по умолчанию

Можно изменять

Как получить

описание

APP_PORT

3000

Да

Можно указать свое значение

Порт, на котором запустится ваше клиентское приложение

API_URL

https://api.directual.com

Да

Используйте значение по умолчанию, или зарегистрируйте поддомен для своей организации

Базовый URL, куда направляются все запросы к платформе Directual с использование м Directual-api

AUTH_PATH

/good/v4/auth

Нет

Используйте значение по умолчанию

Путь к точке доступа (endpoint) авторизации

API_PATH

/good/api/v3

Нет

Используйте значение по умолчанию

Путь к endpoint получения и отправки данных

API_PATH_SL

/good/api/v5

Нет

Используйте значение по умолчанию

Путь к endpoint получения и отправки данных типа Security Layer

NETWORK_ID

-

Да

На экране управления приложениями, в карточке приложения поле id соответствует значению NETWORK_ID для вашего приложения.

(Например 2243)

Параметр, необходимый для авторизации в вашем приложении с фронта

API_PASSWORD

-

Да

Поле APP_SECRET

Секретный ключ вашего приложения

API_TOKEN

-

Да

Поле APP_ID

Ключ API вашего приложения

GOOGLE_CLIEN T_ID

-

Да

https://developers.google.com/

identity/protocols/OAuth2

Идентификатор вашего приложения google. Нужен при использовании Google OAuth2.0

API_PASSWORD и API_TOKEN это приватная информация! Не рекомендуется эту информацию пушить в удаленный репозиторий.

Указав необходимое окружение и запустив команду npm start у вас запустится готовое приложение с авторизацией и главной страницей.

Для того, чтобы авторизоваться, вам необходимо будет добавить пользователя в ваше приложение. Также необходимо будет добавить пользователя в структуру WebUser в вашем приложении. Помимо этого можно настроить Google OAuth2.0. Если вы не указали параметр окружения GOOGLE_CLIENT_ID, то не увидите кнопку “Login with Google” При успешном логине, попадете на главную страницу приложения:

Запросы

Взаимодействие с Directual происходит с через API Endpoints, которые настраиваются в соответствующем разделе приложения. Запросы, которые вы осуществляете через directual-api — проксируются. В режиме development применяется прокси из файла “src/setupProxy.js” (https://create-react-app.dev/docs/proxying-api-requests-in-development), если вы собрали приложение, то для работы приложения необходимо запустить файл “server/server.js”, который запустит express-server, отвечающий за проксирование запросов и раздачу статического содержимого приложения. Для отправления запросов с фронта используется библиотека directual метод api.

Метод api возвращает Promise

import { api } from 'directual';
// GET запрос
function getData(params) {
return api
.structure(‘webUsers’)
.getData(‘getUser’, params);
}
// POST запрос
function addData(payload) {
return api
.structure(‘books’)
.sendData(‘addBook’, payload);
}

Авторизация в Boilerplate

Авторизация. Отправляется запрос в структуру webUser, куда передается id и password. Чаще всего в id хранится почта юзера. Пароль хранится в формате md5.

Например, юзер { id: test, password: test } на платформе хранится как { id: test, password: 098f6bcd4621d373cade4e832627b4f6 }

Google авторизация

В Boilerplate подключена Google авторизация. Для её работы необходимо настроить своё приложение в Google и добавить в параметры запуска приложения параметр “GOOGLE_CLIENT_ID”

Загрузка файлов

Загрузка файлов происходит с помощью метода api.fileUpload.

Файл сохраняется в структуру fileUpload в платформенном приложении.

function uploadFile(file) {
return api
.fileUpload(file)
.then(data => data.result);
}

Загрузка в продакшн (deploy)

Когда ваше приложение будет готово, вы можете запустить команду:

npm run build

Она соберёт билд для продакшена. По готовности можно запустить файл “server/server.js” с необходимыми параметрами окружения.

Например: