Как се инсталира капча reCaptcha 2 в уебсайт?

ganmax

6 години ago

Стъпки за инсталиране на reCaptcha 2 в уебсайт.

Какво е Captcha?

На български се произнася капча или както се наложи в българското уеб пространство „Код за проверка“. За краткост ще я наричаме в тази публикация капча.
До скоро това беше допълнително поле в уеб форми на много уеб сайтове, в което потребителят трябваше да въведе няколко случайно избрани букви и цифри.
Целта беше, сайтът да провери дали уеб формата се попълва от реален човек или от автоматизиран софтуер.
Проблемът беше, че ако буквите са малко на брой и се четат лесно, то недоброжелатели, могат лесно да заобиколят тази проверка и да направят автоматична програма (скрипт), която да попълва и изпраща уеб формата бързо и автоматично. Ако пък шрифтът е нечетим става много трудно за истинските потребители да въведат правилно кода за проверка. Това може да отблъсне потребителите на сайта и да спрат да го ползват.

За щастие преди време Google представи услугата reCaptcha версия 2, при която вече няма нужда да се въвежда нищо. Само се кликва на една кутийка (checkbox), с което показваме на сайта, че сме реален човек, а не автоматизирана програма – робот.

Къде се ползва капча?

Най-често се ползва на уеб страници, които съдържат една от тези: форма за регистрация, форма за логване, форма за забравена парола, форма за коментари или контактна форма.
Също така може да се ползва в мобилни приложения. Изобщо на много места, където трябва да се провери, дали наистина човек въвежда данните.

Как да инсталирам код за проверка от вида капча в сайта си?

Стъпка 1. Регистриране на сайт и получаване на reCaptcha ключове

Отворете сайта https://www.google.com/recaptcha/
Натиснете горе вдясно синия бутон [Admin console]. Логвате с вашия Google акаунт, с който управлявате сайта си.
Ако за пръв път създавате капча, ще попаднете в страница „Register a new site“. Иначе трябва да изберете горе вдясно бутончето Create с плюс [+].
В полето Label въведете заглавие на капча.
Ако ще ползвате само една капча, може в това поле да въведете само домейна на сайта.
В полето „reCAPTCHA type“ изберете вид на капчата.
В този пример ползваме reCAPTCHA v2 – „I’m not a robot“ Checkbox.
Това е капча, в която потребителят трябва с мишката да избере чекбокс.

По-долу в полето Domain е важно да въведете домейна на вашия сайт. Ако въведете главен домейн ganbox.com капчата ще работи и за поддомейни като www.ganbox.com, blog.ganbox.com, но кодът няма да работи, ако бъде поставен на друг сайт.
За да въведете домейна първо кликнете на надписа „Add a domain,e.g. example.com“, за да стане полето за въвеждане на фокус. Въведете домейна и след това натиснете знака плюс отляво. Може да въведете още един домейн, но не ви го препоръчвам, за по-добър контрол.

В полето Owners автоматично е попълнен текущият Google акаунт, като може да се добавят и други акаунти, които да управляват настройките на капчата.

Задължително е да се съгласите с условията като изберете „Accept the reCAPTCHA Terms of Service“.

Препоръчително е да остане включена опцията „Send alerts to owners“. Това може да ви спести доста проблеми. Например формата ви за контакт да не работи и ако тези уведомления не са включени, може да загубите много клиенти.

Накрая натиснете бутон [Submit].

На следващата стъпка ще видите двойка ключове.
В първото поле „Site key“ се намира вашият публичен ключ, който се поставя в HTML кода на сайта.

Второто поле „Secret key“ е вашият частен секретен ключ, който се поставя на сървъра в скрипта за проверка. Важно е да пазите в тайна този ключ. Например не трябва да го записвате в .txt, .doc, .pdf или друг текстов файл поставен в публична директория на сървъра.

Стъпка 2: Инсталиране на капча в сайт

Ако ползвате платформа WordPress вижте в края на тази точка.
Следващите редове са за уеб програмисти.
Тук ще разгледаме стъпка по стъпка инсталиране на капча в произволен сайт.
Изискванията за сайта са да бъде динамичен и да имате достъп до файловете на сайта, например през FTP или cPanel. Друго изискване на Google е вашият сайт да има инсталиран SSL сертификат.

Инсталирането на капча е лесно. Трябва да направите основно две неща:
1. При клиента.
Поставяте JavaScript код в HTML кода на уеб формата, в която ще има капча. Там се поставя и публичния ключ – Site key. При зареждане на страницата този код показва капчата в браузъра на клиента, в която потребителят трябва да цъкне на чекбокс кутийката, за да покаже, че не е робот. След изпращане на формата, данните се изпращат от браузъра към сървъра.
2. На сървъра.
Трябва в скрипта за проверка на изпратените данни, да се добавя код за проверка на капчата.
В този пример ще използваме скриптовия език PHP, но може да се ползва всеки един скриптов език.
Така нека да видим подробно как се инсталира.

1. Поставяне на капча в уеб форма.

В страницата, в която се показва уеб формата добавете в head частта на HTML кода, например преди затварящия таг </head> следния ред:

Добра практика е да включвате този ред с JavaScript код само там където има уеб форма, която ще показва капча. Този ред ще зареди от сайт на Google нужната функционалност за капчата.
След това в кода на уеб формата поставете там където искате да се покаже, следния ред:

Този ред се поставя задължително преди затварящия таг на формата </form> и обикновено точно преди бутона за изпращане, с HTML код подобен на този:
<input type=“submit“ value=“Submit“>
За да заработи този код и да покаже капча, трябва на мястото на your_site_key,да поставите вашия публичен ключ Site key от стъпка 1 горе.
Ако в бързината сте пропуснали това, ще се зареди блокът с капча, но ще видите грешка в червен цвят с надпис „ERROR for site owner: Invalid site key“.
Ако сте объркали ключа и например сте сложили от друг ваш сайт, ще видите съобщение за грешка „ERROR for site owner: Invalid domain for site key“.
Ако ключът е правилен, ще се зареди капчата и ще видите чекбокс и надпис „I’m not a robot“.

Как да променя езика на reCaptcha?

За да стане този надпис на български е нужно леко да промените първия ред в head секцията, като добавите в края на адреса „?hl=bg“, така че да стане:
<script src=“https://www.google.com/recaptcha/api.js?hl=bg“ async defer></script>
Презаредете страницата и ще видите капча с надпис „Не съм робот“.
Добре, вече показваме капча в браузъра. Сега остава да направим проверката на сървъра.

2. Проверка на капча за валидност с PHP код на сървъра.

Изтеглете reCAPTCHA библиотеката от тук https://github.com/google/recaptcha и качете на вашия уеб сървър в главната уеб директория папка src.
Това става със зеления бутон горе вдясно [Clone or download] и след това Download ZIP. След като разархивирате е достатъчно да качите по FTP само папка src заедно с цялото и съдържание на уеб сървъра.

Дефинирайте константа с вашия секретен ключ, обикновено в отделен файл с константи inc/const.php

define("GOOGLE_CAPTCHA_KEY", 'your_secret_key');

В този ред заместете your_secret_key с вашия секретен ключ от стъпка 1.
Качете файла const.php на уеб сървъра в папка inc.

Отворете PHP файла, който обработва изпратените от уеб формата данни и добавете:

# зарежда константата със секретния ключ.
require_once('inc/const.php');

# зарежда библиотеката на Google за reCaptcha.
require_once('src/autoload.php');

# създава капча обект
$recaptcha = new \ReCaptcha\ReCaptcha(GOOGLE_CAPTCHA_KEY);

Проверете дали има ред като този, който проверява дали формата е изпратена към сървъра:
if(isset($_POST[])){
и след него добавете проверката на капча:

$gRecaptchaResponse = isset($_POST['g-recaptcha-response']) ? $_POST['g-recaptcha-response'] : ''; # данните за капча в масива POST
$remoteIp = $_SERVER['REMOTE_ADDR']; # IP адрес на потребителя

$recaptchaErrors = ''; # променлива за грешките

$resp = $recaptcha->verify($gRecaptchaResponse, $remoteIp); # проверка на капча
if ($resp->isSuccess()) {
# успешно попълнена капча
# тук продължавате с нормалните дайствия на уеб формата (примерно изпращане на писмо или публикуване на коментар)

} else { # има грешка
$recaptchaErrors = $resp->getErrorCodes(); # записва съобщението за грешка в променлива $recaptchaErrors
if(is_array($recaptchaErrors)){
$recaptchaError = $recaptchaErrors[0];
# обработване на грешките към разбираем за хората текст
if('missing-input-response'==$recaptchaError){
$recaptchaError = 'Моля кликнете с мишката кутийката пред надписа "Не съм робот", за да продължите!';
}else{ # следващите грешки е малко вероятно да се случат
$recaptchaError = 'За съжаление възникна грешка при проверка на полето "Не съм робот". <br />Опитайте да презаредите страницата.';
# другите възможни грешки, може да видите тук: https://developers.google.com/recaptcha/docs/verify
# добра идея е да си изпратите до себе си на имейл следния текст на грешката, заедно с място на възникване ;)
$mail_text = 'FILE'.__FILE__."\nLINE:".__LINE__."\nreCaptcha ERROR: $recaptchaError\n";
}
}
}

Долу в кода на уеб формата покажете съобщението за грешка. Например над реда <form> добавете:

if($recaptchaError){
print "<div class='error'>$recaptchaError</div>";
}

Защо не ползваме новата версия reCAPTCHA v3?

Тя работи на друг принцип и не е подходяща за всички видове страници.
Накратко тази капча е замислена да работи така, че да не бави излишно потребителя. При нея нищо не се показва на екрана, но софтуера изчислява вероятност дали заредената страница е посетена от човек, след което връща десетично число между 0 и 1. Колкото по-близо е до 1, толкова по-вероятно е да е истински човек. За инсталирането на тази капча е нужно доста време, защото софтуерът се настройва според взаимодействията на потребителите с конкретната страница. Може да напишем отделна публикация за невидима капча и за версия 3 на reCaptcha.
Ако имате нужда от допълнителна информация, може да видите официалната документация за програмисти на Google тук: https://developers.google.com/recaptcha/docs/display.

Подобрява ли сигурността на сайта добавянето на reCAPTCHA?

Донякъде. По-скоро е замислена да ви предпазва от спам създаван от ботове. Не може да помогне за спиране на ръчен спам. Но въпреки това, при някои случаи може да окаже влияние на защитата на сайта.
Например логин форма за вход в сайта с парола. Ако нямате капча, може хакер да напише скрипт за огромен брой автоматични опити за логване (bruteforce attack). Имайте предвид, че капчата не е на 100% сигурна в този случай, но все пак ще забави хакера и ще му коства някакви допълнителни ресурси всеки автоматизиран опит за логване.
Също уеб форма за регистриране на потребители, която обикновено записва данните от новите регистрации в база данни. Представете си автоматизиран софтуер, който прави стотици нови регистрации на час. Рано или късно базата данни ще стане огромна и ще свърши мястото на уеб сървъра. Това може силно да затрудни работата на сайта. В случаи като този, добавянето на капча, може да подобри сигурността на сайта. Капча добавя ниво на защита от атака с автоматични опити за вход/регистриране и от автоматизиран спам в сайта.

Инсталиране на капча в WordsPress сайт

Ако ползвате WordPress, може да ползвате някой от многото готови плъгини за reCaptcha. Например този Simple Google reCAPTCHA на адрес https://bg.wordpress.org/plugins/simple-google-recaptcha/
След като го инсталирате и активирате, влезте в настройките на плъгина. Ще видите две полета Site Key и Secret Key, в които трябва а въведете съответните ключове от стъпка 1 и да натиснете бутона [Запазване]. Този плъгин добавя капча само на страниците, в които има уеб форми за вход, регистрация, забравена парола и коментари. Ако ползвате отделен плъгин за контактна форма, например Contact form 7, ще трябва допълнително да направите настройки в самата форма.
Ако имате нужда от помощ с инсталиране на reCaptcha във вашия сайт или на SSL сертификат, може да се свържете с нас от страница Контакти.