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

5 последних уроков рубрики «PHP»

Когда речь идёт о безопасности веб-сайта, то фраза «фильтруйте всё, экранируйте всё» всегда будет актуальна. Сегодня поговорим о фильтрации данных.

Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак

В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение

В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

Подборка PHP песочниц
Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.

Help for reCAPTCHA users

1. • desktop (Windows, Linux, Mac)
     • Chrome
     • Firefox
     • Safari
     • IE / Edge
   • mobile
     • Chrome
     • Safari
     • Android native browser

2. reCAPTCHA isn’t displaying properly on Internet Explorer, what do I do?

   reCAPTCHA cannot display correctly if the IE Compatibility View is enabled for google.com. We suggest that you remove google.com from your list of sites that have Compatibility View enabled.

   Turn off Compatibility view

   • IE 10
     1. In Internet Explorer, press the Alt key to display the Menu bar, or press and hold the address bar and select Menu bar.
     2. Click Tools and select Compatibility View settings.
     3. Select google.com under «Websites you’ve added to Compatibility View.»
     4. Click Remove.
   • IE 9
     1. In Internet Explorer, press the Alt key to display the Menu bar, or press and hold the address bar and select Menu bar.
     2. Click Tools and select Compatibility View settings.
     3. Select google.com under «Websites you’ve added to Compatibility View.»
     4. Click Remove.
   • IE 8
     1. In Internet Explorer, open the Tools menu at the top and select Compatibility View Settings.
     2. Select google.com under «Websites you’ve added to Compatibility View.»
     3. Click Remove.

   If you don’t see google.com listed, or if you still see a warning about Compatibility View after following the steps above, make sure that your computer has the latest Windows updates. See Microsoft’s instructions for getting Window’s updates.

3. Not seeing the checkbox and want an easier challenge?

   If you’re seeing this reCAPTCHA challenge, your browser environment doesn’t support the reCAPTCHA checkbox widget.

   There are a few steps you can take to improve your experience:

   • Make sure your browser is fully updated (see )
   • Check that JavaScript is enabled in your browser
   • Try disabling plugins that might conflict with reCAPTCHA

   Please note that some sites may have incorrectly integrated with reCAPTCHA — in this case please contact the site’s webmaster.

Внедрение

Внедрение reCAPTCHA состоит из двух шагов:

1. Внедрение reCAPTCHA на клиентской стороне, то есть в HTML коде
2. Внедрение reCAPTCHA на серверной стороне

При регистрации сайта будет сгенерировано два ключа:

1. Site key — Ключ, который будет помещаться на HTML странице
2. Secret key — Ключ, который бует использоваться для коммуникации сайта и сервисом Google reCAPTCHA

Процесс внедрения будет следующий. На HTML странице в форме, которая требует валидации действий пользователя, помещаем script reCAPTCHA, и ключ сайта.

На стороне сервера внедряем декотор для view функции или класса view, если Вы используете Class Based View в сайте на Django. Я использую Class Based View.

При заполнении формы и отправки её данных на сервер, необходимо выдернуть из запроса информацию об ответе о валидации каптчи, а потом отправить запрос на сервер Google для верификации сайта и получения окончательного результата валидации. Ответ с первоначальным результатом валидации каптчи будет содержаться в поле

g-recaptcha-response.

Именно этот ответ и отправляется с секретным ключом на сервера Google для верификации сайта и получения окончательного результата верификации пользователя.

Для создания запроса воспользуемся библиотекой

requests

.

pip install requests

Декоратор

Secret Key помещаем в настройки вашего сайта, самый простой вариант — это добавить его в

settings.py

, хотя и не самый безопасный.

GOOGLE_RECAPTCHA_SECRET_KEY = '6LdqzjEUAAAAAKTDYsfuwZce-oa214GC8QeChVBF'

Далее создаем файл

decorators.py

, в котором будет содержаться декоратор reCAPTCHA. Помещаем этот файл рядом с файлам

views.py

,

models.py

и т.д.

from django.conf import settings
from django.contrib import messages

import requests


def check_recaptcha(function):
    def wrap(request, *args, **kwargs):
        request.recaptcha_is_valid = None
        if request.method == 'POST':
            recaptcha_response = request.POST.get('g-recaptcha-response')
            data = {
                'secret': settings.GOOGLE_RECAPTCHA_SECRET_KEY,
                'response': recaptcha_response
            }
            r = requests.post('https://www.google.com/recaptcha/api/siteverify', data=data)
            result = r.json()
            if result:
                request.recaptcha_is_valid = True
            else:
                request.recaptcha_is_valid = False
                messages.error(request, 'Invalid reCAPTCHA. Please try again.')
        return function(request, *args, **kwargs)

    wrap.__doc__ = function.__doc__
    wrap.__name__ = function.__name__
    return wrap

Далле оборачиваем декоратором необходимую вьюшку:

# -*- coding: utf-8 -*-

from django.conf.urls import url

from . import views
from .decorators import check_recaptcha

app_name = 'registration'
urlpatterns = [
    url(r'^register/$', check_recaptcha(views.RegisterView.as_view()), name='register'),
]

А в самой вьюшке делаем проверку на валидность reCAPTCHA. В моём случае эта была вьюшка, наследованная от FormView класса.

class RegisterView(FormView):
    form_class = UserCreationForm
    template_name = 'register.html'

    def form_valid(self, form):
        # проверка валидности reCAPTCHA
        if self.request.recaptcha_is_valid:
            form.save()
            return render(self.request, 'register_success.html', self.get_context_data())
        return render(self.request, 'register.html', self.get_context_data())

Клиентская сторона

На клиентской стороне необходимо добавить код подключения скрипта, место расположения каптчи, а также вывод сообщений об ошибках.

{% extends 'base.html' %}
{% block content %}
    <form action="{% url 'register' %}" method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <script src='https://www.google.com/recaptcha/api.js'></script>
        <div class="form-group g-recaptcha" data-sitekey="6LdqzjEUAAAAABRAtK1a3QhIWbn46X_gdcXvhnbG"></div>
        {% if messages %}
            {% for message in messages %}
                {{ message }}
            {% endfor %}
        {% endif %}
        <input type="submit" value="Зарегистрироваться">
    </form>
{% endblock %}

Help for reCAPTCHA users

1. • desktop (Windows, Linux, Mac)
     • Chrome
     • Firefox
     • Safari
     • IE / Edge
   • mobile
     • Chrome
     • Safari
     • Android native browser

2. reCAPTCHA isn’t displaying properly on Internet Explorer, what do I do?

   reCAPTCHA cannot display correctly if the IE Compatibility View is enabled for google.com. We suggest that you remove google.com from your list of sites that have Compatibility View enabled.

   Turn off Compatibility view

   • IE 10
     1. In Internet Explorer, press the Alt key to display the Menu bar, or press and hold the address bar and select Menu bar.
     2. Click Tools and select Compatibility View settings.
     3. Select google.com under «Websites you’ve added to Compatibility View.»
     4. Click Remove.
   • IE 9
     1. In Internet Explorer, press the Alt key to display the Menu bar, or press and hold the address bar and select Menu bar.
     2. Click Tools and select Compatibility View settings.
     3. Select google.com under «Websites you’ve added to Compatibility View.»
     4. Click Remove.
   • IE 8
     1. In Internet Explorer, open the Tools menu at the top and select Compatibility View Settings.
     2. Select google.com under «Websites you’ve added to Compatibility View.»
     3. Click Remove.

   If you don’t see google.com listed, or if you still see a warning about Compatibility View after following the steps above, make sure that your computer has the latest Windows updates. See Microsoft’s instructions for getting Window’s updates.

3. Not seeing the checkbox and want an easier challenge?

   If you’re seeing this reCAPTCHA challenge, your browser environment doesn’t support the reCAPTCHA checkbox widget.

   There are a few steps you can take to improve your experience:

   • Make sure your browser is fully updated (see )
   • Check that JavaScript is enabled in your browser
   • Try disabling plugins that might conflict with reCAPTCHA

   Please note that some sites may have incorrectly integrated with reCAPTCHA — in this case please contact the site’s webmaster.

Получить No CAPTCHA reCAPTCHA

Приступим уже к главному и установим No CAPTCHA.

Шаг 1

Во-первых, нам нужен API key, так что заходим сюда https://www.google.com/recaptcha/admin. Чтобы получить доступ к этой странице, вы должны быть зарегистрированы в Google. Вам будет предложено зарегистрировать свой сайт, так что дайте ему подходящее имя, затем список доменов (например tutsplus.com), где будет использоваться именно эта reCAPTCHA. Поддомены (например webdesign.tutsplus.com и code.tutsplus.com) автоматичекси учитываются.

Шаг 3

Под ключами вы увидите несколько фрагментов для включения reCAPTCHA на вашем сайте. Сначала вы увидите JavaScript:

Вы можете также определить какой из 40 поддерживаемых языков вы будете использовать, добавив параметр к строке. Мы добавим , это даст нам reCAPTCHA на испанском:

Поместите этот скрипт внизу вашей страницы (или под формой, где появится reCAPTCHA, в зависимости от того, как вы распределите загрузку данных).

Шаг 4

Далее идет текстовый заполнитель, который вы должны добавить в разметку вашей формы там, где хотите, чтобы появилясь reCAPTCHA:

Заметка: атрибут будет держать значение вашего ключа, а не этот пример.

Есть другие атрибуты, которые вы можете добавить в настройки внешнего вида и функциональности вашей reCAPTCHA на данный момент. Например, добавление  этому  даст вам темную версию, которая больше подойдет вашему интерфейсу пользователя (UI):

Для более подробной информации о настройке reCAPTCHA перейдите сюда .

Что такое reCAPTCHA

reCAPTCHA была создана на основе похожей системы под названием CAPTCHA, что расшифровывается как Completely Automated Public Turing test to tell Computers and Humans Apart — «полностью автоматизированный публичный тест Тьюринга для различения компьютеров и людей». CAPTCHA предлагает пользователю распознать текст, в деформированном виде представленный на картинке.

CAPTCHA начала применяться в 1997 г. одновременно двумя командами разработчиков — в поисковом движке AltaVista, чтобы воспрепятствовать добавлению URL-адресов ботами, и в фаерволе компании Sanctum. В 2007 г. сотрудниками Университета Карнеги — Меллона была создана reCAPTCHA, также ориентированная на распознавание различных объектов на изображениях, и приобретенная Google в сентябре 2009 г.

Google запустила тестирование новой версии reCAPTCHA

reCAPTCHA используется не только для различения пользователей-людей и ботов, но и для оцифровки книг, текст которых слишком неразборчив для распознавания компьютером. Изначально reCAPTCHA, как и ее предшественница, просила пользователя распознать деформированный текст. В 2012 г. она начала использовать и другие изображения — фотографии номерных табличек на зданиях из проекта Google Street View. В 2014 г. система стала предлагать пользователю выбрать из набора несколько изображений, на которых изображены однотипные объекты.

В 2013 г. reCAPTCHA начала использовать элементы анализа поведения пользователя, чтобы предсказать, является он человеком или ботом, еще до процедуры распознавания изображений. Проект получил название NoCAPTCHA. Если результаты анализа показывали высокую вероятность, что пользователь является ботом, ему предлагались более сложные картинки для распознавания.

PHP Plugin Reference Guide

Below is a comprehensive list of all the methods of the reCAPTCHA PHP Plugin.

The recaptcha_get_html function

The function displays the HTML that presents reCAPTCHA to
the
user.

recaptcha_get_html
Parameter
$pubkey — string. required.	Your reCAPTCHA public key, from the
$error — string. optional (null is the default)	If this string is set, the reCAPTCHA area will display the error code given. This error code comes from ReCaptchaResponse->$error
$use_ssl — boolean. optional (false is default)	Should the SSL-based API be used? If you are displaying a page to the user over SSL, be sure to set this to true so an error dialog doesn’t come up in the user’s browser.
Return value	A string containing HTML to put on the web page.

The recaptcha_check_answer function

After the user has filled out the HTML form, including their answer for the CAPTCHA, we
want to check their answer when they submit the form using the
function. The user’s answer will be in two form fields,
and . The
reCAPTCHA library will make an HTTP request to the reCAPTCHA server and verify the user’s
answer.

recaptcha_check_answer
Parameter
$privkey — string. required.	Your reCAPTCHA private key, from the .
$remoteip — string. required.	The user’s IP address, in the format 192.168.0.1
$challenge — string. required.	The value of the form field recaptcha_challenge_field
$response — string. required	The value of the form field recaptcha_response_field
Return value	An instance of the ReCaptchaResponse class

ReCaptchaResponse
Field
$is_valid — boolean	Did reCAPTCHA believe the answer was valid?
$error — string	If the answer was invalid what was the problem? This error code can be used in recaptcha_get_html
Return value	The HTML or raw url to decode the email address, depending on which you function you called.

Mailhide

recaptcha_mailhide_url / recaptcha_mailhide_html
Parameter
$pubkey — string	The Mailhide public key from the signup page
$privkey — string	The Mailhide private key from the signup page
$email — string	The email address you want to hide.

<html><body>
<?
require_once ("recaptchalib.php");
// get a key at http://www.google.com/recaptcha/mailhide/apikey
$mailhide_pubkey = '';
$mailhide_privkey = '';
?>
The Mailhide encoding of example@example.com is
<?
echo recaptcha_mailhide_html ($mailhide_pubkey,
                              $mailhide_privkey,
                              "example@example.com");
?>.
<br>
The url for the email is:
<?
echo recaptcha_mailhide_url ($mailhide_pubkey,
                             $mailhide_privkey,
                             "example@example.com");
?>
<br>
</body></html>

Custom Theming

Custom theming allows you to control exactly how the reCAPTCHA image appears. (Here is a demo of custom theming.) In order to use
custom theming, you must first set the theme property of the to ‘custom’. This
tells reCAPTCHA that it should not create a user interface of its own. reCAPTCHA will rely on the presence of
HTML elements with the following IDs to display the CAPTCHA to the user:

• An empty div with ID . This is where the
  actual image will be placed. The div will be 300×57 pixels.
• A text input with ID and name both set
  to . This is where the user can
  enter their answer.
• Optionally, a div which contains the entire reCAPTCHA
  widget. This ID div should be placed into
  the and the style of the div should
  be set to . After the reCAPTCHA theming code
  has fully loaded, it will make the div visible. This element avoids
  making the page flicker while it loads.

To implement all of this this, first place the following code in your main HTML page anywhere before the <form>
element where reCAPTCHA appears:

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
 };
 

Then, inside the <form> element where you want reCAPTCHA to appear, place:

 <div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

 </div>

 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k="
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
        value="manual_challenge">
 </noscript>

Notice that the last few lines are simply the standard way to display reCAPTCHA explained in the introduction
of this guide.

Here’s what’s going on in the code above. The Recaptcha JavaScript object provides methods which allow you to
change the state of the CAPTCHA. The method reload displays a new CAPTCHA challenge, and the method
switch_type toggles between image and audio CAPTCHAs. In order to create a full UI for reCAPTCHA, we
display different information when the CAPTCHA is in different states. For instance, when the user is viewing an
image CAPTCHA, a link to «Get an audio CAPTCHA» is shown. Four CSS classes are available for you to create a
stateful UI:

CSS Class	Visible when…
recaptcha_only_if_image	an image CAPTCHA is being displayed
recaptcha_only_if_audio	an audio CAPTCHA is being displayed
recaptcha_only_if_incorrect_sol	the previous solution was incorrect
recaptcha_only_if_no_incorrect_sol	the previous solution was not incorrect

While theming does give you many options, you need to follow some user interface consistency rules:

• You must state that you are using reCAPTCHA near the CAPTCHA widget.
• You must provide a visible button that calls the reload function.
• You must provide a way for visually impaired users to access an audio CAPTCHA.
• You must provide alt text for any images that you use as buttons in the reCAPTCHA widget.

JavaScript API

Method	Description
grecaptcha.render( container, parameters )	Renders the container as a reCAPTCHA widget and returns the ID of the newly created widget.container   The HTML element to render the reCAPTCHA widget.  Specify either the ID of the container (string) or the DOM element itself.parameters   An object containing parameters as key=value pairs, for example, {«sitekey»: «your_site_key», «theme»: «light»}. .
grecaptcha.reset(opt_widget_id )	Resets the reCAPTCHA widget.opt_widget_id   Optional widget ID, defaults to the first widget created if unspecified.
grecaptcha.getResponse(opt_widget_id )	Gets the response for the reCAPTCHA widget.opt_widget_id   Optional widget ID, defaults to the first widget created if unspecified.

Получение API ключей:

Первым делом нужно получить ключ, для этого заходим на сайт Google reCAPTCHA, и там сверху нажимаем на кнопку «Admin console».

У вас должно открыться в окне с настройками капчи, настраиваем всё как из скриншота.

Как видите, я назвал капчу «Тест», и выбрал reCAPTCHA v2, то есть капча версии два, также выбрал там под пункт флажок «я не робот», это значит на сайте у меня будет отображаться специальный флажок, который при нажатие будет проверять все данные браузера, например, cookie, и если всё в порядке, то я не робот.

Дальше в строчке домен, вводите доменное имя своего сайта, со всем соглашаетесь и нажимаете кнопку «отправить», у вас должно появится на экране два ключа.

Если у вас всё примерно так, то значит создание ключа прошло успешно, верхний ключ используйте на клиенте, а нижний на сервере.

Какие последствия блокировки доступа ботам к сайту

Хотя описанная ниже техника блокировки доступа к сайту всех ботов эффективно помогает предотвратить парсинг сайтов при полной незаметности нормальным пользователям, полная блокировка ботов имеет очень важные последствия. Поэтому рассмотрим что нужно помнить при блокировке доступа ботов к сайту.

Во-первых, описанная техника заблокирует не только плохих ботов, но и хороших — таких как поисковых обходчиков от и Yandex. Это приведёт к тому, что если не будут предприняты дополнительные меры (например, разрешение доступа к сайту с IP принадлежащим Google и Yandex в обход капчи), то в конце концов сайт выпадет из индекса поисковых систем.

Во-вторых, некоторыми партнёрскими программами запрещено показывать рекламу на страницах, для которых закрыт доступ ботов (таких ботов как Mediapartners-Google и AdsBot-Google* для Google AdSense и YandexDirect для Рекламной Сети Яндекса). Если на защищаемом сайте показывается реклама, то нужно обеспечить доступ к страницам в обход капчи — поскольку эти роботы сами по себе не способны пройти тест «на человека».

При этом проверка качества ботов для доступа в обход капчи ни в коем случае не должна основываться только на User Agent клиента, поскольку его можно легко подменить.

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

• блокировка к просмотру сайта
• и более мягкий вариант — блокировка отправки форм

Вы сможете выбрать наиболее подходящий для вас. Либо сочетать оба приёма: полную блокировку доступа настроить, например, для страниц авторизации, и обычную блокировку — на страницах обратной связи, формах комментирования и т.д.

Проверка логина

В данном коде мы проверяем имя пользователя и пароль в нашей базе данных.

$username=mysqli_real_escape_string($db,$_POST);
$password=md5(mysqli_real_escape_string($db,$_POST));

if(!empty($username) && !empty($password))
{
    $result=mysqli_query($db,"SELECT id FROM users WHERE username='$username' and passcode='$password'");
    $row=mysqli_fetch_array($result,MYSQLI_ASSOC);
    if(mysqli_num_rows($result)==1)
    {
        $_SESSION=$username;
        header("location: home.php"); //перенаправляем на страницу успеха
    }
    else
    {
        $msg="Please give valid Username or Password.";
    }

}
else
{
    $msg="Please give valid Username or Password.";
}

About reCAPTCHA

1. What is reCAPTCHA?

   reCAPTCHA is a free service from Google that helps protect websites from spam and abuse. A “CAPTCHA” is a turing test to tell human and bots apart. It is easy for humans to solve, but hard for “bots” and other malicious software to figure out. By adding reCAPTCHA to a site, you can block automated software while helping your welcome users to enter with ease. Try it out at https://www.google.com/recaptcha/api2/demo.

   To learn more about reCAPTCHA, visit our official websiteor our technical documentation site.

2. How can I distinguish between different versions of reCAPTCHA?

   There currently exist two versions of reCAPTCHA, V1 and V2.

3. Helping everyone, everywhere, one CAPTCHA at a time

   CAPTCHAs play an important role in keeping the internet spam-free and making everyone’s experience a little bit better.

   reCAPTCHA also makes positive use of the human effort spent in solving CAPTCHAs by using the solutions to digitize text, annotate images, and build machine-learning datasets. This in turn helps preserve books, improve maps, and solve hard AI problems.

PHP:

Теперь пришло время сделать работу на стороне сервера, это очень просто, так как, результат проверки капчи, будет отправляться вместе с данными из формы, когда будем отправлять данные формы.

PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

// Проверка того, что есть данные из капчи if(!$_POST»g-recaptcha-response»){ // Если данных нет, то программа останавливается и выводит ошибку exit(«Произошла ошибка»); }else{// Иначе создаём запрос для проверки капчи // URL куда отправлять запрос для проверки $url=»https://www.google.com/recaptcha/api/siteverify»; // Ключ для сервера $key=»Тут ключ для сервера»; // Данные для запроса $query=array( «secret»=>$key,// Ключ для сервера «response»=>$_POST»g-recaptcha-response»,// Данные от капчи «remoteip»=>$_SERVER’REMOTE_ADDR’// Адрес сервера ); // Создаём запрос для отправки $ch=curl_init(); // Настраиваем запрос curl_setopt($ch,CURLOPT_URL,$url); curl_setopt($ch,CURLOPT_RETURNTRANSFER,true); curl_setopt($ch,CURLOPT_POST,true); curl_setopt($ch,CURLOPT_POSTFIELDS,$query); // отправляет и возвращает данные $data=json_decode(curl_exec($ch),$assoc=true); // Закрытие соединения curl_close($ch); // Если нет success то if(!$data’success’){ // Останавливает программу и выводит «ВЫ РОБОТ» exit(«ВЫ РОБОТ»); }else{ // Иначе выводим логин и Email echo$_POST’login’.»<br/>». $_POST’email’; } }

Конечно, я написал комментарии, но всё же надо разобрать код, тем более, он тут не такой уж сложный и большой.

Сначала мы проверяем, существует ли переменная в массиве , которая хранит в себе ключ то Google, если вы оказались не робот, если её нет, то программа выводит на экран «Произошла ошибка» и перестают работать.

Иначе он создаёт запрос для полной проверки на робота, но перед этим мы объявляем две переменные, первая, это переменная с URL, куда отправлять проверку, вторая, хранит ключ, который используется для обмена данными между сайтом и сервисом reCAPTCHA, также создаётся массив для отправки данных на сервер.

Теперь наконец делаем запрос на сервер для полной проверки, я не буду тут объяснять какая команда для чего нужна, лучше посмотрите по этой ссылке.

Можете заметить, что когда мы возвращаем данные, используем функцию , она нужна потому что, сервер возвращает JSON данные, а PHP не умеет читать такой тип данных, первым параметром он принимает JSON, а второй, в нашем случае это , значение нужен, что бы он превращал не в объект, а в массив.

Как видите всё работает.

Использование Puppeteer

Необязательно устанавливать хром, если не хочется, в Puppeteer есть все необходимое, в том числе Chromium. Но можете использовать и локально установленный Chrome, решать вам.

Убедитесь, что все настроено, устроив предварительный тест. Для этого упражнения мы будем автоматизировать страницу регистрации Reddit, просто потому что это была первая страница с рекапчей, которая мне попалась.

В этом коде мы указываем два свойства конфигурации при запуске: headless: false, чтобы видеть то, что мы делаем, и defaultViewport: null, чтобы учесть неприятный визуальный глитч, при котором область просмотра не заполняет окно

Ни тот, ни другой не важны для работы браузера в headless-режиме, просто с ними удобней видеть и, что самое важное, делать скриншоты. Например, такой:

Это было просто! Теперь мы готовы перейти к следующему шагу – автоматизировать регистрацию так, будто капчи никогда и не было. Вот где возможность включать/ выключать headless-режим будет полезна, ведь мы можем управлять браузером от лица человека, когда нужно. Сначала следует понять, как получить доступ к элементам на странице, которые нужно поменять. Запустите браузер и просмотрите открытую страницу через инструменты разработчика Google Chrome (горячая клавиша – F12). Далее, найдите текстовые поля, которые нужно будет изменить. (горячие клавиши: ⌘+Shift+C на Mac и Ctrl+Shift+C на Windows) В случае с Reddit, нам нужно получить прямой доступ к полю ввода логина, двум полям ввода пароля и кнопке. Электронная почта необязательна, так что можем ее проигнорировать. Печать в текстовых полях через API библиотеки Puppeteer почти до смешного проста: вы просто передаете селектор, который идентифицирует элемент, и желаемую строку с помощью метода .type().

Вот и всё! Протестируйте скрипт, чтобы удостовериться, что отправка логина работает. Из-за КАПЧИ, конечно, ничего не получится, но зато мы можем протестировать работу хуков.

Подождите-ка! Мы ведь даже не видим капчу, и консоль JavaScript жалуется на ошибки. Что здесь происходит? Во время автоматизации веб-страниц, помимо капч, есть множество других препятствий, которые могут встать у вас на пути. И одна из них – настолько высокая скорость выполнения операций, что страница ломается. Когда браузеры автоматизированы, они работают во много-много раз быстрее, чем на то способен обычный человек, и зачастую это приводит к выполнению кода в таком порядке, в каком разработчики его не тестировали (это называется состоянием гонки или неопределённость параллелизма).

Страница Reddit страдает от состояния гонки, тогда как Google выводит реКАПЧУ после фокусировки на втором поле ввода пароля. То есть наш скрипт выполняется c такой скоростью, что смена фокуса происходит до того, как готов скрипт реКАПЧИ. Есть много решений этой проблемы, но самое простое – добавить минимальную задержку, необходимую, чтобы миновать это состояние гонки. Мы могли бы добавить хуки и обработчики событий, чтобы убедиться, что мы действуем только после того, как рекапча загрузилась, но, похоже, самих разработчиков Reddit состояние гонки устраивает, так что нам нет необходимости умничать. Есть много способов организовать задержку, но в опциях Puppeteer, связанных с запуском браузера, есть параметр «slowMo», который глобально задерживает все действия на заданное значение. Это очень грубый подход, так как замедляются вообще все действия Puppeteer, но начать с этого можно.

После добавления этой опции мы видим, что капча снова работает. Ради забавного эксперимента, можно попробовать пройти капчу прямо сейчас и посмотреть что будет. Поскольку мы используем вариант Chromium с настройками по умолчанию, который запускается библиотекой Puppeteer, и мы управляем им через средства автоматизации, то реКАПЧА будет изо всех сил пытаться доказать, что мы не человек. Вам, вероятно, придется пройти несколько уровней проверки, даже если вы разберетесь со всеми картинками. Когда я тестировал это, мне пришлось пройти через 10 различных повторений, прежде чем я получил зеленую галочку.

К счастью, все это можно сделать намного легче.