Найти в Дзене

Авторизация через ajax в Битрикс (используем jQuery)

В этой краткой заметке опишу опыт создания авторизации через ajax при помощи библиотеки jQuery.

В Битрикс авторизация стандартным методом реализуется через вызов компонента bitrix:system.auth.form явным либо неявным образом. При этом авторизация происходит с полной перезагрузкой страницы. Мы рассмотрим механизм, по которому можно сделать авторизацию с отправкой данных через ajax и получением ответа.

Вызов компонента bitrix:system.auth.form выполняется таким образом:

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

Далее следует стандартным образом сделать копию шаблона данного компонента, после сего в шаблон нужно добавить файл script.js, примерно такого вида:

$(".auth_form").on("submit", function(){
let $this = $(this);
let url = $this.attr('action');
let method = $this.attr('method');
let data = $this.serialize();

$.ajax({
url: url,
type: method,
data: data,
dataType: "json",
success: function (data) {
if (data.result === true)
{
window.location.reload();
}
else
{
alert("Авторизация не прошла");
}
}
});

return false;
});

Код сильно упрощен, в нем не проверки на корректность ввода данных, если, например, у вас авторизация идет по паре email-пароль, то проверку на корректность email стоит добавить.

Так же следует обратить внимание, что в теге form должен быть атрибут action, в котором указан скрипт, в котором будет обрабатываться ajax-запрос. Этот файл можно так же расположить в шаблоне.

Ниже приведен сам скрипт, он небольшой:

<?php
define("STATISTIC_SKIP_ACTIVITY_CHECK", "true");
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/prolog_before.php");


echo json_encode(array("result" => $APPLICATION->arAuthResult));

Обратите внимание, что сама проверка авторизации и авторизация выполняется средствами ядра Битрикс и данные помещаются в массив $APPLICATION->arAuthResult. Данное поле либо содержить true, когда все верно, либо возвращается массив значений с указанием ошибок, которые можно вывести на стороне сайта.

Надеюсь, кому-то эта информация окажется полезна.