Google reCAPTCHA
Добавляем reCAPTCHA API key.
Для начала необходимо добавить reCAPTCHA API key, для этого перейдите по ссылке: https://www.google.com/recaptcha/admin (opens in a new tab), и заполните поля: метка (1), домены (где будет использоваться reCAPTCHA) (2) и жмем на кнопку "Register" (3).
После чего получим данные для добавления reCAPTCHA на сайт:
Добавляем reCAPTCHA в форму
На страницу добавляем js скрипт из поля 3, скрипт можно добавить перед закрывающемся тегом </head> или </body>, далее в форму и добавляем блок с капчей из поля 4 (поля из второго скриншота):
1. <!DOCTYPE html>
2. <html lang="ru">
3.
4. <head>
5. <meta charset="UTF-8">
6. <title>Добавляем reCAPTCHA от Google на сайт</title>
7. </head>
8.
9. <body>
10.
11. <form method="post">
12. <label for="name">Имя:</label>
13. <input name="name" required><br />
14. <label for="email">E-mail:</label>
15. <input name="email" type="email" required><br />
16. <div class="g-recaptcha" data-sitekey="6LeKaREUAAAAALB6Sgjp5XqHq0Kb_aLEn_KORz6u"></div>
17. <input type="submit" value="Отправить" />
18. </form>
19.
20. <script src='https://www.google.com/recaptcha/api.js'></script>
21. </body>
22.
23. </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 (opens in a new tab).
Затем положим его в удобное место (я положу в корень) и подключаем перед верификацией капчи:
1. <?php
2. require_once "recaptchalib.php";
// Класс ReCaptchaResponse отправит содержимое g-recaptcha-response и секретный ключ в Google, затем получит ответ и проверит, был ли он успешен:
1. <?php
2. require_once "recaptchalib.php";
3.
4. //секретный ключ
5. $secret = "6LeKaREUAAAAAGgPekvD1djRejSXufWqghauFg7-";
6. //ответ
7. $response = null;
8. //проверка секретного ключа
9. $reCaptcha = new ReCaptcha($secret);
10.
11. if (!empty($_POST)) {
12.
13. if ($_POST["g-recaptcha-response"]) {
14. $response = $reCaptcha->verifyResponse(
15. $_SERVER["REMOTE_ADDR"],
16. $_POST["g-recaptcha-response"]
17. );
18. }
19.
20. if ($response != null && $response->success) {
21. echo "Все хорошо.";
22. } else {
23. echo "Вы точно человек?";
24. }
25.
26. }Итог
Теперь соберем все вместе:
1. <?php
2. require_once "recaptchalib.php";
3.
4. ?>
5. <!DOCTYPE html>
6. <html lang="ru">
7. <head>
8. <meta charset="UTF-8">
9. <title>Добавляем reCAPTCHA от Google на сайт</title>
10. </head>
11. <body>
12. <?php
13. //секретный ключ
14. $secret = "6LeKaREUAAAAAGgPekvD1djRejSXufWqghauFg7-";
15. //ответ
16. $response = null;
17. //проверка секретного ключа
18. $reCaptcha = new ReCaptcha($secret);
19.
20. if (!empty($_POST)) {
21.
22. //Валидация $_POST['name'] и $_POST['email']
23. if ($_POST["g-recaptcha-response"]) {
24. $response = $reCaptcha->verifyResponse(
25. $_SERVER["REMOTE_ADDR"],
26. $_POST["g-recaptcha-response"]
27. );
28. }
29.
30. if ($response != null && $response->success) {
31. echo "Все хорошо.";
32. } else {
33. echo "Вы точно человек?";
34. }
35.
36. }
37. ?>
38.
39. <form method="post">
40. <label for="name">Имя:</label>
41. <input name="name" required><br />
42. <label for="email">E-mail:</label>
43. <input name="email" type="email" required><br />
44. <div class="g-recaptcha" data-sitekey="6LeKaREUAAAAALB6Sgjp5XqHq0Kb_aLEn_KORz6u"></div>
45. <input type="submit" value="Отправить" />
46. </form>
47.
48. <script src='https://www.google.com/recaptcha/api.js'></script>
49.
50. </body>
51. </html>Внешний вид:
Тема
Сменить цвет reCAPTCHA можно с помощью атрибута data-theme, который может принимать значение dark и light (по умолчанию):
1. <div class="g-recaptcha" data-sitekey="6LeKaREUAAAAALB6Sgjp5XqHq0Kb_aLEn_KORz6u" data-theme="dark"></div>1. <div class="g-recaptcha" data-sitekey="6LeKaREUAAAAALB6Sgjp5XqHq0Kb_aLEn_KORz6u" data-theme="light"></div>Язык
По умолчанию язык в reCAPTCHA определяется по языку браузера, но можно указать язык явно, например, украинский:
1. <script src='https://www.google.com/recaptcha/api.js?hl=uk'></script>задать русский язык
1. <script src='https://www.google.com/recaptcha/api.js?hl=ru'></script>Дополнительные настройки: https://developers.google.com/recaptcha/docs/display#config (opens in a new tab)