- HTML и CSS
- CSS3 shape-outside или обтекание картинки текстом
- Маштабируемый фон background css
- CSS выравнивание по вертикали
- Хранение картинок в css с помощью base64
- Как сделать ссылку, якорь?
- CSS3 для Internet Explirer 6 и старше
- Вёрстка для мобильных устройств
- Растягиваем html на всю страницу
- Таблица цветов CSS
- Выравнивание тега LI в контенте
- Оооох какой прекрасный box-sizing
- Делаем таблицу при помощи div и css
- Как сделать кросбраузерный linear-gradient без особых усилий
- CSS прозрачность для всех
- CSS для печати @media print
- Выравнивание блоков с помощью css {display: inline-block}
- Замечательное значение inherit
- Тень блочных элементов в CSS3
- Обводка текста с помощью CSS
- Полезные html символы
- Хаки или CSS для Internet Explorer-ов
- Делаем трёхуровневое меню на css
- jQuery, javaScript
- Устанавливаем на Яндекс Карте свою картинку вместо стандартной метки
- Адаптивные фотогалереи, слайдеры, карусели для сайта
- Узнаём координаты для установки скрипта Яндекс Карт
- Собственный фильтр для селекторов. Выбираем случайный элемент на jQuery
- closeClick true fancyBox 2, closeClick :true
- jquery ui slider, дробные числа, float values
- Парсер параметров из адресной строки jQuery
- Подсказки по javascript
- Выпадающее горизонтальное меню
- Работа с объектами в JavaScript: теория и практика
- Работа с массивами в jquery
- PHP
- Регулярные выражения онлайн
- Как определить путь к файлу текущего класса
- PHP скрипт для поиска. Удаление вируса с сайта
- UMI-CMS
- UMI CMS rel canonical
- UMI CMS API Шаблоны данных Вывести текст из подсказки
- UMI CMS API Шаблоны данных Добавить префикс к полю
- Если надо в UMI CMS открыть доступ к файлу в корне сайта htaccess
- Как перенести контент со старой UMI на новую UMI CMS с помощью umiDump
- Отправка письма с вложением UMI CMS API
- Как вывести из набор изображений одну картинку UMI CMS API (или случайную)
- UMI CMS Основные поля для отправки формы в модуле Конструктор форм
- Функции API UMI CMS для добавления, редактирования, удаления объектов каталога
- Функции API UMI CMS для добавления, редактирования, удаления объектов каталога
- UMI CMS Фильтрация спама на сайте
- Работа с набором изображений (multiple_image) TPL в UMI.CMS
- UMI CMS Ошибка "I expect value in request for param"
- UMI.CMS USEL кириллица не работает
- UMI Добавление дополнительных настроик на примере модуля catalog
- Подключение шаблонов в UMI.CMS в TPL шаблонизаторе
- UMI.CMS - забыл пароль администратора. Как восстановить?
- UMI Selector USEL фильтрация в PHP
- Передать в xslt xpath в запросе знак амперсанда
- Работа с system makeThumbnail
- Вывести названия методов в UMI
- UMI CMS API загрузка модуля
- UMI CMS карта сайта с помощью Usel
- UMI выгрузка из 1C поиск страницы копии, удаление копии
- Как в UMI.CMS изменить адрес домена в sitemap.xml и robots.txt. Изменить HTTP на HTTPS
- Вывод баннеров/слайдера в umi xslt
- UMI.CMS нет вкладок в админке
- XSLT вывод ссылки в которой присутствует знак амперсанда &
- UMI CMS Выгрузка из 1С нужно чтобы название товара (страницы каталога) не менялось
- Как в UMI поставить всем страницам галку на просмотр гостю
- Как узнать у страницы id шаблона данных через api?
- UMI.CMS работа с debug config.ini фильтрация по IP
- Как задать заголовок H1 (header) на странице созданного метода UMI CMS
- Выводим случайную статью в UMI CMS с помощью usel в tpl
- UMI.CMS Открыть закрытые поля в шаблонах данных ?skip-lock=1
- Как отредактировать облако тегов
- Как узнать позицию страницы среди соседних страниц в UMI
- umi cms usel вывод страниц каталога c фильтрацией
- Вывод справочника при помощи usel
- Как в umi узнать umiHierarchyElement из id umiObject
- Карта сайта на UMI CMS с помощью кастомного метода
- Редирект со страницы на страницу
- Создание, обслуживание, поддержка сайта
- Как удалить в картинке jpg, jpeg, gif? eval или base64_decode
- Основные технические ошибки, допускаемые при создании сайта
- Как выбрать домен?
- Хостинг, что это и для чего он нужен
- htaccess редиректы
- Наполнение сайта
- Цены на разработку сайта в Петербурге
- Какова может быть стоимость поддержки сайта?
- Важные мелочи!
- Каким должен быть сайт по версии яндекса
- 5 советов верстальщику
- Копирайтинг, seo, продвижение
- Ранжирование сайтов в поисковиках, выдача поисковых систем, поисковый алгоритм, поисковое ранжирование сайта
- Что нужно делать чтобы сайт был на первых местах?
- Копирайтинг - что это?
- Добавить сайты в индекс поисковых систем, регистрация в поисковиках
- Почему сайт не может приносить прибыль сразу?
- Почему следует вкладывать деньги в сайт?
- SEO статья о SEO-копирайтинге (seo copyrighting, seo copywriting). Кто seo копирайтер, что такое seo текст сайта, как помогают seo статьи и зачем нужна оптимизация?
- Как верстать сайт для SEO?
- Контекстная реклама
Используем Google reCaptcha вместе с PHP и JavaScript
Компания Google уже давно представила удобную замену стандартной цифро-буквенной каптче, которую вы вводите на большинстве сайтов. Проект от Google называется reCaptcha. Сама каптча настолько популярна, что большинство крупных сайтов, таких как сам Google, вконтакте и другие использует эту защиту от роботов.
В отличие от стандартной каптчи, где нам нужно вводить буквы и цифры новая версия Google reCaptcha позволяет нам проходить валидацию в однин клик, а если Google хоть на чуть-чуть будет сомневаться в том, что вы не робот, то она сделает дополнительную проверку.
Нет ничего сложного в том, чтобы поставить Google reCaptcha на свой сайт. Первым делом идем на сайт:
https://www.google.com/recaptcha/intro/index.html
Нажимаем Get reCaptcha и регистрируем свой сайт.
После регистрации своего сайта. Вы получите два ключа - секретный ключ (Google Secret Key) и публичный ключ (Google Site Key). Секретный ключ будет отправляться на сервер Google вместе с GET запросом, для проверки каптчи, а публичный ключ устанавливается непосредственно на ваш сайт.
Устанавливаем HTML Google reCaptcha на сайт.
Установка HTML кода Google reCaptcha на сайт происходит в два этапа. Первый этап заключается в подключении необходимых JavaScript библиотек:
<script src="https://www.google.com/recaptcha/api.js" type="text/javascript"> </script>
Затем непосредственно в форму, которую необходимо проверять вы вставляете DIV блок следующего содержания:
<div class="g-recaptcha" data-sitekey="Ваш ПУБЛИЧНЫЙ ключ reCaptcha"></div>
Проверка Google reCaptcha средствами PHP
Несмотря на то, что у вас уже появилась каптча на странице, она не проходит валидацию на сервере и любой человек может "пройти" вашу каптчу. Давайте исправим это.
Google reCaptcha проверяется на сервере, путем отправки GET запроса на сервер Google с приватным ключом, IP адресом и значением поля g-recaptcha-response из $_POST.
Вот листинг файла post.php, который отправляет запрос на сервер Google для проверки валидации каптчи:
/**
* Ваш приватный ключ от Google reCaptcha.
*/
const GOOGLE_RECAPTCHA_PRIVATE_KEY = '6LeuFQ0UAAAAAPHYQANQn7TBBBP9oqRg8cWMR8oK';
if (isset($_POST['g-recaptcha-response'])) {
$params = [
'secret' => GOOGLE_RECAPTCHA_PRIVATE_KEY,
'response' => $_POST['g-recaptcha-response'],
'remoteip' => $_SERVER['REMOTE_ADDR']
];
$curl = curl_init('https://www.google.com/recaptcha/api/siteverify?' . http_build_query($params));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$response = json_decode(curl_exec($curl));
curl_close($curl);
if (isset($response->success) && $response->success == true) {
echo "Вы прошли проверку reCaptcha";
} else {
echo "Вы не прошли проверку reCaptcha";
}
}
Этот файл был создан для примера и в реальной ситуации, скорее всего вы будете проводить какие-либо дополнительные проверки, например проверку на правильность полей логин и пароль.
Как обновить Google reCaptcha средствами JavaScript.
Иногда требуется обновить reCaptcha программно, например если вы отправляете данные на сервер средствами AJAX. Сделать это несложно, достаточно в обработчике прописать следующую строчку:
grecaptcha.reset();
И при определенном событии, например, при нажатии на кнопку, reCaptcha обновится. Пример обновления Google reCaptcha при нажатии на кнопку:
var button = document.getElementById('reload');
button.addEventListener('click', function(e) {
grecaptcha.reset();
});
Как разместить несколько кодов Google reCaptcha на одной странице.
Очень часто требуется, чтобы на одной странице было несколько Google reCaptcha. Сделать это стандартным способом невозможно, так как в этом случае всегда будет установлена только одна каптча, а остальные будут скрыты. Такое поведение можно с легкостью переопределить, если подписаться на событие onload возникающее во время загрузки JavaScript файла каптчи:
<script src="https://www.google.com/recaptcha/api.js?onload=onLoadHandler&render=explicit"></script>
В листинге выше вы должны обратить свое внимание на строчку onLoadHandler, это и есть наша callBack функция, которая будет вызываться при загрузке скрипта. Давайте посмотрим ее листинг:
var onLoadHandler = function( ) {
var captcha1 = grecaptcha.render('captcha1ID', {
'sitekey' : '6LeuFQ0UAAAAAGrIx6ihIjeeBPz930eWdJ6k1Cea',
'theme' : 'light'
});
var captcha2 = grecaptcha.render('captcha2ID', {
'sitekey' : '6LeuFQ0UAAAAAGrIx6ihIjeeBPz930eWdJ6k1Cea',
'theme' : 'light'
});
}
Теперь, при загрузке страницы у нас будет вызываться каждый раз функция onLoadHandler, в который мы инициализируем одновременно две Google reCaptcha на своей странице и при этом две каптчи одинаково хорошо работают. Вот полный HTML код вызова несколько reCaptcha на одной странице:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google reCaptcha</title>
<script src="https://www.google.com/recaptcha/api.js?onload=onLoadHandler&render=explicit"></script>
</head>
<body>
<form action="post.php" method="post">
<div id="captcha1ID"></div>
<button type="submit">Отправить первую форму</button>
</form>
<form action="post.php" method="post">
<div id="captcha2ID"></div>
<button type="submit">Отправить вторую форму</button>
</form>
<script type="text/javascript">
var onLoadHandler = function( ) {
var captcha1 = grecaptcha.render('captcha1ID', {
'sitekey': '6LeuFQ0UAAAAAGrIx6ihIjeeBPz930eWdJ6k1Cea',
'theme': 'light'
});
var captcha2 = grecaptcha.render('captcha2ID', {
'sitekey': '6LeuFQ0UAAAAAGrIx6ihIjeeBPz930eWdJ6k1Cea',
'theme': 'light'
});
};
</script>
</body>
</html>
Добавление нескольких Google reCaptcha с помощью jQuery по клику мыши.
Часто требуется добавить несколько Google reCaptcha с помощью JavaScript или jQuery при каком-то событии, например, по клику мыши. Сделать это очень просто, зная основной принцип Google reCaptcha: должен быть элемент с уникальным ID и он должен быть в DOM дереве. Дальше осталось написать готовый код:
<script type="text/javascript">
$(function( ) {
$('.action').on('click', function(e) {
e.preventDefault();
var $container = $('#google-recaptcha-container');
var id = 'captcha-' + $container.find('div').length;
var $div = $('<div></div>');
$div.attr('id', id);
$container.append($div);
grecaptcha.render(id, {
'sitekey': '6LeuFQ0UAAAAAGrIx6ihIjeeBPz930eWdJ6k1Cea',
'theme': 'light'
});
});
});
</script>
Суть кода в том, что мы по какому-то действию должны в $container вставить DIV с уникальным ID, а потом в этот DIV отрендерить нашу каптчу. Все очень просто.
Конечно же, это пример синтетический, но когда вы будете делать свой проект с Google reCaptcha, скороее всего у вас будет несколько модальных окон или форм и на каждой нужно будет показать свою каптчу.
Полный листинг файла находится в GitHub репозитории, ссылку на который вы найдете в конце этой статьи.
Invalid domain for site key
Последнее, о чем хотелось бы рассказать - об ошибке Invalid domain for site key. Ошибка возникает в том случае, если ваш публичный ключ находится не на том домене, который вы указывали в настройках reCaptcha. Думаю, тут все понятно.
Полный листинг и готовый рабочий пример можно скачать с нашего GitHub репозитория по адресу: