Як під'єднати Google reCAPTCHA до сайту

Вітаю. Щось я замотався трошки, тому ось якось перша стаття за тиждень(в неділю ввечері). Сьогодні хочу показати, як під'єднати до вашої форми Google reCAPTCHA. Як завжди: я показую сам принцип, що куди вставляти та перевіряти, а ви вже далі самі зможете прикрутити капчу де вам там треба буде.

як під'єднати капчу від google

Нумо починати!

1. Заповнюємо форму і все таке інше...

Заходимо на сайт www.google.com/recaptcha/admin, та вводимо назву та адресу нашого сайту, на якому будемо прикручувати капчу.

як під'єднати капчу від google

Нас перекидає на сторінку, де ми в першу чергу бачимо два ключі: публічний, який розмістимо в коді сторінки, та секретний, який відсилатимемо серверу Google для перевірки правильності введення капчі користувачем.

як під'єднати капчу від google

По-друге, бачимо два блоки коду, які маємо вставити на сторінку. Скрипт між ≶head>≶/head> капчу(де ми натискаємо, а потім вибираємо потрібні картинки):

як під'єднати капчу від google

А також три параметри. В них ми й будемо відправляти дані на перевірку до гуглівського серверу.

як під'єднати капчу від google

2. Щось не зрозуміло

Щоб краще зрозуміти це все, я написав невеличку формочку:

<form action="validate.php" method="post">
  <input type="text" name="login">
  <input type="password" name="pass">
  <div class="g-recaptcha" data-sitekey="6LfbdigUAAAAADeyVSEnt5DVwZkIwZKuNI55cUJh"></div>
  <input type="submit" name="send">
</form>

Все стандартно: відправляємо дані на обробку. Тепер гляньмо на validate.php:

if ( $_POST['send'] ) {

 # якщо відправлене поле з ім'ям send,
 # тобто була відправлена форма

  if ( $_POST['g-recaptcha-response'] ) {

    # якщо капча була пройдена

    # адреса, на яку відправляємо дані для перевірки
    $url = 'https://www.google.com/recaptcha/api/siteverify';
    # секретний ключ, щоб сервер знав, що ми власник сайту
    $secret_key = '6LfbdigUAAAAAGU-CXm18c6slWBko1Up-0Ri2Q-5';
    # формуємо запит з get-параметрами
    $query = $url . '?secret=' . $secret_key . '&response=' . $_POST['g-recaptcha-response'] . '&remoteip=' . $_SERVER['REMOTE_ADDR'];

    # відправляємо запит
    $curl = curl_init(); 
    curl_setopt($curl, CURLOPT_URL, query); 
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE); 
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE); 
    $send = curl_exec($curl); 
    curl_close($curl);

    # альтеранативний варіант відправки:
    # $send = file_get_contents($query);

    # декодуємо відповідь
    $result = json_decode($send);

    if ( $result->success == true ) {

      # якщо атрибут success дорівнює true
      # тут виконуємо подальші дії

    } else {

      # якщо false, значить користувач помилився при введенні капчи
      exit('Ви неправильно ввели капчу!');

    }

  } else {

    # якщо користувач не пройшов капчу, а просто натиснув на кнопочку
    exit('Ви не заповнили капчу!');

  }

}

Якщо спробувати прочитати по рядку, не все так і складно як здається на перший погляд. Спочатку ми перевіряємо чи користувач відправив форму, тобто чи існує у масиві $_POST елемент з ім'ям send. Перевіряємо чи існує елемент g-recaptcha-response, тобто сама капча(це вже відправляє той скрипт від Google, який ми підключали раніше).

Далі формуємо запит, виду (адреса перевірки)?secret=(наш секретний ключ)&response=(те що користувач ввів у капчі, теж той скрипт кидає)&remoteip=(ip-адреса користувача). Пам'ятаєте ці параметри на тій сторінці на початку статті?

Масив $_SERVER містить різну корисну інформацію про сервер. $_SERVER['REMOTE_ADDR'] зокрема повертає ip-адресу відвідувача.

Відправляємо сам запит. Я це зробив за допомогою cURL. Також можна обійтися file_get_contents() - це вже як кому зручніше. Планую написати про це у майбутньому пост.

Сервер Google повертає дані у форматі json, тому ми їх спочатку декодуємо. Зараз у змінній $result міститься об'єкт з атрибутами challenge_ts(час відправлення капчи), hostname(адреса нашого сайту) й success, те що нам і потрібно. Він містить булеве значення(true або false), чи пройшов користувач капчу чи ні. Тому ми й перевіряємо чому дорівнює success, та в залежності від відповіді, або виконуємо далі код, заносимо в БД дані тощо, або повертаємо помилку на сторінку.

Ось такий от приклад. До побачення! :)