В этой заметке рассмотрим ajax-авторизацию в 1С-Битрикс в модальном окне. Статья скорее для разработчиков, потому что некоторые вещи придётся дописать самому.

Итак, поехали!

Форма авторизации

Для начала надо добавить вызов компонента system.auth.form в header.php или footer.php вашего шаблона сайта (будем использовать шаблон header-ajax):

<?php
$APPLICATION->IncludeComponent("bitrix:system.auth.form",
    "header-ajax",
    array(
        "REGISTER_URL" => "/register/",
        "PROFILE_URL" => "/personal/profile/",
        "SHOW_ERRORS" => "Y"
    ),
    false
); ?>

Этот компонент выведет нам форму, которую мы и будет показывать в модальном окне.

В шаблон формы, между открывающим и закрывающим тегом <form> необходимо добавить:

<input type="hidden" name="AJAX-ACTION" value="AUTH"/>

Этой строкой будет отличать, что пришёл запрос на авторизацию аяком.

Шаблон оформляем так как захотим, ничем не ограничиваясь.

Всю html-структуру шаблона надо обернуть в div с id ajax-auth-form-wrapper.

В файл result_modifier.php шаблона компонента system.auth.form добавляем код:

<?php
/**
 * Created by olegpro.ru.
 * User: Oleg Maksimenko <oleg.39style@gmail.com>
 * Date: 10.12.2015 22:32
 */
 
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) {
    die();
}
 
/**
 * @global CMain $APPLICATION
 * @var array $arParams
 * @var array $arResult
 * @var CBitrixComponent $component
 */
 
global $APPLICATION;
 
if (isset($_POST['AJAX-ACTION']) && $_POST['AJAX-ACTION'] == 'AUTH') {
    $APPLICATION->RestartBuffer();
 
    header('Content-type: application/json');
 
    if (
        (
            isset($arResult['ERROR'])
            && $arResult['ERROR'] === true
        )
        ||
        (
            !empty($arResult['ERROR_MESSAGE'])
            && isset($arResult['ERROR_MESSAGE']['TYPE'])
            && $arResult['ERROR_MESSAGE']['TYPE'] == 'ERROR'
        )
    ) {
        $response = array(
            'STATUS' => 'ERROR',
            'MESSAGES' => array(
                strip_tags($arResult['ERROR_MESSAGE']['MESSAGE'])
            ),
        );
    } else {
        $response = array(
            'STATUS' => 'OK',
        );
    }
 
    echo \Bitrix\Main\Web\Json::encode($response);
 
    die();
}

В этом месте происходит обработка результатов авторизации. Если есть ошибки, то они возвращаются.

Ссылка авторизации

<a class="js-ajax-auth-link">Вход для партнеров</a>

При клике на ссылку авторизации показываем окно с формой.

Его можно показывать как с помощью битриксовской библиотеки:

$(document).ready(function () {
 
    var
            windowContent = BX('ajax-auth-form-wrapper'),
            popup
            ;
 
    $(document).on('click', '.js-ajax-auth-link', function (e) {
 
        if (!!popup) {
            popup.close();
 
            return;
        }
 
        popup = new BX.PopupWindow('ajax-auth-form-popup-window', window.body, {
                className: 'ajax-auth-form-wrapper-window',
                lightShadow: true,
                closeIcon: true,
                closeByEsc: true,
                autoHide: true,
                events: {
                    onPopupClose: function () {
                        popup.destroy();
                    },
                    onPopupDestroy: function () {
                        popup = null;
                    }
                },
                content: windowContent,
                offsetTop: 1,
                offsetLeft: 0,
                overlay: {
                    backgroundColor: 'black',
                    opacity: '80'
                }
            }
        );
 
        popup.show();
 
        e.preventDefault();
 
    });
 
});

а так же и например, тем же bootstrap popover.

Пример javascript-обработчика формы авторизации, которая отправится аяксом:

$form.submit(function () {
 
    $formErrors
        .html('')
        .removeClass('show');
 
    app.publish('preloader:start', $authButton);
 
    $.post('', $form.serialize(), function (response) {
 
        if (response && response.STATUS) {
 
            if (response.STATUS == 'OK') {
                window.location = window.location;
            } else {
                $formErrors
                    .html(response.MESSAGES)
                    .addClass('show');
            }
 
        }
 
        app.publish('preloader:end', $authButton);
 
    }, 'json');
 
    return false;
 
});

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

После успешной авторизации страница будет перезагружена.