Пишем плагин для WordPress

Для того чтобы не изобретать велосипеды, необходимо с генерировать шаблоны файлов плагина. Например при помощи этого сервиса. В моём случае плагин называется ssk_read, поэтому далее везде фигурирует в названиях файлов он.

Получится структура папок вида:

Необходимо поместить все файлы в папку /wp_content/plugins..и собственно на этом моменте плагин уже будет доступен в админке для ативации.

Далее попробуем нарисовать страницу настроек в панели администрирования. Для этого добавим в /admin/class-ssk_read-admin.php в функцию конструкта класса хук добавления пункта меню:

add_action( 'admin_menu', 'register_my_config_page');

И далее в основном теле плагина skk_read.php добавим функцию register_my_config_page, которая непосредственно регистрирует этот пункт меню к выводу на экран:

function register_my_config_page(){
    add_menu_page( 'SSK_Read', 'SSK_Read', 'edit_others_posts','ssk_read', 'DrawPage', plugins_url( 'ssk_read/images/logo.png' ), 6 );
}
function DrawPage(){
 ?>
    <h1 class="wp-heading-inline">Основные настройки</h1>    
 <?php
};

После этого в меню админки появится новый пункт меню, с выводом пустой страницы. Добавим в функцию DrawPage функционал вывода сохраненных настроек:

function DrawPage(){
 ?>
    <h1 class="wp-heading-inline">Основные настройки</h1>
    <form method="post" action="options.php">
    <?php
        settings_fields('ssk_read_settings');
        do_settings_sections( 'ssk_read');
        submit_button();
    ?>
    </form>

 <?php
};

На этом этапе пока появится только кнопка «сохранить изменения», потому как мы еще не указали ядру, какие именно настройки мы хотим хранить. Для этого добавим в /admin/class-ssk_read-admin.php в функцию конструкта класса хук инициализации настроек:

add_action( 'admin_init', 'ssk_read_fields');

И далее в основном классе ssk_read.php добавим функции регистрации полей и их вывода:

function ssk_read_fields(){

    register_setting('ssk_read_settings','api_doc_url','string');
    register_setting('ssk_read_settings','api_doc_login','string');
    register_setting('ssk_read_settings','api_doc_password','string');

    add_settings_section( 'ssk_settings_section_id', 'Соединение с 1С Документооборот','', 'ssk_read' );

    add_settings_field('api_doc_url','URL вызова API','DrawApiTxtField','ssk_read','ssk_settings_section_id',array('name' => 'api_doc_url'));
    add_settings_field('api_doc_login','Логин','DrawApiTxtField','ssk_read','ssk_settings_section_id',array('name' => 'api_doc_login'));
    add_settings_field('api_doc_password','Пароль','DrawApiPasswordField','ssk_read','ssk_settings_section_id',array('name' => 'api_doc_password'));

}

function DrawApiTxtField($args){
    $value = get_option( $args[ 'name' ] );
    echo '<input type="text"  id="'.$args[ 'name' ].'" name="'.$args[ 'name' ].'" value="'.$value.'" />';
}
function DrawApiPasswordField($args){
    $value = get_option( $args[ 'name' ] );
    echo '<input type="password"  id="'.$args[ 'name' ].'" name="'.$args[ 'name' ].'" value="'.$value.'" />';
}

Получилось функционирующее сохранение:

Однако не хватает уведомления об успешном сохранении. Добавим хук:

add_action( 'admin_notices', 'ssk_custom_notice' );

И вывод сообщения:

function ssk_custom_notice(){
 if (
        isset( $_GET[ 'page' ] )
        && 'ssk_read' == $_GET[ 'page' ]
        && isset( $_GET[ 'settings-updated' ] )
        && true == $_GET[ 'settings-updated' ]
    ) {
        echo '<div class="notice notice-success is-dismissible"><p>Настройки сохранены!</p></div>';
    }
}

Диалоговое окно на чистом javascript

Задача: вывести диалоговое окно без использования Jquery

Решение:

<style>
.DialogConfirm{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(96, 79, 79, 0.51);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.DialogConfirm>div{
  width: 90%;
  margin: 30% auto;
  padding: 10px 20px;
  background: #f7f7f7;
  border-style: solid;
  border-color: aliceblue;
  border-width: initial;
}

.DialogConfirm div p{
  text-align:center;
}

.DialogConfirm div button{
    width: 40%;
    margin: 0 5%;
    border-style: double;
    border-color: black;
}    
</style>    
<script>
function myConfirm(text,buttons=Array(), cb){
    var body = document.getElementsByTagName('body')[0];
    var overlay = document.createElement('div');
    overlay.className = 'DialogConfirm';
    var box = document.createElement('div');  
    var p = document.createElement('p');
    p.appendChild(document.createTextNode(text));
    box.appendChild(p);
    buttons.forEach(function(bt, index, array) {
        tmp_btn=document.createElement('button');
        tmp_btn.appendChild(document.createTextNode(bt));
        tmp_btn.addEventListener('click', function(){ cb(bt); body.removeChild(overlay); }, false);
        box.appendChild(tmp_btn);
    });
        
    overlay.appendChild(box)
    body.appendChild(overlay);    
}
myConfirm('Бахнем и весь мир в труху?',["Давай","Попозжа"], function(value){ console.log(value); });   
</script>    

Защита сайта сертификатом p12

Задача: обеспечить вход на сайт только при наличии действующего сертификата формата p12.

Решение:

Инструкция создана на основе нескольких источников, в т.ч. этого и этого, но с внесением поправок что год уже конец 2022, и появились некоторые нюансы, что старые инструкции не работают по умолчанию для новых дистрибутивов.

Сначала создадим корневой сертификат сервера и необходимые для дальнейшей работы файлы и папки. Для этого создадим в любой папке файл root_cer.sh с содержимым вида:

mkdir db                # БД сертификатов
mkdir certs             # ключ и сертификат сервера
mkdir db/certs          # пользовательские сертификаты
mkdir db/newcerts       # новые сертификаты
mkdir p12               # сертификаты для передачи клиентам (p12)
touch db/index.txt
echo "01" > db/serial
openssl req -new -newkey rsa:2048 -nodes -keyout certs/server.key -x509 -days 1024 \
          -subj /C=RU/ST=Vol/L=Vol/O=LTD\ ElkiPalki/OU=Sale/CN=zz/emailAddress=wefwerfwe@gmail.com \
          -out certs/server.crt

, где:

rsa:2048- длина ключа, -days — сколько дней действителен сертификат, -x509 — создаём самоподписаный сертификат, /C — страна, /ST — область, /L — город, /O — организация, /OU — отдел,

Результатом работы будут два файла в папке certs: servert.crt (сертификат) и serverk.key (закрытый ключ). Данные закрытого ключа можно посмотреть при помощи:

openssl rsa -noout -text -in server.key  
openssl x509 -noout -text -in server.crt           

В файле db/serial записывается текущий серийный номер
подписываемого сертификата в шестнадцатиричном формате.

В файл db/index.txt сохраняются данные о подписываемых сертификатах.

Далее необходимо создать файл с настройками для генерации пользовательских сертификатов ca.config:

 [ ca ]
        default_ca             = CA_CLIENT       # При подписи сертификатов  использовать секцию CA_CLIENT

        [ CA_CLIENT ]
        dir                    = ./db            # Каталог для служебных файлов
        certs                  = $dir/certs      # Каталог для сертификатов
        new_certs_dir          = $dir/newcerts   # Каталог для новых сертификатов

        database               = $dir/index.txt  # Файл с базой данных
        # подписанных сертификатов
        serial                 = $dir/serial     # Файл содержащий серийный номер
        # сертификата
        # (в шестнадцатиричном формате)
        certificate            = ./certs/server.crt        # Файл сертификата CA
        private_key            = ./certs/server.key        # Файл закрытого ключа CA

        default_days           = 365             # Срок действия подписываемого
        # сертификата
        default_crl_days       = 7               # Срок действия CRL (см. $4)
        default_md             = sha256          # Алгоритм подписи

        policy                 = policy_anything # Название секции с описанием политики в отношении данных сертификата

        [ policy_anything ]
        countryName            = optional        # Код страны - не обязателен
        stateOrProvinceName    = optional        # ......
        localityName           = optional        # ......
        organizationName       = optional        # ......
        organizationalUnitName = optional        # ......
        commonName             = supplied        # ...... - обязателен
        emailAddress           = optional        # ......

Для автоматизации генерации клиентских сертификатов можно собрать небольшой bash скрипт:

#!/bin/bash
NO_ARGS=0
BASE_DIR=""
P12_DIR="$BASE_DIR/p12"
CA_CFG="$BASE_DIR/ca.config"            # Конфигурационный файл для подписи
CERTS="$BASE_DIR/db/certs"              # Каталог для хранения сертификатов
CA_FILE="$BASE_DIR/certs/server.crt"    # Доверенный сертификат (Им подписывам)

usage () {
  echo "Скрипт basename $0 предназначен для создания клиентских SSL сертификатов."
  echo ""
  echo "Использование: basename $0 email name password"
}

if [ $# -eq "$NO_ARGS" ]  # Сценарий вызван без аргументов?
then
  usage                   # Если запущен без "аргуменотов" - вывести справку
  exit $E_OPTERROR        # и выйти с кодом ошибки
fi

EMAIL=$1
echo "Email:$EMAIL"
NAME=$2
echo "Name:$NAME"
PASSWORD=$3
echo "Password:$PASSWORD"

# создаём запрос на клиентский сертификат
openssl req -new -newkey rsa:2048 -nodes -keyout "$CERTS/$NAME.key" \
        -subj /C=RU/CN=usr/emailAddress="$EMAIL" \
        -out "$CERT/$NAME.csr"

# подписываем запрос на сертификат при помощи доверенного сертификата
openssl ca -config "$CA_CFG" -in "$CERT/$NAME.csr" -out "$CERT/$NAME.crt" -batch

# создаём файл p12 для передачи клиенту
openssl pkcs12 -export -in "$CERT/$NAME.crt" -inkey "$CERTS/$NAME.key" \
        -certfile "$CA_FILE" -out "$P12_DIR/$NAME.p12" -passout pass:"$PASSWORD"

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

И ещё один полезный скрипт, для автоматизации отзыва сертификатов revote.sh:

#!/bin/bash
NO_ARGS=0
BASE_DIR=""
CA_CFG="$BASE_DIR/ca.config"
CERTS="$BASE_DIR/db/newcerts"
usage () {
  echo "Скрипт basename $0 предназначен для отзыва клиентских SSL сертификатов."
  echo ""
  echo "Использование: basename $0 serial"
}
if [ $# -eq "$NO_ARGS" ]  # Сценарий вызван без аргументов?
then
  usage                   # Если запущен без "аргуменотов" - вывести справку
  exit $E_OPTERROR        # и выйти с кодом ошибки
fi

SERIAL=$1
echo "Отзываю сертификат: $CERTS/$SERIAL.pem"
openssl ca -config "$CA_CFG" -revoke "$CERTS/$SERIAL.pem"
# составим список отозваных в файл revoked.crl
openssl ca -gencrl -config "$CA_CFG" -out revoked.crl

Посмотреть список отозваных сертификатов можно при помощи команды:

openssl crl -in revoked.crl -text -noout

Осталось только настроить apache для того что бы он пускал на сайт, только при наличии сертификата, добавив:

SSLCACertificateFile /path/to/server.crt
SSLVerifyClient require

Интро в админке

Иногда, чтобы не писать «руководство пользователя», проще сделать небольшое «интро», своеобразный «путеводитель» по сайту. Поможет в этом хороший скрипт Intro.js

Текст для тура отображается в тегах вида:

				<div class="form-group w-100 mb-2" data-step="7" data-intro='Сменить пароль для входа в личный кабинет'>
				   <label for="user_password" class="mb-1 fw-bold">Пароль</label>
				   <input id="user_password" type="password" class="form-control" autocomplete="off" onkeyup="confirmNewPass();">
				</div>

Запуск тура можно сделать например так:

function GlobalTourStart(){    
    introJs().onbeforechange(function(targetElement) {
            slider=$(".sidebar")[0].getBoundingClientRect().left;
            if (slider<0) {
                if (targetElement.id=="logout_div"){
                    document.getElementById('sidebar_btn').click();
                };
            };
        }).setOptions({ 
        "showBullets": true,
        "showStepNumbers": false,
        "prevLabel":"Назад",
        "nextLabel":"Дальше",
        'doneLabel': 'Закончить', 
        'tooltipPosition': 'right',
        "onbeforechange": function(targetElement) {
            console.log(targetElement);
        }
    }).start();
};

В моём случае, я предусмотрел что «если следующий слайд в меню-гамбургере, и оно скрыто, то открываем его»

Проверка корректности сертификата из консоли

Бывает так, что стандартная ошибка скрипта не очень понятно отображает, в чём же собственно проблема. Например:

ssl.SSLError: [SSL: SSLV3_ALERT_HANDSHAKE_FAILURE] sslv3 alert handshake failure (_ssl.c:1123)

Помочь возможно может утилита openssl. Она выводит расширенную информацию:

 openssl s_client -showcerts -servername xn--90acbu5aj5f.xn--p1ai -connect xn--90acbu5aj5f.xn--p1ai:443 </dev/null

Вывод будет вида:

1 9 10 11 12 13 55