Создание демо-панели ispmanager

Демо-панель наглядно демонстрирует работу ispmanager. Используйте её, чтобы показать конечным клиентам возможности панели и упростить знакомство с продуктом.

Шаг 1. Установка и настройка панели

Установите ispmanager на сервер.
Если необходимо, настройте SSL-сертификат и домен.
Создайте шаблон пользователя с названием demo и выдайте ему ограничения на своё усмотрение.
Создайте администратора с названием sitedemo с правами к разделу Пользователи.

Шаг 2. Настройка вывода демо

Вариант 1

Настройка прокси на сайте, где будет отображаться демо. Подходит, если для ispmanager не настроен домен.

В конфигурационном файле панели /usr/local/mgr5/etc/ispmgr.conf скопируйте значение параметра ForwardedSecret.
Если ForwardedSecret не задан
Если параметра ForwardedSecret нет в конфигурационном файле, укажите свое значение и скопируйте его.
После сохранения изменений перезапустите ispmanager через консоль командой:
```
/usr/local/mgr5/sbin/mgrctl -m ispmgr exit
```

В настройках сервера добавьте в конфигурационный файл nginx:

location ~ ^/(ispmgr|manimg|mancgi|notify)(/.*)?$ {
    proxy_pass https://{PANEL_ADDRESS}:1500;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Secret {ForwardedSecret};
    chunked_transfer_encoding off;
}

где {PANEL_ADDRESS} — IP-адрес демо-панели, а {ForwardedSecret} — скопированная строка из пункта 1.

На странице сайта, где планируется разместить демо, добавьте кнопку. По нажатию она отправит запрос к скрипту: скрипт создаст пользователя и вернёт логин и пароль для входа в демо-панель. Пример JS-обработчика для кнопки:

document.querySelector('.js-start-demo').addEventListener('click', e => {
    e.preventDefault();
    const iframe = document.createElement('iframe');
    const wrapper = document.querySelector('.js-demo-wrapper');

    fetch('/start_demo.php').then(res => res.json()).then(res => {
        if (res.status === 'success') {
            iframe.src = '/ispmgr?lang=' + document.documentElement.lang;
            wrapper.append(iframe);
        } else {
            alert(res.message);
        }
    });
});

И пример PHP скрипта start_demo.php:

<?php

const PANEL_USERNAME = 'sitedemo'; // Имя администратора
const PANEL_PASSWORD = ''; // Пароль администратора
const PANEL_ADDRESS = ''; // Адрес панели (IP или домен)

/**
* Генерация пароля
*/
function generate_password(int $length = 16) {
    $arr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','1','2','3','4','5','6','7','8','9','0'];
    $pass = '';
    $count = count($arr);
    for($i = 0; $i < $length; $i++) {
        $pass .= $arr[random_int(0, $count-1)];
    }
    return $pass;
}

try {
    if (!empty($_COOKIE['ispmgr_demo_auth'])) {
        $authinfo = explode(':', $_COOKIE['ispmgr_demo_auth']);
        $name = $authinfo[0];
        $passwd = $authinfo[1];
    } else {
        $name = 'demo' . strtolower(generate_password(5)) . '_' . (time() + 3600);
        $passwd = generate_password();
        $create_user = file_get_contents('https://' . PANEL_ADDRESS . '/ispmgr?func=user.add.finish&sok=ok&authinfo=' . PANEL_USERNAME . ':' . PANEL_PASSWORD . '&out=bjson&preset=demo&addinfo=off&name=' . $name . '&passwd=' . $passwd);
        if (empty($create_user)) throw new \Exception('Error while create user');
        $create_user = json_decode($create_user, true);
        if (!empty($create_user['error']['msg'])) throw new \Exception($create_user['error']['msg']);
        setcookie('ispmgr_demo_auth', $name . ':' . $passwd, time() + 3600, '/', '', true);
    }

    $response = file_get_contents('https://' . $domain . '/ispmgr?func=auth&auth=' . ($_COOKIE['ispmgrses5'] ?? '') . '&username=' . $name . '&password=' . $passwd . '&out=bjson');
    if (empty($response)) throw new \Exception('Error while auth');
    $response = json_decode($response, true);
    if (!empty($response['error']['msg'])) throw new \Exception($response['error']['msg']);
    if (!empty($response['model']['auth'])) setcookie('ispmgrses5', $response['model']['auth'], time() + 3600, '/', '', true, true);

    $out = [
        'status' => 'success',
        'auth' => $response['model']['auth'],
    ];
} catch (\Throwable $th) {
    $out = [
        'status' => 'error',
        'message' => $th->getMessage(),
    ];
}

echo json_encode($out);

Вариант 2

Настройка прокси в панели. Подходит, если для ispmanager настроен домен.

В конфигурационном файле /etc/nginx/modules-includes/nginx_proxy/nginx_proxy_ssl.conf внутрь location @ispmgr добавьте следующие строки:
```
proxy_cookie_path / "/; SameSite=None";
add_header Content-Security-Policy "frame-ancestors 'self' {SITE_DOMAIN}";
```
где {SITE_DOMAIN} — домен сайта, на котором будет отображаться демо.
Перейдите в раздел демо-панели Настройки веб-сервера и нажмите Сохранить.

document.querySelector('.js-start-demo').addEventListener('click', e => {
    e.preventDefault();
    const iframe = document.createElement('iframe');
    const wrapper = document.querySelector('.js-demo-wrapper');

    fetch('/start_demo.php').then(res => res.json()).then(res => {
        if (res.status === 'success') {
            iframe.src = res.url + '/ispmgr?lang=' + document.documentElement.lang + '&func=auth&username=' + res.username + '&password=' + res.password;
            wrapper.append(iframe);
        } else {
            alert(res.message);
        }
    });
});