Использование компонента system.auth.form для создания формы авторизации в 1С-Битрикс

Форма авторизации — один из базовых функциональных элементов любого сайта, позволяющий пользователям получить доступ к личным данным, профилю, закрытым разделам и другим персонализированным сервисам. В 1С-Битрикс за этот функционал отвечает стандартный компонент bitrix:system.auth.form, который входит в состав модуля «Главный модуль».

В данной статье мы подробно рассмотрим параметры компонента, механизм восстановления пароля, а также приведём несколько примеров кастомизации шаблона с использованием вкладок (табы) и собственной вёрстки.

1. Назначение и расположение компонента

Компонент system.auth.form:

• Выводит стандартную форму авторизации;
• Может отображать ошибки, возникающие при вводе неверных данных;
• Имеет настройки страниц регистрации, восстановления пароля и профиля;
• По умолчанию располагается в визуальном редакторе по пути: Служебные > Пользователь > Форма авторизации.

Как правило, компонент размещают в шапке или другом видимом месте шаблона дизайна, чтобы обеспечить удобный доступ к авторизации.

2. Основные параметры компонента

При включении компонента в шаблон (через includeComponent) можно настроить следующие параметры:

Пример стандартного вызова

<?$APPLICATION->IncludeComponent(
    "bitrix:system.auth.form",
    "",
    Array(
        "REGISTER_URL"         => "register.php",
        "FORGOT_PASSWORD_URL"  => "forgot.php",
        "PROFILE_URL"          => "profile.php",
        "SHOW_ERRORS"          => "Y"
    )
);?>

Обратите внимание: в качестве второго параметра ("") указывается шаблон компонента. Если его не задавать, используется шаблон по умолчанию (.default). Для кастомизации обычно создают собственный шаблон.

3. Механизм восстановления пароля

При нажатии ссылки «Забыли пароль?» пользователь переходит на страницу восстановления. Процесс происходит так:

1. Пользователь нажимает на «Забыли пароль?» в форме авторизации.
2. Генерируется случайная 32-символьная строка (учитывается секрет, известный только серверу).
3. Эта строка записывается в БД и отправляется на email пользователя. В письме содержится ссылка вида:

http://site.ru/bitrix/admin/index.php?change_password=yes&lang=ru
&USER_CHECKWORD=3farde09fay52547f11c68bf17d95760
&USER_LOGIN=market

Где:

• http://site.ru/bitrix/admin/index.php — путь к странице авторизации или смены пароля;
• change_password=yes — действие смены пароля;
• USER_CHECKWORD — контрольная строка (checkword) из БД;
• USER_LOGIN — идентификатор пользователя, запрашивающего смену пароля.

При смене пароля сравнивается введённая пользователем контрольная строка со строкой в БД, учитывается время истечения, заданное политикой безопасности.

Совет: включайте CAPTCHA в форме восстановления пароля (это настраивается в главном модуле), чтобы защититься от автоматического подбора.

4. Кастомизация шаблона компонента

4.1. Структура шаблона по умолчанию

Шаблон по умолчанию лежит в папке:

/bitrix/components/bitrix/system.auth.form/templates/.default

Основной файл шаблона:

template.php

Там выводятся следующие варианты форм:

1. Форма авторизации, если пользователь не авторизован.
2. Форма для ввода OTP (одноразового пароля), если включён модуль безопасности.
3. Форма выхода (logout), если пользователь авторизован.

Для кастомизации можно создать свою папку, например:

/local/templates/<имя_вашего_шаблона>/components/bitrix/system.auth.form/my_auth_template

и поместить там файл template.php. После чего во втором параметре IncludeComponent указать "my_auth_template".

4.2. Вёрстка с вкладками (табы)

Допустим, вы хотите реализовать три вкладки:

1. Авторизация;
2. Регистрация;
3. Восстановление пароля.

Причём все вкладки будут выводиться на одной странице, а при клике на вкладку будет отображаться нужная форма. Это можно сделать несколькими способами. Один из самых простых — использовать JavaScript для переключения видимости блоков.

Пример структуры template.php с вкладками (упрощённый):

<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die(); ?>

<div class="auth-tabs">
    <ul class="auth-tabs__nav">
        <li class="auth-tabs__nav-item active" data-tab="auth"><?=GetMessage("TAB_AUTH");?></li>
        <li class="auth-tabs__nav-item" data-tab="reg"><?=GetMessage("TAB_REG");?></li>
        <li class="auth-tabs__nav-item" data-tab="forgot"><?=GetMessage("TAB_FORGOT");?></li>
    </ul>

    <!-- Вкладка Авторизация -->
    <div class="auth-tabs__content" id="auth" style="display: block;">
        <? if($arResult["FORM_TYPE"] == "login"): ?>
            <form name="system_auth_form<?=$arResult["RND"]?>" method="post" action="<?=$arResult["AUTH_URL"]?>">
                <? if($arResult["BACKURL"] <> ''): ?>
                    <input type="hidden" name="backurl" value="<?=$arResult["BACKURL"]?>" />
                <? endif ?>
                <? foreach ($arResult["POST"] as $key => $value): ?>
                    <input type="hidden" name="<?=$key?>" value="<?=$value?>" />
                <? endforeach ?>

                <input type="hidden" name="AUTH_FORM" value="Y" />
                <input type="hidden" name="TYPE" value="AUTH" />

                <div class="form-group">
                    <label><?=GetMessage("AUTH_LOGIN");?></label>
                    <input type="text" name="USER_LOGIN" maxlength="50" value="" size="17" />
                </div>

                <div class="form-group">
                    <label><?=GetMessage("AUTH_PASSWORD");?></label>
                    <input type="password" name="USER_PASSWORD" maxlength="255" size="17" autocomplete="off" />
                </div>

                <? if ($arResult["STORE_PASSWORD"] == "Y"): ?>
                    <div class="form-group">
                        <label>
                            <input type="checkbox" name="USER_REMEMBER" value="Y" />
                            <?=GetMessage("AUTH_REMEMBER_SHORT");?>
                        </label>
                    </div>
                <? endif ?>

                <? if ($arResult["CAPTCHA_CODE"]): ?>
                    <div class="form-group">
                        <label><?=GetMessage("AUTH_CAPTCHA_PROMT");?></label>
                        <input type="hidden" name="captcha_sid" value="<?=$arResult["CAPTCHA_CODE"]?>" />
                        <img src="/bitrix/tools/captcha.php?captcha_sid=<?=$arResult["CAPTCHA_CODE"]?>" width="180" height="40" />
                        <input type="text" name="captcha_word" maxlength="50" value="" />
                    </div>
                <? endif ?>

                <input type="submit" name="Login" value="<?=GetMessage("AUTH_LOGIN_BUTTON")?>" />

                <div class="links">
                    <? if($arResult["NEW_USER_REGISTRATION"] == "Y"): ?>
                        <a href="#" class="js-switch-tab" data-tab="reg"><?=GetMessage("AUTH_REGISTER");?></a>
                    <? endif; ?>
                    <a href="#" class="js-switch-tab" data-tab="forgot"><?=GetMessage("AUTH_FORGOT_PASSWORD_2");?></a>
                </div>
            </form>
        <? endif; ?>
    </div>

    <!-- Вкладка Регистрация -->
    <div class="auth-tabs__content" id="reg" style="display: none;">
        <!-- Допустим, вы выводите свою форму регистрации
             или через другой компонент: bitrix:main.register -->
        <p><?=GetMessage("TAB_REG_CONTENT"); // Просто пример ?></p>
        <a href="#" class="js-switch-tab" data-tab="auth"><?=GetMessage("TAB_BACK");?></a>
    </div>

    <!-- Вкладка Восстановление -->
    <div class="auth-tabs__content" id="forgot" style="display: none;">
        <!-- Здесь форма для компонента "bitrix:system.auth.forgotpasswd" или любой кастомный функционал -->
        <p><?=GetMessage("TAB_FORGOT_CONTENT"); // Пример ?></p>
        <a href="#" class="js-switch-tab" data-tab="auth"><?=GetMessage("TAB_BACK");?></a>
    </div>
</div>

<!-- Минимальный JS для переключения вкладок -->
<script>
    document.addEventListener("DOMContentLoaded", function(){
        const navItems = document.querySelectorAll('.auth-tabs__nav-item');
        const contents = document.querySelectorAll('.auth-tabs__content');

        navItems.forEach(item => {
            item.addEventListener('click', function() {
                navItems.forEach(i => i.classList.remove('active'));
                this.classList.add('active');

                const tab = this.getAttribute('data-tab');
                contents.forEach(content => {
                    content.style.display = (content.id === tab) ? 'block' : 'none';
                });
            });
        });

        // Переключение с ссылок внутри вкладок
        const switchLinks = document.querySelectorAll('.js-switch-tab');
        switchLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const tab = this.getAttribute('data-tab');
                navItems.forEach(i => {
                    if (i.getAttribute('data-tab') === tab) {
                        i.click();
                    }
                });
            });
        });
    });
</script>

Комментарии к примеру:

• Мы создаём три контейнера (div) с разным id и прячем все, кроме активного.
• Переключение вкладок сделано через JavaScript по атрибуту data-tab.
• Ссылки «Регистрация» и «Забыли пароль?» теперь переключают вкладки, а не ведут на отдельные страницы (это уже на ваше усмотрение, можно оставить переход на страницы).

Обратите внимание: если вы хотите задействовать стандартный функционал REGISTER_URL и FORGOT_PASSWORD_URL, то эти вкладки можно сделать не «переключающимися DIVами», а реальными ссылками на соответствующие страницы.

4.3. Пример стилизации (CSS)

.auth-tabs {
    font-family: Arial, sans-serif;
    max-width: 400px;
    margin: 0 auto;
}

.auth-tabs__nav {
    display: flex;
    list-style: none;
    margin-bottom: 15px;
    padding: 0;
    border-bottom: 2px solid #ccc;
}

.auth-tabs__nav-item {
    margin-right: 20px;
    padding: 10px;
    cursor: pointer;
    color: #444;
    border-bottom: 2px solid transparent;
}

.auth-tabs__nav-item.active {
    border-bottom-color: #337ab7;
    color: #337ab7;
}

.auth-tabs__content {
    display: none;
}

.auth-tabs__content .form-group {
    margin-bottom: 15px;
}

.auth-tabs__content label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.auth-tabs__content input[type="text"],
.auth-tabs__content input[type="password"] {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.auth-tabs__content input[type="submit"] {
    padding: 8px 16px;
    cursor: pointer;
}

.auth-tabs__content .links {
    margin-top: 15px;
}

.auth-tabs__content .links a {
    margin-right: 10px;
    color: #337ab7;
    text-decoration: none;
}

Обратите внимание: файл со стилями обычно подключается либо напрямую в template.php, либо через отдельный CSS-файл в папке шаблона.

5. Вывод ошибок

Если вы хотите отображать ошибки авторизации, достаточно передать в параметрах SHOW_ERRORS => "Y". В стандартном шаблоне используется функция ShowMessage($arResult['ERROR_MESSAGE']) в самом верху:

<? if ($arResult['SHOW_ERRORS'] === 'Y' && $arResult['ERROR'] && !empty($arResult['ERROR_MESSAGE']))
{
   ShowMessage($arResult['ERROR_MESSAGE']);
} ?>

При необходимости вы можете изменить вид отображения ошибок, стилизовать блок под дизайн сайта, или скрывать/показывать ошибки через JavaScript.

6. Дополнительные рекомендации

1. CAPTCHA при входе. По умолчанию system.auth.form может требовать ввод CAPTCHA, если модуль безопасности определил превышение лимита неудачных попыток авторизации. Пользователь увидит это поле автоматически.
2. Социальная авторизация. Если на сайте используются авторизации через соцсети, компонент socserv.auth.form может быть подключён внутри формы. Стандартный пример этого уже есть в .default-шаблоне.
3. OTP (одноразовые пароли). При включённом модуле «Проактивная защита (MFA)» и настройке OTP пользователю может потребоваться вводить одноразовый пароль, форма для этого обрабатывается тем же компонентом.
4. Разделение верстки. Если верстка формы становится слишком громоздкой, вы можете разбить её на несколько файлов (например, auth.php, otp.php, logout.php) и подключать их в template.php по условию if($arResult["FORM_TYPE"] == "login") ... else ....

Заключение

Компонент bitrix:system.auth.form — это мощный готовый механизм для авторизации пользователей в 1С-Битрикс, который вы можете легко адаптировать под любую задачу. Благодаря широким настройкам, возможности переопределения шаблона и написания собственной вёрстки на HTML/CSS/JS (а при желании — и интеграции с PHP-скриптами и API), данный компонент закрывает большую часть базовых потребностей по работе с авторизацией.

• Включение вкладок помогает быстро переключаться между авторизацией, регистрацией и восстановлением пароля.
• Правильный вызов IncludeComponent и настройка параметров позволяют гибко задавать пути к нужным страницам.
• Использование безопасного соединения (HTTPS) и CAPTCHA повышает безопасность процесса авторизации и восстановления пароля.

Пользуйтесь этими примерными наработками и модернизируйте их под нужды вашего проекта!