Как добавить на сайт образовательной организации пиктограмму ЭЦП
В этой инструкции мы, мы постараемся пошагово рассмотреть решение очень болезненного вопроса для сайтов образовательных организаций, а именно: Добавление на сайт образовательной организации пиктограммы ЭЦП.
Зачем вам на сайт добавлять пиктограмму ЭЦП с данными об электронной подписи ?
С января 2021 года вступил в силу новый документ - Приказ № 831 «Об утверждении Требований к структуре официального сайта образовательной организации в информационно-телекоммуникационной сети „Интернет“ и формату представления информации» Рособрнадзора от 14 августа 2020 года. Все документы, которые образовательное учреждение разрабатывает и утверждают самостоятельно, теперь при публикации на сайте должны быть подписаны простой электронной подписью (ПЭП).
Требованиями определена достаточность использования простой электронной подписи для подписания информации в электронной форме.
Визуально на сайте простая электронная подпись должна выглядеть как пиктограмма, указывающая на то, что документ подписан простой электронной подписью.
При установке курсора на эту пиктограмму, на экран должны выводиться сведения "дата и время подписания; фамилия, имя, отчество и должность лица, подписавшего документ; сформированный уникальный программный ключ.
Пример как это выглядит в коде:
<img align="" src="https://newmanuals.ucoz.net/contract.png" style="margin:0;padding:0;border:0;max-width:64px;" title=" Документ подписан электронной подписью Дата и время подписания: 2021.02.01. 22:24 Подписавший документ: директор Иванов И.И. Ключ: 4166F24HNF1628C2QH7MT2" />
для вывода текста используется title у картинки и при наведении на нее все отображается.
Как внедрить решение на сайт, чтобы следовать требованиям по закону №831 ?
Для решения мы предлагаем следующее:
1. Используем свободный модуль каталог (файлов, статей, сайтов, объявлений или игр) или же Блог / Новости. Выбор на ваше усмотрение, главное, чтобы модуль вами ранее не использовался под другие задачи. Активируйте свободный модуль.
Важно! Для нашего примера мы использовали модуль "Каталог файлов".
2. Перейдите в "Настройки модуля", отключите поле Полное описание, уберите все галочки напротив поля "Полный текст материала", оставить отмеченным лишь название и краткое описание и нажмите кнопку "Сохранить".
3. Отметить ниже в настройках модуля пункт "Использовать дополнительные поля", выберите количество 7 (если используете каталог).
Если используете Блог / Новости, выберите 2 так как по умолчанию 5 полей в этих модулях уже имеется, нам нужно будет всего 7. Подключите все 7 полей отметив их галочкой и сохраните изменения.
4. После перейдите в "Замена стандартных надписей" по адресу ваш-сайт.ру/panel/?a=signs находим в списке модуль, который мы используем и переименовываем названия полей:
- Дополнительное поле 1 → Ф.И.О
- Дополнительное поле 2 → Организация
- Дополнительное поле 3 → Дата создания
- Дополнительное поле 4 → Сертификат
- Дополнительное поле 5 → Выдан
- Дополнительное поле 6 → Период действия сертификата
- Дополнительное поле 7 → Ссылка на документ
- Краткое описание материала → Электронная подпись
не забываем после изменения названий полей сохранить изменения нажав на кнопку "Сохранить".
5. Перейдите в Панель управления » Главная » Пользователи » Группы пользователей » Установка прав для всех групп » Каталог файлов, находим строки:
- Разрешить HTML тэги при добавлении материалов
- Разрешить ББ-коды при добавлении материалов
напротив этих двух строк в группы администраторы убираем галочку и жмем кнопку "Сохранить".
6. В настройках модуля Каталог файлов ниже найти пункт: Максимальная длина краткого описания, выставьте в нем значение 9999 и сохраните изменения.
7. Переходим в шаблон "Вид материалов" модуля каталог файлов по адресу ваш-сайт.ру/panel/?a=tmpl;m=11;t=7 стандартный код, который там будет весь удаляем и устанавливаем следующий:
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock" style="border: 1px solid #d6d3d3; border-radius: 5px; padding: 5px;"><tr><td style="padding:3px;">
<?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?>
<div class="eTitle" style="text-align:left;"><a href="$ENTRY_URL$">$ID$. $TITLE$ </a> <span style="color: #000; font-size: 20px;font-weight: normal;"> Утвержден <img src="https://ecp-test.ucoz.net/img/icon_check.svg"></span>
<div class="poster" style="float:right;cursor: pointer;"><img src="https://ecp-test.ucoz.net/img/icon_key.svg">
<div class="descr">
<span class="titless">Документ подписан электронной подписью</span><hr>
<?if($OTHER1$)?><div style="float:left;"><img src="https://ecp-test.ucoz.net/img/icon_sign.svg"> <span class="ecp-dop" style="position: relative; top: -22px;">$OTHER1$</span></div><?endif?>
<?if($OTHER2$)?><div style="display: inline-block;"><span>Организация</span>: <span class="ecp-dop">$OTHER2$</span></div><?endif?>
<?if($OTHER3$)?><div style="display: inline-block;"><span>Дата создания</span>: <span class="ecp-dop">$OTHER3$</span></div><?endif?>
<?if($OTHER4$)?><div style="display: inline-block;"><span>Сертификат</span>: <span class="ecp-dop">$OTHER4$</span></div><?endif?>
<?if($OTHER5$)?><div style="display: inline-block;"><span>Выдан</span>: <span class="ecp-dop">$OTHER5$</span></div><?endif?>
<?if($OTHER6$)?><div style="display: inline-block;"><span>Период действия сертификата</span>: <span class="ecp-dop">$OTHER6$</span></div><?endif?>
<?if($OTHER7$)?><div style="display: inline-block;"><span>Документ</span>: <span class="ecp-dop"><a href="$OTHER7$" download style="color: #000;">[ Скачать документ ]</a></span></div><?endif?>
<div align="center">
<div class="spoiler keycode"><input type="checkbox" id="spoilerid_$ID$"><label for="spoilerid_$ID$">Показать электронную подпись</label>
<div class="spoiler_body" style="word-break: break-word;font-weight: normal;">$MESSAGE$</div>
</div>
</div>
</div></div></div>
</td></tr></table><br />
<style>
.titless {font-size: 16px;font-weight: bold;}
a.keycode {font-weight: normal; text-decoration: none; color: #fff; padding: 5px; position: relative; top: 20px; background-color: #5cb85c; border-color: #4cae4c; border-radius: 5px;position: relative; top: 20px;}
a.keycode:hover {background-color: #204ea6; border-color: #204ea6;}
span.ecp-dop { color: #000!important; font-weight: normal; font-size: 13px!important; }
.descr{ display:none; margin-left:-350px; padding:10px; margin-top:17px; -moz-box-shadow:0 5px 5px rgba(0,0,0,0.3); -webkit-box-shadow:0 5px 5px rgba(0,0,0,0.3); box-shadow:0 5px 5px rgba(0,0,0,0.3); }
.poster:hover .descr { margin: -10px 0px 0px -400px; font-size: 15px; display: block; position: absolute; z-index: 9999; width: 400px; height: inherit; background: #f7f5f5; }
.descr div {margin-top:6px;}
.descr span {font-size:14px;color: #20489a;}
.spoiler > input + label:after{content: "+";float: right;font-family: monospace;font-weight: bold;}
.spoiler > input:checked + label:after{content: "-";float: right;font-family: monospace;font-weight: bold;}
.spoiler > input{display:none;}
.spoiler > input + label , .spoiler > .spoiler_body{background:#CCC;padding:5px 15px;overflow:hidden;width:100%;box-sizing: border-box;display: block;}
.spoiler > input + label + .spoiler_body{display:none;}
.spoiler > input:checked + label + .spoiler_body{display: block;}
.spoiler > .spoiler_body{background: #FFF;border: 3px solid #CCC;border-top: none;height: 300px; overflow: hidden; overflow-y: scroll;}
</style>
Важно! В коде выше прописаны ссылки на изображения:
- https://ecp-test.ucoz.net/img/icon_check.svg
- https://ecp-test.ucoz.net/img/icon_key.svg
- https://ecp-test.ucoz.net/img/icon_sign.svg
загрузите их себе в файловый менеджер и поменяйте ссылки на ваши.
Важно! Чтобы этот код работал как положено, вам нужно будет использовать модуль, который выберите под данную задачу наполнять документами и только его использовать, а не отдельную страницу созданную в модуле "Редактор страниц".
Для добавления новых документов всегда нужно будет добавлять новый материал именно в модуле Каталог файлов или другой какой вы выберите.
Подписанные документы заранее нужно будет загрузить в папку в файловый менеджер, после копировать ссылку на документ и прописывать в 7 поле "Ссылка на документ".
При добавлении материалов в модуль, который вы выбрали, вам придется всегда заполнять эти 8 полей, для каждого документа заполнять теми данные, которые соответствуют лицу к которому относится документ и данные о ЭЦП.
Важно! В поле "Электронная подпись", вам нужно вставлять код ключа ЭЦП, обычно достаточно длинный набор символов.
Важно! Корректность / Достоверность данных (информации), которую вы будете вводить в поля зависит исключительно от вас, мы автоматически за вас на уровне модуля вводить ничего не можем, информацию придется вводить вручную.
Важно! Мы uCoz не отвечаем за выдачу или регистрацию ключей ЭЦП, вам для этого необходимо обращаться в соответствующие центры / сервисы и покупать лицензии на платное программное обеспечение, которое будете использоваться для подписи документов.
Какое программное обеспечение использовать для подписи документов ?
- Простая электронная подпись создается бесплатно, но с помощью программы КРИПТО-ПРО и КРИПТО-АРМ, которые придется приобрести.
- Электронный документ формата PDF можно подписать только в программе версии Adobe Acrobat PRO (платная программа), нужно так же приобретать лицензию.
- Чтобы подписать документ из семейства MS Office необходимо приобрести и установить специальный плагин от КРИПТО-АРМ.
Как подписать документ с помощью ЭЦП ?
Более детальное рассмотрение о том как подписать документы, вы можете на видео немного ниже:
Как создать электронную подпись ?
О том как это выполнить, мы предлагаем вам к просмотру видео, на котором демонстрируется весь процесс с использованием ПО Крипто-АРМ:
Как распознать, подписан ли документ с помощью ЭЦП ?
Более детальное рассмотрение о том как проверить документы на признак наличия ЭЦП, вы можете на видео немного ниже:
Дополнительно можем рекомендовать проверку подписи через сайты:
Если вам интересно, что в результате получится, если следовать нашей инструкции, демо можно посмотреть на нашем примере.