События в JS
На клиентской стороне для выполнения тех или иных операций, связанных с определенными событиями авторизации и регистрации, добавлен ряд событий, на которые можно подписаться.
На текущий момент в каждом компоненте свои события, нет какого-то единого варианта пока.
Отключение перезагрузки и редиректа
Если необходимо на конкретной странице после успешной авторизации отключить редирект в профиль пользователя или перезагрузку страницы, можно сделать это так
<script>
BX.ready(function(){
BX.Vue.event.$on('BXmakerAuthuserphoneUserAuthorized',(data) => {
// отключаем перезагрузку страницы после успешной авторизации
// перезагрузка срабатывает после этого события, поэтому так можно
data.instance.setIsEnabledReload(false);
// отключаем редирект на страницу заполнения профиля, может быть включено в настройках модуля
// редирект выполняется после этого события, поэтому так можно
data.instance.setIsEnabledRedirect(false);
});
})
</script>
Call и Login
В компоненте в основном вызывается везде одно событие после любого Ajax запроса и получения ответа. Вместе с событием приходят данные о параметрах инициализации, переданных данных и полученных.
<script type="text/javascript">
/*
// так вызывается событие
$(document).trigger('bxmaker.authuserphone.ajax', {
'params': {}, // параметры инициализации компонента
'request': {}, // данные отправленные в запросе
'result': {}, // полученный ответ от сервера
});
*/
// добавление обработчика события, чтобы отследить произошедшую авторизацию /
// регистрацию и отправить событие достижения цели в Яндекс Метрику
// заменить XXXX на номер счетчика
$(document).on("bxmaker.authuserphone.ajax", function(event, data){
var counterId = 'XXX';
if(data.result && data.result.response && data.request.method === "auth") {
if(data.result.response.type == 'AUTH') {
console.log('AUTH');
ym(counterId, "reachGoal", "authSuccess");
}
else {
console.log('REGISTER');
ym(counterId, "reachGoal", "registerSuccess");
}
}
if(data.result && data.result.response && data.request.method === "register") {
console.log('REGISTER');
ym(counterId, "reachGoal", "registerSuccess");
}
})
</script>
Simple
В компоненте в основном вызывается везде одно событие после любого Ajax запроса и получения ответа. Вместе с событием приходят переданные данные и полученный ответ
Ответ на ajax запрос Simple
<script type="text/javascript">
/*
// так вызывается событие
BX.Vue.event.$emit('BXmakerAuthuserphoneSimpleAjaxResponse', {
request: {}, // данные в запросе
result: {}, // полученный результат
});
*/
// добавление обработчика события, чтобы отследить произошедшую авторизацию /
// регистрацию и отправить событие достижения цели в Яндекс Метрику
// заменить XXXX на номер счетчика
BX.Vue.event.$on('BXmakerAuthuserphoneSimpleAjaxResponse',(data) => {
var counterId = 'XXX';
var rand = data.request.rand;
//получить доступ к объекту класса, через который можно управлять компонентом
// переменная определяется в шаблоне компонента
var obj = window['BXmakerAuthuseremailSimple__' + rand];
// доступ к корневому vue
var instance = obj.instance;
// обновить капчу можно так
// instance.refreshCaptcha();
if(data.result.response && data.request.method === 'checkConfirmation')
{
// если есть response, значит все хорошо и удалось
// проверить подтверждение и авторизоваться, зарегистрироваться
if(data.result.response.type == 'AUTH')
{
console.log('AUTH');
ym(counterId, "reachGoal", "authSuccess");
}
else if(data.result.response.type == 'REG')
{
console.log('REGISTER');
ym(counterId, "reachGoal", "registerSuccess");
}
}
});
</script>
Способ подтверждения Simple
Событие смены способа подтверждения - смс код, звонок от робота и т.п.
BX.Vue.event.$on('BXmakerAuthuserphoneSimpleChangeConfirmationType',(data) => {
console.log('BXmakerAuthuserphoneSimpleChangeConfirmationType', data);
var rand = data.rand;
// объект класса компонента
var obj = window['BXmakerAuthuserphoneSimple__' + rand];
console.log('obj', obj);
// obj.instance - объект корневого Vue компонента,
// через который можно вызывать методы, менять значения и т.п.
// проверим тип подтверждения
if(data.value === obj.instance.const.CONFIRM_TYPE_SMS_CODE)
{
console.info('*** Способ подтверждения - СМС код')
}
else
{
console.info('*** Способ подтверждения - НЕ СМС код')
}
});
Блок подтверждения Simple
Событие показа/скрытия блоков с проверкой телефона
/**
* Событие показа/скрытия блоков с проверкой телефона
*/
BX.Vue.event.$on('BXmakerAuthuserphoneSimpleChangeShowConfirm',(data) => {
console.log('BXmakerAuthuserphoneSimpleChangeShowConfirm', data);
var rand = data.rand;
// объект класса компонента
var obj = window['BXmakerAuthuserphoneSimple__' + rand];
console.log('obj', obj);
// obj.instance - объект корневого Vue компонента,
// через который можно вызывать методы, менять значения и т.п.
// проверим тип подтверждения
if(data.value)
{
console.info('*** Проверяется номер')
}
else
{
console.info('*** Подготовка к проверке номера')
}
});
После авторизации / регистрации
// так вызываются
/* после регистрации */
BX.Vue.event.$emit('BXmakerAuthuserphoneUserRegistered', {
request: requestData,
result: data,
instance: this
});
/* после авторизации */
BX.Vue.event.$emit('BXmakerAuthuserphoneUserAuthorized', {
request: requestData,
result: data,
instance: this
});
// соответственно подписываемся так
BX.Vue.event.$on('BXmakerAuthuserphoneUserAuthorized',(data) => { alert('1');});
Enter
В компоненте в основном вызывается везде одно событие после любого Ajax запроса и получения ответа. Вместе с событием приходят переданные данные и полученный ответ
Ответ на ajax запрос Enter
<script type="text/javascript">
/*
// так вызывается событие
BX.Vue.event.$emit('BXmakerAuthuserphoneEnterAjaxResponse', {
request: {}, // данные в запросе
result: {}, // полученный результат
});
*/
// добавление обработчика события, чтобы отследить произошедшую авторизацию /
// регистрацию и отправить событие достижения цели в Яндекс Метрику
// заменить XXXX на номер счетчика
BX.Vue.event.$on('BXmakerAuthuserphoneEnterAjaxResponse',(data) => {
var counterId = 'XXX';
var rand = data.request.rand;
//получить доступ к объекту класса, через который можно управлять компонентом
// переменная определяется в шаблоне компонента
var obj = window['BXmakerAuthuserphoneEnter__' + rand];
// доступ к корневому vue
var instance = obj.instance;
// обновить капчу можно так
// instance.refreshCaptcha();
if(data.result.response && data.request.method === 'authByPassword')
{
// если есть response, значит все хорошо и удалось
// проверить подтверждение и авторизоваться
console.log('AUTH');
ym(counterId, "reachGoal", "authSuccess");
}
if(data.result.response && data.request.method === 'register')
{
// если есть response, значит все хорошо и удалось
// проверить подтверждение и зарегистрироваться
console.log('REGISTER');
ym(counterId, "reachGoal", "registerSuccess");
}
if(data.result.response && data.request.method === 'authByPhone')
{
// если есть response, значит все хорошо и удалось
// проверить подтверждение и авторизоваться, зарегистрироваться
if(data.result.response.type == 'AUTH')
{
console.log('AUTH');
ym(counterId, "reachGoal", "authSuccess");
}
else if(data.result.response.type == 'REG')
{
console.log('REGISTER');
ym(counterId, "reachGoal", "registerSuccess");
}
}
});
</script>
Тип действия Enter
Событие смены типа действия - Авторизация, регистрация, восстановление пароля и т.п.
BX.Vue.event.$on('BXmakerAuthuserphoneEnterChangeActionType',(data) => {
console.log('BXmakerAuthuserphoneEnterChangeActionType', data);
var rand = data.rand;
// объект класса компонента
var obj = window['BXmakerAuthuserphoneEnter__' + rand];
console.log('obj', obj);
// obj.instance - объект корневого Vue компонента,
// через который можно вызывать методы, менять значения и т.п.
// выведем сообщение над формой
obj.instance.setMessage('event ok ' + (new Date()).toLocaleString());
});
Способ подтверждения Enter
Событие смены способа подтверждения - смс код, звонок от робота и т.п.
BX.Vue.event.$on('BXmakerAuthuserphoneEnterChangeConfirmationType',(data) => {
console.log('BXmakerAuthuserphoneEnterChangeConfirmationType', data);
var rand = data.rand;
// объект класса компонента
var obj = window['BXmakerAuthuserphoneEnter__' + rand];
console.log('obj', obj);
// obj.instance - объект корневого Vue компонента,
// через который можно вызывать методы, менять значения и т.п.
// проверим тип подтверждения
if(data.value === obj.instance.const.CONFIRM_TYPE_SMS_CODE)
{
console.info('*** Способ подтверждения - СМС код')
}
else
{
console.info('*** Способ подтверждения - НЕ СМС код')
}
});
Блок подтверждения Enter
Событие показа/скрытия блоков с проверкой телефона
BX.Vue.event.$on('BXmakerAuthuserphoneEnterChangeShowConfirm',(data) => {
console.log('BXmakerAuthuserphoneEnterChangeShowConfirm', data);
var rand = data.rand;
// объект класса компонента
var obj = window['BXmakerAuthuserphoneEnter__' + rand];
console.log('obj', obj);
// obj.instance - объект корневого Vue компонента,
// через который можно вызывать методы, менять значения и т.п.
// проверим тип подтверждения
if(data.value)
{
console.info('*** Проверяется номер')
}
else
{
console.info('*** Подготовка к проверке номера')
}
});
Вход по паролю Enter
Событие смены способа входа, по паролю или нет
BX.Vue.event.$on('BXmakerAuthuserphoneEnterChangeIsAuthByPassword',(data) => {
console.log('BXmakerAuthuserphoneEnterChangeIsAuthByPassword', data);
var rand = data.rand;
// объект класса компонента
var obj = window['BXmakerAuthuserphoneEnter__' + rand];
console.log('obj', obj);
// obj.instance - объект корневого Vue компонента,
// через который можно вызывать методы, менять значения и т.п.
// проверим тип подтверждения
if(data.value)
{
console.info('*** Вход по паролю')
}
else
{
console.info('*** Вход через подтверждение телефона')
}
});
Отключить перезагрузку страницы после успешного входа
/*
rand - генерируется компонентом и неизменяется,
также можно указать свое значение, если передать
в параметры вызова компонента нужное значение,
например: RAND_STRING => 'ajax12'
*/
var rand = 'PJfejo';
// объект класса компонента
var obj = window['BXmakerAuthuserphoneEnter__' + rand];
// obj.instance - объект корневого Vue компонента,
obj.instance.setIsEnabledReload(false);
После авторизации / регистрации
// так вызываются
/* после регистрации */
BX.Vue.event.$emit('BXmakerAuthuserphoneUserRegistered', {
request: requestData,
result: data,
instance: this
});
/* после авторизации */
BX.Vue.event.$emit('BXmakerAuthuserphoneUserAuthorized', {
request: requestData,
result: data,
instance: this
});
// соответственно подписываемся так
BX.Vue.event.$on('BXmakerAuthuserphoneUserAuthorized',(data) => { alert('1');});
Edit
В компоненте в основном вызывается везде одно событие после любого Ajax запроса и получения ответа. Вместе с событием приходят переданные данные и полученный ответ
Ответ на ajax запрос Edit
<script type="text/javascript">
/*
// так вызывается событие
BX.Vue.event.$emit('BXmakerAuthuserphoneEditAjaxResponse', {
request: {}, // данные в запросе
result: {}, // полученный результат
});
*/
// добавление обработчика события, чтобы отследить произошедшую авторизацию /
// регистрацию и отправить событие достижения цели в Яндекс Метрику
// заменить XXXX на номер счетчика
BX.Vue.event.$on('BXmakerAuthuserphoneEditAjaxResponse',(data) => {
var counterId = 'XXX';
var rand = data.request.rand;
//получить доступ к объекту класса, через который можно управлять компонентом
// переменная определяется в шаблоне компонента
var obj = window['BXmakerAuthuserphoneEdit__' + rand];
// доступ к корневому vue
var instance = obj.instance;
// скрыть подтверждение можно так -
// instance.hideConfirmation();
// или показать
// instance.showConfirmation();
if(data.result.response && data.request.method === 'checkConfirmation')
{
// если есть response, значит все хорошо и в нем сообщение об успешности выполнения операции
console.log('PHONE_IS_CHANGED');
ym(counterId, "reachGoal", "PHONE_IS_CHANGED");
}
});
</script>
Способ подтверждения Edit
Событие смены способа подтверждения - смс код, звонок от робота и т.п.
BX.Vue.event.$on('BXmakerAuthuserphoneEditChangeConfirmationType',(data) => {
console.log('BXmakerAuthuserphoneEditChangeConfirmationType', data);
var rand = data.rand;
// объект класса компонента
var obj = window['BXmakerAuthuserphoneEdit__' + rand];
console.log('obj', obj);
// obj.instance - объект корневого Vue компонента,
// через который можно вызывать методы, менять значения и т.п.
// проверим тип подтверждения
if(data.value === obj.instance.const.CONFIRM_TYPE_SMS_CODE)
{
console.info('*** Способ подтверждения - СМС код')
}
else
{
console.info('*** Способ подтверждения - НЕ СМС код')
}
});
Блок подтверждения Edit
Событие показа/скрытия блоков с проверкой телефона
BX.Vue.event.$on('BXmakerAuthuserphoneEditChangeShowConfirm',(data) => {
console.log('BXmakerAuthuserphoneEditChangeShowConfirm', data);
var rand = data.rand;
// объект класса компонента
var obj = window['BXmakerAuthuserphoneEdit__' + rand];
console.log('obj', obj);
// obj.instance - объект корневого Vue компонента,
// через который можно вызывать методы, менять значения и т.п.
// проверим тип подтверждения
if(data.value)
{
console.info('*** Проверяется номер')
}
else
{
console.info('*** Подготовка к проверке номера')
}
});