В этой небольшой статье мы рассмотрим простой пример по замене reCAPTCHA м на SmartCaptcha в контактных формах на сайте (для обратной связи с клиентами) с использованием HTML и JavaScript.
После введения новых законов на территории РФ перед многими владельцами сайтов и веб-сервисов встал вопрос о замене капчи с Гугл-сервисов на отечественные аналоги. Проще всего переезд можно осуществить на сервисы от компании Яндекс.
Дочитайте статью до конца и только после полного ознакомления приступайте к работе!
1. Удаление Google reCAPTCHA с сайта
Первым делом нам нужно удалить с сайта подключаемое API от Google, выглядит она примерно следующим образом:
<script src="https://www.google.com/recaptcha/api.js"></script>Обычно код капчи располагается в html страницах вверху сайта между тегами <head> и </head>, но скрипты могут располагаться и в другом месте, ищите строку с содержимым: <script src=»https://www.google.com/recaptcha/api.js …
После того, как мы нашли и удалили API гугл капчи, переходим к следующему шагу, а блоки, отвечающие за Гугл-капчу в самих контактных формах мы пока не трогаем.
2. Регистрируем аккаунт в Yandex Cloud и создаем нашу первую Yandex SmartCaptcha
Полная документация, где все расписано по шагам находится здесь. В данном разделе мы очень коротко пробежимся по основным моментам.
- Заходим в консоль Yandex Cloud
- Выбираем Yandex SmartCaptcha или просто SmartCaptcha
- Далее нажимаем «Создать капчу»
- Заполняем все необходимые поля как на скриншоте ниже
- Вводим название капчи английскими буквами
- Вводим адрес сайта, где мы будем использовать данную капчу
- Стили капчи можно настроить под себя в пункте «Настройки внешнего вида» или выбрать один из стандартных вариантов. Внесенные изменения во внешний вид будут отображены в правой части экрана.
- Листаем страницу настроек ниже:
- Выбираем нужный тип задания по распознаванию капчи
- Я бы посоветовал отжать галочку в пункте «Обучение ML-моделей», чтобы не передавать данные куда вам не нужно (но тут на ваше усмотрение)
- Финальный шаг создания — нажимаем кнопку «Создать капчу«
Теперь нам нужен ключ от созданной нами капчи
В списке капч выбираем нашу, нажимаем «Обзор» — ищем строку Ключ клиента, копируем ключ.
3. Интегрируем капчу Яндекса в контактную форму на сайте
Смотрим на нашу контактную форму, пример ниже:
<form method="post" action="#">
<input type="email">
<div class="g-recaptcha" data-sitekey="КЛЮЧ_САЙТА" ></div>
<button type="submit">Отправить</button>
</form>В строке под номером 3 удаляем код Google reCaptcha:
<div class="g-recaptcha" data-sitekey="КЛЮЧ_САЙТА" ></div>Вставляем код Яндекс капчи, в атрибут data-sitekey вставляем ключ клиента капчи:
<div class="smart-captcha" data-sitekey="сюда вставляем ключ клиента" data-callback="enableSubmitButtonZvon"></div>В итоге получается примерно такой код:
<form method="post" action="#">
<input name="phone" placeholder="Введите ваш телефон">
<div class="smart-captcha" data-sitekey="сюда вставляем ключ клиента"></div>
<button type="submit">Отправить</button>
</form>Проверка заполнения капчи
Чтобы заблокировать кнопку отправки формы перед проверкой Yandex SmartCaptcha — можно написать простую callback-функцию, в капчу добавив атрибут data-callback c уникальным значением, а в кнопку button добавим уникальный id и атрибут disabled:
<form method="post" action="#">
<input name="phone" placeholder="Введите ваш телефон">
<div class="smart-captcha" data-sitekey="сюда вставляем ключ клиента"
data-callback="enableSubmitButton"></div>
<button type="submit" id="submitButton" disabled>Отправить</button>
</form>А ниже, под код формы вставляем скрипт для проверки на нажатие капчи. Если пользователь или бот капчу не прошел, то кнопка отправки формы останется заблокированной.
С использованием чистого JavaScript
<script>
function enableSubmitButton() {
document.getElementById('submitButton').disabled = false;
};
</script>С использованием библиотеки JQuery
<script>
function enableSubmitButton() {
$('#submitButton').removeAttr('disabled');
};
</script>Визуально
Примечание
Данный коллбэк работал как в Гугл капче, так будет работать и с Яндекс капчей. Именно подобные решения упрощают переезд в разы, так как нам не придется переписывать старые скрипты и коллбэки (если они были написаны ранее).
Остальные кейсы по замене капчи работают по аналогии, все сделано максимально удобно и похоже на зарубежные аналоги, так что заменить капчу не составит огромного труда но, перед проведением любых работ рекомендую ознакомиться с официальной документацией от Яндекса и сделать бекап (резервную копию вашего сайта).
Надеюсь, эта статья была для вас полезной и интересной. Если вы хотите, чтобы я создавал больше контента и делал это чаще, вы можете поддержать меня донатом. Благодарю вас за ваш вклад в творческий процесс!
Т-Банк (Тинькофф):
2200700867913161
Ozon Bank:
2204240107102131
Boosty: https://boosty.to/woronokin/donate
Личный блог
