...
Info |
---|
This article is in English HBW widget integration manual |
Общая схема
- При открытии страницы приложения с виджетом, приложение-хост, используя public_url из конфига, запросит фронт виджета. Для аутентификации используются логин и токен из конфига
- Когда загрузится фронт виджета, он будет посылать запросы с url вида '/widget/...' в ЛК, запросы такого вида принимаются прокси-контроллером (hbw_controller.rb) и перенаправляются в бекэнд виджета.
Конфигурируемые параметры
...
hbw_url
– адрес HydraOMS (например, http://homs:3000);hbw_public_url
– адрес, по которому HydraOMS доступна из браузера (используется для получения статических файлов и открытия вебсокетов, например, https://some.domain:8100 или https://homs.some.domain. Может совпадать с Значенияhbw_url
иhbw_public_url
могут совпадать);hbw_login
– логин (например, user@example.com);hbw_token
– токен (например, renewmeplease).
...
Методы, которые выполняют отправку GET, POST, PUT и PUT запросов DELETE запросов к бэкенду HydraOMS:
Code Block | ||
---|---|---|
| ||
def request_bpmwidget_backend(path, method = :get, parameters = {}) request_params = { method: method, url: build_bpm_widget_path(path), user: bpm_config.hbw_login, password: bpm_config.passwordhbw_token } if method == :get request_params.merge!({headers: {params: parameters.merge(bpm_parameters)}}) else request_params.merge!({payload: parameters.merge(bpm_parameters)}) end response(params) end private def response(params) response = RestClient::Request.execute(request_params) end {private code: response.code, headers: response.headers, body: response.body } end def request_params(path)def bpm_parameters { urluser_identifier: build_bpm_widget_path(path)config[:hbw_login], userentity_type: configurationparams[:loginentity_type], passwordentity_code: configuration params[:passwordentity_code], headersentity_class: { 'Content-Type': 'application/json' } } end params[:entity_class] } end def build_bpm_widget_path(path = '') URI.join(configuration[:url]bpm_config.url, '/widget/', path) end def configuration { url: "http://homs:3000", # hbw_url login: "user@example.com", # hbw_login password: "renewmeplease" # hbw_token } end def with_user_identifier(parameters) parameters.merge( user_identifier: session[:email] # email of current user ) end def allow_params(*allowed_params) with_user_identifier(params.slice(*allowed_params)).to_s end def bpm_config YourApplication::Config.widgets.bpm end |
Параметры GET и DELETE запросов должны передаваться в query-части url, например:
...
Code Block | ||
---|---|---|
| ||
# ANY match 'widget/*path' def proxy method = request.method.downcase.to_sym result = request_bpm_backend(params[:path], method, permitted_params) if method == :put if result head :no_content else head :bad_request end else render json: result end end private def permitted_params params.symbolize_keys.except(*service_params) end def service_params %i[controller action path format] end |
Встраивание JS
Ниже приведен пример встраивания виджета в веб-страницу. После загрузки JS и CSS из HydraOMS выполняется инициализация виджета данными приложения и сущности, после чего вызывается функция render()
.
Code Block | ||||
---|---|---|---|---|
| ||||
<html> <head> <title>HydraOMS Widget</title> <script type="text/javascript" src="${hbw_public_url}/assets/hbw.js"></script> <link rel="stylesheet" type="text/css" href="${hbw_public_url}/assets/hbw.css"> </head> <body> <div class="hbw-styles"> <div id='hbw-container'> </div> </div> <script type="text/javascript"> var config = { widgetURL: 'https://homs.some.domain', // hbw_public_url, необходим для установки WebSocket соединения entity_class: 'crm_account', entity_type: 'customer', container_id: 'hbw-container', // Совпадает с идентификатором <div> контейнера userIdentifier: 'user@example.com', // e-mail пользователя, которой использует виджет locale: { code: 'en', // locale code dateTimeFormat: 'DD/MM/DD/YYYY HH:mm' // формат, используемый date-fns, fomat документация https://date-fns.org/v1.30.1/docs/format } }; var entityId = ...; // Здесь должен быть указан уникальный идентификатор сущности, например customerId window.hbw_widget = new (modulejs.require('HBW'))({ userIdentifier: config.userIdentifier, widgetContainer: `#${config.container_id}`, widgetURL: config.widgetURL, widgetPath: '/widget', entity_class: config.entity_class, entity_type: config.entity_type, entity_code: `${entityId}`, locale: config.locale, payload: { variables: { someInitialVariable: { // Также возможно установить дополнительные параметры, которые будут переданы при старте процесса value: 'initialValue', type: 'string' } } } }); window.hbw_widget.render(); // Если виджет встраивается в SPA (Single Page Appllication), необходимо вызвать следующую функцию перед закрытием текущей страницы. // window.hbw_widget.unmountWidget(); </script> </body> </html> |
...