Оптимизация производительности и безопасности — залог успешного проекта на 1С-Битрикс. Данный материал посвящен практическому применению «Cоздать IFRAME-обработчик». Мы подготовили подробный разбор принципов работы и развернутые примеры интеграции.

Cоздать IFRAME-обработчик

После регистрации приложения для чата необходимо сделать IFRAME-обработчик.

Данные на странице

Страница будет открыта со следующими данными:

Array
(
    [BOT_ID] => 17
    [BOT_CODE] => echoBot
    [APP_ID] => 11
    [APP_CODE] => echoFrame
    [DOMAIN] => https://test.bitrix24.ru
    [DOMAIN_HASH] => 0e9c40cee01d6f182e9261b38b30b5c3
    [USER_ID] => 2
    [USER_HASH] => 7e23ac8b6f6c7044076301c7f81cd745
    [DIALOG_ID] => 950
    [CONTEXT] => textarea
    [LANG] => ru
    [IS_CHROME] => Y
    [MESSAGE_ID] => 12333
    [BUTTON_PARAMS] => test
    [DIALOG_ENTITY_ID] => telegrambot|8|173633217|569
    [DIALOG_ENTITY_DATA_1] => Y|LEAD|56|N|N|1765
    [DIALOG_CONTEXT] => lines

)

Параметры

• BOT_ID и BOT_CODE — данные о чат-боте, под которым запущено приложение
• APP_ID и APP_CODE — данные приложении для чата запущенного приложения
• DOMAIN — адрес портала, с которого запустили приложение
• DOMAIN_HASH — это поле HASH, переданное при регистрации иконки. Используются для отсечения неавторизованных запросов
• USER_ID — идентификатор пользователя
• USER_HASH — хеш-строка для валидации корректности запросов на портале клиента
• DIALOG_ID — идентификатор запущенного диалога у пользователя в момент открытия фрейма
• CONTEXT — это контекст вызова диалога, может быть textarea или button
• LANG — текущий язык интерфейса клиента
• IS_CHROME — запущен ли данный фрейм в браузере Google Chrome или нет
• DIALOG_CONTEXT — данный параметр пока недоступен. Может быть all, chat, bot, lines, user, call

Если фрейм запущен в режиме контекста:

• MESSAGE_ID — идентификатор сообщения
• BUTTON_PARAMS — параметр кнопки, заданный при отправке

Взаимодействие с родительским окном (с мессенджером)

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

Примеры реализации

<script type="text/javascript">
// функция инициализации коммуникации с основным окном
function frameCommunicationInit()
{
     if (!window.frameCommunication)
     {
         window.frameCommunication = {timeout: {}};
     }
     if(typeof window.postMessage === 'function')
     {
         window.addEventListener('message', function(event){
            var data = {};
            try { data = JSON.parse(event.data); } catch (err){}

            if (data.action == 'init')
            {
             frameCommunication.uniqueLoadId = data.uniqueLoadId;
             frameCommunication.postMessageSource = event.source;
             frameCommunication.postMessageOrigin = event.origin;
            }
         });
     }
}

// функция отправки данных в основное окно
function frameCommunicationSend(data)
{
     data['uniqueLoadId'] = frameCommunication.uniqueLoadId;
     var encodedData = JSON.stringify(data);
     if (!frameCommunication.postMessageOrigin)
     {
         clearTimeout(frameCommunication.timeout[encodedData]);
         frameCommunication.timeout[encodedData] = setTimeout(function(){
            frameCommunicationSend(data);
         }, 10);
         return true;
     }
    
     if(typeof window.postMessage === 'function')
     {
         if(frameCommunication.postMessageSource)
         {
            frameCommunication.postMessageSource.postMessage(
             encodedData,
             frameCommunication.postMessageOrigin
            );
         }
     }
}
frameCommunicationInit();
</script>

После этого доступны следующие функции:

• Команда отправки текста от лица пользователя:

frameCommunicationSend({'action': 'send', 'message': 'Send message'})

• Команда вставки текста в поле ввода:

frameCommunicationSend({'action': 'put', 'message': 'Put message'})

• Команда начала звонка:

frameCommunicationSend({'action': 'call', 'number': '123456'})

• Команда открытия диалога с вашей открытой линией:

frameCommunicationSend({'action': 'support', 'code': '6a4cdbcf753addac1a573ea64be826ca'})

• Команда закрытия фрейма:

frameCommunicationSend({'action': 'close'})

!Изображение

Регистрация и безопасность

Вы можете не проверять входящие запросы, но мы настоятельно рекомендуем это делать.

На основе входящих данных вы можете реализовать необходимые проверки:

1. Рекомендуем проверять REFERER на совпадение с указанным доменом
2. Рекомендуем проверять домен и хеш от него
3. Рекомендуем проверять пользователя и хеш от него
4. Используйте уникальный HASH для каждой новой регистрации

В сочетании всех этих факторов вы сможете сделать достаточно безопасное приложение.

При регистрации команды, вы должны указать HASH-строку, которой будут подписываться домен и пользователь:

$hash = '0e9c40cee01d6f182e9261b38b30b5c3'; // hash, указанный при регистрации приложения

$check = parse_url($_GET['DOMAIN']);

// проверка на валидность указанного домена
if ($_GET['DOMAIN_HASH'] == md5($check['host'].$hash))
{
echo 'OK';
}

// проверка на валидность указанного пользователя
if ($_GET['USER_HASH'] == md5($_GET['USER_ID'].$hash))
{
echo 'OK';
}

// проверка на REFERER
if (strpos($_SERVER['HTTP_REFERER'], $_GET['DOMAIN'])!== 0)
{
echo 'OK';
}

Работа в таком режиме подробно рассмотрена в демо-примере, который вы можете скачать здесь.