Управление reCAPTCHA на uCoz

В uCoz появилась reCAPTCHA, от чего появляется улыбка на лице многих пользователей, а особенно простых пользователей и гостей, хе-хе :). В этой статье предлагаю разработчикам ознакомиться с нюансами использования.

Ссылка на скрипт добавлена перед </head> , туда-же добавлены несколько строк кода c функциями обновления и рендинга каптчи, и стили в base.css.

Основном принцип использования, следующий:

  • GET-запрос на нужную страницу
  • Получение ssid и блока каптчи
  • Установка блока на странице
  • Прорисовка каптчи

Api reCAPTCHA

С этим вы можете ознакомиться на офф. странице с документацией.

Использование

Доступны следуюущие функции:

  • reCallback() — перебирает все каптчи на странице и рендит.
  • reReset() — обновляет каптчу, аналогично кнопке обновления на самой каптче.

Тёмный стиль

Самый простой способ что-бы сменить стиль, установить в нижнюю часть сайта скрипт:

<script>
var captchaBlocks = document.querySelectorAll('.g-recaptcha');
[].forEach.call( captchaBlocks, function( item ) {
    item.outerHTML = '<div class="g-recaptcha" data-sitekey="' + item.dataset.sitekey + '" data-theme="dark"></div>';
});
reCallback();
</script>

Использование для продвинутых

Если вы используете кастомные системные скрипты, тогда вам нужна ручная установка.

Ручной рендинг

После загрузки скрипта, ничего не происходит, а только когда используете специальную функцию прорисовки.

Например, вместо кнопки добавления поместили блок каптчи, а потом функцией его прорисовали.

На странице, установите скрипт:

<script src="https://www.google.com/recaptcha/api.js?render=explicit" async="" defer=""></script>

Добавьте контейнер, где прорисуется каптча:

<div class="g-recaptcha" id="my_recaptha" data-sitekey="6LcwAwsUAAAAAC26-Yh0GxD0_zR02NsphfQC-d-U"></div>
  • 6LcwAwsUAAAAAC26-Yh0GxD0_zR02NsphfQC-d-U — api ключ, можно использовать ваш указанный в общих настройках или данный системный по умолчанию.

Так-же доступны другие полезные теги, подробнее читайте в документации, я приведу лишь некоторые:

  • data-theme — стиль dark или light
  • data-size — размер compact или normal

Прорисовка каптчи:

var captchaBlock = document.querySelector('.g-recaptcha');
grecaptcha.render(captchaBlock, {sitekey: captchaBlock.dataset.sitekey });

Передача результата

// получение результата
var captchaData = document.querySelector('#my_recaptha #g-recaptcha-response').value;

// для передачи на сервер
{
...
    'g-recaptcha-response' : captchaData
...
}

Для разработчиков uCoz

Личная благодарность, это приятная функция ( хоть и системная каптча то же неплоха), но reCAPTCHA немного удобнее, из дополнений я бы добавил в панели управления возможность изменения стиля, размера и тд.

Комментарии - 5
для добавления комментария
пожалуйста войдите или зарегистрируйтесь
Как_В_Старой_Сказке
13:36, 19.01.2017
Привет! Есть скрипт uWnd вызова отправки ЛС. Как бы туда прикрутить эту капчу вместо старой.
new _uWnd('myForm','ОС',440,320,{align:'left',fadeclosetype:1,min:1,shadow:1,header:1,max:1,resize:0, oncontent:function(){$.get(el.href,{},function(data){ $('#sbm',data).appendTo('#mSb'); $('#secuCode',data).appendTo('#mC1'); $('input[name="seckey"],input[name="ssid"]',data).appendTo('#mS1'); $('#secuImg',data).appendTo('#mS1');}); $('#PMtoUser').val(usr); $('#pmSubject').val(tem); $('#mess);}},cont);
ReSLeaR-
09:02, 20.01.2017
документация есть) скоро я выложу примеры
masterwind
15:48, 20.01.2017
В этот скрипт никак, в нем очепятка =((
Как_В_Старой_Сказке
15:52, 20.01.2017
Ну это кусочек скрипта, весь не влез. Я увидел тут вроде от старой капчи часть, подумал именно в этом месте надо на новую менять.
Как_В_Старой_Сказке
16:20, 20.01.2017
Вот такая там концовка по идее:
.val(tem);
$('#message').val(mess);
}},cont);
Хостинг от uCoz