Это новый тип капчи, которая не требует выполнения заданий, а сама определяет пользователя по действиям которые он совершает на сайте. Это невидимая капча, нового типа, которая сейчас очень часто используется на различных сайтах.
Первым делом вам нужно зарегистрировать google почту и авторизоваться.
Если вы впервые создаете капчу то у вас появится окно с создание капчи. Здесь вам нужно заполнить поля.
В первом поле вы указываете название по которому вы будете определять нужную капчу. В это поле можно прописать свое название, так как это не на что не влияет.
Далее вы выбираете тип капчи. Сегодня мы рассматриваем капчу версии 3, поэтому выбирайте её.
После это прописываем доменные имена. Если вы пользуетесь локальным сервером, то прописывайте localhost или название папки, если это OpenServer.
!!!Внимание при работе с локальным сервером могут возникнуть проблемы в аутентификации пользователей. Google Recaptcha может работать некорректно, поэтому лучше тестировать на реальных хостингах!!!
После того как вы прописали домены, вы принимаете условия использования reCaptcha и нажимаете на кнопку отправить.
После этого вы попадаете на страницу с ключами. Вам нужно скопировать данные ключи.
Нажав на кнопку «Перейти в google аналитику» вы попадаете на страницу статистики, где показаны все выполнения и блокировки представленной капчи.
На данной странице вы можете посмотреть статистику по каждой капче, добавить новую капчу, изменить старую.
Код для Google reCaptcha
И так правильнее было бы разбить код по файлам, но для наглядности я занесу весь код в один файл.
Весь код выглядит так…
<?php
/*КЛЮЧИ*/
define('SITE_KEY', '6LfH-aIUAAAAANTmsRDS2lZRIjjOxL4Q9q0fIFTl');
define('SECRET_KEY', '6LfH-aIUAAAAAEWJIQJizklZldRxFeTGseZSbRxu');
/*ОБРАБОТКА ЗАПРОСА*/
if($_POST){
/*СОЗДАЕМ ФУНКЦИЮ КОТОРАЯ ДЕЛАЕТ ЗАПРОС НА GOOGLE СЕРВИС*/
function getCaptcha($SecretKey) {
$Response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".SECRET_KEY."&response={$SecretKey}");
$Return = json_decode($Response);
return $Return;
}
/*ПРОИЗВОДИМ ЗАПРОС НА GOOGLE СЕРВИС И ЗАПИСЫВАЕМ ОТВЕТ*/
$Return = getCaptcha($_POST['g-recaptcha-response']);
/*ВЫВОДИМ НА ЭКРАН ПОЛУЧЕННЫЙ ОТВЕТ*/
var_dump($Return);
/*ЕСЛИ ЗАПРОС УДАЧНО ОТПРАВЛЕН И ЗНАЧЕНИЕ score БОЛЬШЕ 0,5 ВЫПОЛНЯЕМ КОД*/
if($Return->success == true && $Return->score > 0.5){
echo "Succes!";
}
else {
echo "You are Robot";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="/" method="POST">
<input type="text" name="name" /><br/><br/>
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" /><br/><br/>
<input type="text" value="Submit" />
</form>
<script src="https://www.google.com/recaptcha/api.js?render=<?php echo SITE_KEY?>"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('<?php echo SITE_KEY;?>', {action: 'homepage'}).then(function(token) {
//console.log(token);
document.getElementById('g-recaptcha-response').value=token;
});
});
</script>
</body>
</html>
HTML
Давайте начнем разбор с HTML. Здесь я создал простую форму которая состоит из двух полей и кнопки. Каждому полю необходимо прописать значение для атрибута name . Одно из полей мы будем использовать для капчи, поэтому зададим ему специальный идентификатор — g-recaptcha-response.
Ниже я прописываю JavaScript код. Здесь мы подключаем API от Google и прописываем основной скрипт который подключает капчу. Здесь в качестве параметра нужно передать значение ключа который вы получали при создании капчи. Вы можете передать значение целиком или как я передать значение из константы в которой находится данный ключ.
Раскомментируйте функцию console.log(token), чтобы увидеть токен в консоли. Данный токен мы будем передавать в качестве значения для поля #g-recaptcha-response.
PHP
Теперь рассмотрим PHP. Вначале я занес ключи в константы, чтобы с ними было удобнее работать(одну из них я уже прописывал в js скрипте).
Ниже мы прописываем проверку что массив POST не пустой и данные из формы записываются.
Далее мы создаем функцию которая будет делать запрос на google сервис и возвращать нам данные этого запроса.
После этого мы записываем работу функции в переменную, чтобы с ней было удобнее работать.
В документации написано, что если значение параметра score ниже 0.5 то скорее всего это бот, а если выше то это человек. Исходя из этого мы создаем данное условия и плюсом проверяем что проверка прошла успешно.
/*КЛЮЧИ*/
define('SITE_KEY', '6LfH-aIUAAAAANTmsRDS2lZRIjjOxL4Q9q0fIFTl');
define('SECRET_KEY', '6LfH-aIUAAAAAEWJIQJizklZldRxFeTGseZSbRxu');
/*ОБРАБОТКА ЗАПРОСА*/
if($_POST){
/*СОЗДАЕМ ФУНКЦИЮ КОТОРАЯ ДЕЛАЕТ ЗАПРОС НА GOOGLE СЕРВИС*/
function getCaptcha($SecretKey) {
$Response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".SECRET_KEY."&response={$SecretKey}");
$Return = json_decode($Response);
return $Return;
}
/*ПРОИЗВОДИМ ЗАПРОС НА GOOGLE СЕРВИС И ЗАПИСЫВАЕМ ОТВЕТ*/
$Return = getCaptcha($_POST['g-recaptcha-response']);
/*ВЫВОДИМ НА ЭКРАН ПОЛУЧЕННЫЙ ОТВЕТ*/
var_dump($Return);
/*ЕСЛИ ЗАПРОС УДАЧНО ОТПРАВЛЕН И ЗНАЧЕНИЕ score БОЛЬШЕ 0,5 ВЫПОЛНЯЕМ КОД*/
if($Return->success == true && $Return->score > 0.5){
echo "Succes!";
}
else {
echo "You are Robot";
}
}
Понадобилось сделать так, чтобы была возможность выбрать только какой-то один фильтр, при этом, второй фильтр одновременно с выбранным выбрать было нельзя. ))
Масло масляное, но в группах товаров на сайте есть взаимоисключающие друг друга фильтры.
Для реализации этого в Битрикс, в шаблоне вывода умного фильтра, добавил для input type=»checkbox» в цикле foreach поэлементного вывода дополнительный атрибут
data-filtername="<?=$arItem["NAME"]?>"
где <?=$arItem[«NAME»]?> — это не название пункта фильтра, а название раздела фильтра. Ну, например, раздел фильтра «Цвет» имеет имеет несколько элементов — цветов. Так вот, в каждом элементе раздела «Цвет» будет поле атрибута с названием «Цвет», т.е., data-filtername=»Цвет».
По сути, если элементы фильтра выводятся не в цикле, то атрибут вставляется в нужные input checkbox в HTML.
И там же в шаблоне добавил скрипт для реализации функционала:
<script>
// для первого раздела фильтра
let filterCheck = document.querySelectorAll("input[data-filtername='Одно']"); // выбираем все input с нужным атрибутом
// проходим циклом по всем элементам для проверки: если в другом разделе фильтра уже выбран какой-либо пункт, то, при клике на нашем checkbox, снимаем с него галку и выводим предупреждение
filterCheck.forEach(function(item) {
item.onclick = function() {
if (document.querySelector("input[data-filtername='Другое']:checked")) {
alert('Простите, но невозможно выбрать в фильтре Одно и Другое одновременно.')
item.checked = false; // снимаем галку с элемента
}
}
});
// аналогично первому
let filterCheck2 = document.querySelectorAll("input[data-filtername='Другое']");
filterCheck2.forEach(function(item) {
item.onclick = function() {
if (document.querySelector("input[data-filtername='Одно']:checked")) {
alert('Простите, но невозможно выбрать в фильтре Одно и Другое одновременно')
item.checked = false;
}
}
});
</script>
Реализация, понятное дело, не универсальная, но на скорую руку вполне рабочий вариант.
