К примеру у нас есть простая страница с формой:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Добавляем reCAPTCHA от Google на сайт</title>
</head>

<body>

    <form method="post">
        <label for="name">Имя:</label>
        <input name="name" required><br />

        <label for="email">E-mail:</label>
        <input name="email" type="email" required><br />

        <input type="submit" value="Отправить" />
    </form>

</body>
</html>

Как работает reCAPTCHA?

Пример работы reCAPTCHA

Пользователь жмет на кнопку "Я не робот", если анализ Google уверен, что вы человек, то все хорошо, иначе появится вторая проверка, например ввод слова или выбор нескольких картинок одной тематики из массива изображений, пример:

Пример дополнительной проверки reCAPTCHA

или

Так же на этот вопрос есть отличный ответ в виде видео от Google:

Удобно? Тогда приступим к интеграции на сайт.

Добавляем reCAPTCHA на сайт

Добавляем reCAPTCHA API key

Для начала необходимо добавить reCAPTCHA API key, для этого перейдите по ссылке: https://www.google.com/recaptcha/admin, и заполните поля: метка (1), домены (где будет использоваться reCAPTCHA) (2) и жмем на кнопку "Register" (3).

Форма добавления reCAPTCHA API key

После чего получим данные для добавления reCAPTCHA на сайт:

Пример данных reCAPTCHA API key

Добавляем reCAPTCHA в форму

На страницу добавляем js скрипт из поля 3, скрипт можно добавить перед закрывающемся тегом </head> или </body>, далее в форму и добавляем блок с капчей из поля 4 (поля из второго скриншота):

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <title>Добавляем reCAPTCHA от Google на сайт</title>
</head>

<body>

    <form method="post">
        <label for="name">Имя:</label>
        <input name="name" required><br />
        <label for="email">E-mail:</label>
        <input name="email" type="email" required><br />
        <div class="g-recaptcha" data-sitekey="6LeKaREUAAAAALB6Sgjp5XqHq0Kb_aLEn_KORz6u"></div>
        <input type="submit" value="Отправить" />
    </form>

    <script src='https://www.google.com/recaptcha/api.js'></script>    
</body>

</html>

Где data-sitekey - значение из поля 1 (второй скриншот).

Верификация reCAPTCHA

После того как добавили блок reCAPTCHA в форму нам будет приходить постом 3 значения: name, email и g-recaptcha-response. Перед обработкой полученных данных необходимо валидировать name и email, а также отправить значение g-recaptcha-response Google для проверки.

Пропустим валидацию name и email и перейдем к g-recaptcha-response. Разработчики Google ReCAPTCHA уже сделали всю работу за нас по верификации капчи, поэтому переходим к проекту ReCAPTCHA на Github и скопируем файл recaptchalib.php: https://github.com/google/recaptcha/blob/1.0.0/php/recaptchalib.php.

Затем положим его в удобное место (я положу в корень) и подключаем перед верификацией капчи:

<?php
require_once "recaptchalib.php";

Класс ReCaptchaResponse отправит содержимое g-recaptcha-response и секретный ключ в Google, затем получит ответ и проверит, был ли он успешен:

<?php
require_once "recaptchalib.php";

//секретный ключ
$secret = "6LeKaREUAAAAAGgPekvD1djRejSXufWqghauFg7-";
//ответ
$response = null;
//проверка секретного ключа
$reCaptcha = new ReCaptcha($secret);

if (!empty($_POST)) {

    if ($_POST["g-recaptcha-response"]) {
        $response = $reCaptcha->verifyResponse(
            $_SERVER["REMOTE_ADDR"],
            $_POST["g-recaptcha-response"]
        );
    }

    if ($response != null && $response->success) {
        echo "Все хорошо.";
    } else {
        echo "Вы точно человек?";
    }

}

Итог

Теперь соберем все вместе:

<?php
require_once "recaptchalib.php";

?>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Добавляем reCAPTCHA от Google на сайт</title>
</head>
<body>
<?php
//секретный ключ
$secret = "6LeKaREUAAAAAGgPekvD1djRejSXufWqghauFg7-";
//ответ
$response = null;
//проверка секретного ключа
$reCaptcha = new ReCaptcha($secret);

if (!empty($_POST)) {

    //Валидация $_POST['name'] и $_POST['email']
    if ($_POST["g-recaptcha-response"]) {
        $response = $reCaptcha->verifyResponse(
            $_SERVER["REMOTE_ADDR"],
            $_POST["g-recaptcha-response"]
        );
    }

    if ($response != null && $response->success) {
        echo "Все хорошо.";
    } else {
        echo "Вы точно человек?";
    }

}
?>

<form method="post">
    <label for="name">Имя:</label>
    <input name="name" required><br />
    <label for="email">E-mail:</label>
    <input name="email" type="email" required><br />
    <div class="g-recaptcha" data-sitekey="6LeKaREUAAAAALB6Sgjp5XqHq0Kb_aLEn_KORz6u"></div>
    <input type="submit" value="Отправить" />
</form>

<script src='https://www.google.com/recaptcha/api.js'></script>

</body>
</html>

Внешний вид:

Дополнительно

Тема

Сменить цвет reCAPTCHA можно с помощью атрибута data-theme, который может принимать значение dark и light (по умолчанию):

<div class="g-recaptcha" data-sitekey="6LeKaREUAAAAALB6Sgjp5XqHq0Kb_aLEn_KORz6u" data-theme="dark"></div>

<div class="g-recaptcha" data-sitekey="6LeKaREUAAAAALB6Sgjp5XqHq0Kb_aLEn_KORz6u" data-theme="light"></div>

Язык

По умолчанию язык в reCAPTCHA определяется по языку браузера, но можно указать язык явно, например, украинский:

<script src='https://www.google.com/recaptcha/api.js?hl=uk'></script>

задать русский язык

<script src='https://www.google.com/recaptcha/api.js?hl=ru'></script>

Дополнительные настройки: https://developers.google.com/recaptcha/docs/display#config