Как аккуратно встроить веб-клиент 1С на сайт?

← На главную

Интеграция 1С с внешними сайтами и порталами — одна из самых востребованных задач в современной разработке. Зачастую перед программистом встает задача не просто обменяться данными, а предоставить пользователю возможность работать с объектами 1С (например, журналами документов или формами ввода заказов) непосредственно в интерфейсе сайта, например, на базе Bitrix. В этой статье мы подробно разберем, как сделать это аккуратно, сохранив эстетику сайта и обеспечив техническую стабильность решения.

Метод 1: Использование штатного режима встраивания (v8.3.16+)

Начиная с версии платформы 8.3.16, разработчики 1С значительно упростили жизнь веб-интеграторам, добавив специальный режим работы веб-клиента, предназначенный для отображения внутри iframe. Если раньше веб-клиент всегда выглядел как тяжеловесное окно с кучей панелей, то теперь мы можем управлять его внешним видом через параметры URL.

Рассмотрим основные параметры, которые позволяют «причесать» интерфейс 1С для сайта:

Параметр embedded=1 — это ключевой флаг. При его активации платформа понимает, что она работает внутри другого сайта, и скрывает стандартную панель разделов, заголовок и другие элементы, которые загромождают экран.
Параметр OmitCommands — позволяет скрыть командную панель приложения, оставляя только рабочую область формы.
Параметр Nst — используется для отключения стандартного заголовка системы.

Проанализируем ситуацию: если нам нужно встроить только журнал заказов, ссылка в iframe будет выглядеть примерно так: http://server/base/ru_RU/e1cib/list/Документ.ЗаказПокупателя?embedded=1. В результате пользователь увидит только таблицу с данными, которая органично впишется в дизайн вашего портала.

Метод 2: Разработка собственного интерфейса через HTTP-сервисы

Если стандартный веб-клиент кажется слишком медленным или его дизайн невозможно подогнать под требования брендбука сайта, мы можем пойти по пути «Headless 1C». В этом случае 1С выступает в роли бэкенда, а фронтенд рисуется на чистом HTML/JavaScript.

Разберем этот процесс по шагам:

В конфигурации 1С создается объект HTTP-сервис.
Описываются методы (GET, POST), которые будут возвращать данные в формате JSON (например, список номенклатуры или остатки).
На стороне сайта пишется JavaScript-код, который обращается к этим методам и отрисовывает таблицы и формы.

Посмотрим на пример того, как может выглядеть инициализация глобального контекста на стороне веб-сайта для связи с 1С через JS. Обратите внимание, что для удобства разработки некоторые разработчики используют «русскоязычный» стиль написания кода в JavaScript, чтобы сохранить преемственность с логикой 1С:


function ГлобальныйКонтекстВебКлиента(Параметры) {
    var ЭтотОбъект = this;
    ЭтотОбъект.ИспользуетсяВИнтрасети = Параметры.ИспользуетсяВИнтрасети; 
    ЭтотОбъект.Формы = {}; 
    
    // Параметры подключения к базе 1С
    ЭтотОбъект.Коннектор1С = {};
    ЭтотОбъект.Коннектор1С.ПутьКБазе1С = Параметры.ПутьКБазе1С;
    ЭтотОбъект.Коннектор1С.ИдентификаторСайта = Параметры.ИдентификаторСайта;
    
    // Метод хеширования пароля для безопасности
    ЭтотОбъект.Коннектор1С.МетодКодировнияПароля = "SHA256";
}

Такой подход позволяет реализовать сквозную авторизацию (AD). Если сайт уже знает пользователя, он может передавать токен или использовать настройки веб-сервера (IIS/Apache) для автоматического входа в 1С без повторного ввода пароля.

Технические нюансы: Безопасность и CORS

Выясним причину, по которой 1С может не отображаться в iframe даже при правильной ссылке. Все дело в политике безопасности браузеров. Чтобы встраивание работало, необходимо настроить заголовки на веб-сервере, где опубликована 1С.

Важные настройки:

X-Frame-Options: Нужно убедиться, что этот заголовок не установлен в значение DENY. Для современных решений лучше использовать Content-Security-Policy: frame-ancestors 'self' yoursite.com.
CORS (Cross-Origin Resource Sharing): Если ваш JS-код на сайте mysite.ru делает запросы к 1С на домене 1c.mysite.ru, сервер 1С должен явно разрешить запросы с вашего домена в заголовке Access-Control-Allow-Origin.

Взаимодействие сайта и 1С через postMessage

Рассмотрим ситуацию: пользователь заполнил форму в iframe с 1С и нажал кнопку «Провести». Как сайту узнать об этом, чтобы обновить корзину или показать сообщение об успехе? Для этого используется механизм window.postMessage.

Внутри формы 1С в событии ПриЗаписи можно выполнить JavaScript-код (через расширение или специальные возможности веб-клиента), который отправит сообщение родительскому окну:


// Код внутри 1С (JavaScript контекст)
window.parent.postMessage({
    event: 'document_saved',
    docType: 'Order',
    number: '00001'
}, '*');

На стороне основного сайта мы вешаем «слушатель»:


window.addEventListener("message", function(event) {
    if (event.data.event === 'document_saved') {
        console.log("Документ успешно сохранен в 1С: " + event.data.number);
        // Здесь можно обновить интерфейс сайта
    }
});

Выбор между «своим» решением и готовыми фреймворками

Проанализируем экономическую целесообразность. Рисовать все формы «в рукопашную» на вебе — процесс трудозатратный. Если вам нужно быстро встроить сложный документ вроде Заказа покупателя с табличной частью, характеристиками и расчетом цен, у вас есть два пути:

Использовать типовой веб-клиент в режиме embedded. Это бесплатно, сохраняет всю бизнес-логику 1С (проверки, заполнение), но может работать медленнее на слабых каналах связи.
Использовать готовые библиотеки. Существуют коммерческие и открытые решения, которые предоставляют набор JS-компонентов, умеющих «общаться» с 1С. Это позволяет получить красивый UI при минимальных затратах времени на написание запросов к HTTP-сервисам.

Резюмируем: Для аккуратного встраивания в первую очередь стоит попробовать штатный функционал платформы 8.3.16+. Если же требуется полная бесшовная интеграция с дизайном сайта — переходите к архитектуре на базе HTTP-сервисов и обмена сообщениями через postMessage. Это обеспечит максимальный контроль над пользовательским опытом и производительностью системы.