Ошибка получения токена капчи

Во многих случаях при доступе к веб-странице появляется сообщение убедитесь, что мы настоящий пользователь а не бот. Это позволяет предлагать правильные услуги без ущерба для самого веб-сайта или любого пользователя.

В основном это то, что делает reCAPTCHA. Это бесплатная служба Google, которая проверяет, что вход на страницу или платформу осуществляется человеком, а не ботом. Он помогает этим сайтам избежать ввода различных автоматизированных инструментов, которые могут даже привести к рассылка спама и угроз .

Использование пользователями очень простое. Интернет-пользователь входит на страницу, и появляется поле, в котором он должен отметить, что он не бот, и тем самым подтвердить, что он человек. Это похоже на другие варианты, которые мы видим, в которых вы должны отметить серию цифр, изображений и т. Д. Однако в этом случае процесс выполняется быстрее и проще.

Однако бывают случаи, когда появляется ошибка и reCAPTCHA не работает в Chrome или любом браузере. Появится сообщение о том, что проверка не удалась. Это помешает нам открыть веб-сайт или войти в систему.

Почему в браузере не работает reCAPTCHA

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

Мы просматриваем через VPN или прокси

Иметь VPN или просматривая полномочие очень распространено. В нашем распоряжении много таких услуг. Они позволяют нам избегать возможных географических блоков, которые могут существовать, а также сохранять личную информацию, если мы подключаемся из общедоступной сети.

Однако это может быть причиной того, что reCAPTCHA не работает в браузере. Это может привести к конфликту с сетью и лишить нас возможности проверить, действительно ли мы являемся законным пользователем, а не ботом.

Браузер устарел

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

Вредоносное ПО в системе

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

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

Мы подключены с подозрительного IP

В таких случаях это очень частая причина. Веб-сайт интерпретирует, что мы подключены к подозрительный IP и считает, что мы можем быть ботом. Это может произойти, если мы просматриваем общедоступный Wi-Fi, например, где внутри много пользователей. Также в случае доступа к сети из VPN.

Что делать для устранения неполадок с reCAPTCHA

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

Держите оборудование в безопасности

Конечно, один из самых важных вопросов избежать сбоя reCAPTCHA и другие подобные сообщения, которые могут появиться в браузере, предназначены для обеспечения безопасности компьютера. Для этого мы можем использовать множество инструментов, доступных для всех типов операционных систем.

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

Обновите систему и браузер

Один момент, который мы не можем забыть, — это постоянно обновлять как систему, так и браузер. Во многих случаях появляются уязвимости и сбои, которые могут вызывать эти типы ошибок, а также служить шлюзом для хакеров.

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

Контроль использования VPN и прокси

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

Перезагрузите IP

In Windows мы можем легко сбросить IP из командной строки. Для этого нам нужно перейти в Пуск, получить доступ к командной строке в режиме администратора и выполнить ipconfig / обновить . Это могло бы помочь исправить этот сбой, если это было причиной.

Перезагрузите роутер

Мы видели, что могут быть проблемы и с нашим IP. Но сам маршрутизатор мог неправильно обрабатывать запросы. Поэтому важный совет — перезагрузите устройство и посмотрите, устранит ли это неисправность. Теперь вам нужно сделать это правильно. Мы должны выключить роутер и позволить ему оставаться в таком состоянии не менее 30 секунд, прежде чем снова его включить.

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

В этой статье я покажу как подключить капчу от Google (reCAPTCHA) на Vue JS и валидировать ответ на сервере (я использую бекенд на Laravel/Lumen в качестве примера, но принцип валидации одинаковый для всех технологий).

Предисловие

Мы будем использовать Invisible reCAPTCHA.
Это невидимая* капча, которую не нужно проходить до тех пор, пока система не посчитает это нужным. Администратор сайта может установить пороговый уровень (Security Preference), при котором система будет требовать от пользователя пройти дополнительную проверку.

*- значок reCAPTCHA все же должен присутствовать на странице.

Невидимая капча на сайте.

Вопрос / Ответ

Перед началом работы я хотел бы ответить на вопросы, которые возникли у меня, когда я начинал работу с Google reCAPTCHA.

В: Сколько стоит использование reCAPTCHA?
О: ReCAPTCHA от Google — это бесплатный инструмент.

В: Зачем нужно еще раз проверять ответ пользователя на бекенде, если он уже прошел капчу на сайте?
О: Когда вы делаете запрос на сервер, вы отправляете что-то наподобие этого:

POST /register 1.1 HTTP
Host: www.example.com
{
    "email:"user@gmail.com", 
    "password": "supersecret", 
    "recaptcha-token":"01ASJASJFZ_AASD3115..."
}

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

В: У меня реакт, что мне делать?
О: React JS — отличная вещь. Если вы используете его для разработки сайтов, советую обратить внимание на https://github.com/appleboy/react-recaptcha. Принцип работы очень похож на пример с Vue.

Приступаем к работе

Итак, прежде чем начать готовить, нам нужен список ингредиентов:

• Проект на Vue (https://vuejs.org)
• Компонент для Vue (https://github.com/DanSnow/vue-recaptcha)
• Скрипт Google reCAPTCHA (https://www.google.com/recaptcha/api.js)
• Axios для отправки запросов на сервер (https://www.npmjs.com/package/axios)
• Guzzle HTTP PHP клиент для отправки запросов с бекенда на Google API (https://github.com/guzzle/guzzle)
• Бекенд

Шаг №1: Получаем ключи для использования reCAPTCHA на своем сайте

Нам нужно получить site key и secret key на сайте Google: https://www.google.com/recaptcha/admin#list

В поле label можете писать что угодно.

Далее выберите тип — Invisible reCAPTCHA badge.

Вы можете указать несколько доменов, на которых будете использовать капчу.
В качестве примера я указал yourawesomedomain.com и localhost.

Принимаем условия использования и двигаемся дальше.

Вам выдали два ключа, сохраните их в надежном месте. Мы вернемся к ним позже.

Шаг №2: Фронтенд. Установка и подключение капчи к нашим формам

Для начала, нам нужно добавить этот код в секцию head:

<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script>

Свойство onload сообщит нашему компоненту, что капча готова к использованию.

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

<template>
  <div id="app">
    <div class="container my-4">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <h2 class="text-center mb-4">
            Sign Up Form with Google reCAPTCHA
          </h2>
          <form
              method="post"
              @submit.prevent="validate">
            <div class="form-group">
              <input 
                   type="email" 
                   name="email" 
                   class="form-control" 
                   placeholder="Enter your e-mail address"
                   required />
            </div>
            <div class="form-group">
              <input 
                   type="password" 
                   name="password" 
                   class="form-control" 
                   placeholder="Enter your password"
                   required />
            </div>
            <div class="form-group">
              <vue-recaptcha
                ref="recaptcha"
                size="invisible"
                :sitekey="sitekey"
                @verify="register"
                @expired="onCaptchaExpired"
              />
              <button 
                    type="submit" 
                    class="btn btn-primary btn-block">
                Sign Up
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueRecaptcha from 'vue-recaptcha'

export default {
  name: 'Register',

  components: { VueRecaptcha },

  data () {
    return {
      email: null,
      password: null,
      sitekey: 'ВАШ SITE KEY'
    }
  },

  methods: {
    register (recaptchaToken) {
      axios.post('https://yourserverurl.com/register', {
        email: this.email,
        password: this.password,
        recaptchaToken: recaptchaToken
      })
    },

    validate () {
      // тут можно добавить проверку на валидацию
      // например, с помощью vee validate
      // если с валидацией наших полей все хорошо, запускаем каптчу
      this.$refs.recaptcha.execute()
    },

    onCaptchaExpired () {
      this.$refs.recaptcha.reset()
    }
  }
}
</script>

<template>
  <div id="app">
    <div class="container my-4">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <h2 class="text-center mb-4">
            Sign Up Form with Google reCAPTCHA
          </h2>
          <form
            method="post"
            @submit.prevent="validate">
            <div class="form-group">
              <input
                type="email"
                name="email"
                class="form-control"
                placeholder="Enter your e-mail address"
                v-validate.disable="'required|email'"
                required />
                <div
                  v-show="errors.has('email')"
                  class="invalid-feedback d-block"
                >
                  {{ errors.first('email') }}
                </div>
            </div>
            <div class="form-group">
              <input
                type="password"
                name="password"
                class="form-control"
                placeholder="Enter your password"
                v-validate.disable="'required|min:6|max:32'"
                required />
              <div
                v-show="errors.has('password')"
                class="invalid-feedback d-block"
              >
                {{ errors.first('password') }}
              </div>
            </div>
            <div class="form-group">
              <vue-recaptcha
                ref="recaptcha"
                size="invisible"
                :sitekey="sitekey"
                @verify="register"
                @expired="onCaptchaExpired"
              />
              <button
                type="submit"
                class="btn btn-primary btn-block">
                Sign Up
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueRecaptcha from 'vue-recaptcha'

export default {
  name: 'Register',

  components: { VueRecaptcha },

  data () {
    return {
      email: null,
      password: null,
      sitekey: 'ВАШ SITE KEY'
    }
  },

  methods: {
    register (recaptchaToken) {
      axios.post('https://yourserverurl.com/register', {
        email: this.email,
        password: this.password,
        recaptchaToken: recaptchaToken
      })
    },

    validate () {
      const self = this
      self.$validator.validateAll().then((result) => {
        if (result) {
          self.$refs.recaptcha.execute()
        }
      })
    },

    onCaptchaExpired () {
      this.$refs.recaptcha.reset()
    }
  }
}
</script>

Начнем с того, что мы имортировали Vue-Recaptcha в наш компонент:

import VueRecaptcha from 'vue-recaptcha'
...
components: { VueRecaptcha },

Дальше мы обьявили свойство sitekey в data() компонента:

data () {
    return {
      ...
      sitekey: 'ВАШ SITE KEY'
    }
  },

Добавляем компонент Vue-Recaptcha в нашу форму:

<vue-recaptcha
    ref="recaptcha"
    size="invisible"
    :sitekey="sitekey"
    @verify="register"
    @expired="onCaptchaExpired"
/>

Метод register будет вызван при успешном прохождении капчи, в то время как expired вызывается при истечении срока действия капчи.

Метод onCaptchaExpired перезапускает капчу:

onCaptchaExpired () {
      this.$refs.recaptcha.reset()
}

Самой форме мы добавляем событие @submit.prevent=»validate», которое запускает метод validate при отправке формы.

validate () {
      this.$refs.recaptcha.execute()
}

Процес можно описать так:

1. Пользователь ввел данные и нажал кнопку Sign Up, вызывается функция validate().
2. Функция validate() запускает капчу, если пользователь ее успешно проходит, вызывается метод register.

В методе register мы получаем recaptchaToken, который мы должны отправить на сервер вместе с данными, которые ввел пользователь:

register (recaptchaToken) {
      axios.post('https://yourserverurl.com/register', {
        email: this.email,
        password: this.password,
        recaptchaToken: recaptchaToken
      })
}

На этом наша работа с фронтендом закончена. ReCAPTCHA успешно установлена и работает.

P.S. Если вы собираетесь использовать капчу в нескольких компонентах, лучше всего вынести sitekey в .env файл и получать его с помощью process.env:

data () {
    return {
      ...
      sitekey: process.env.VUE_APP_RECAPTCHA_TOKEN
    }
},

Шаг №3: Валидация на бекенде. Пример валидации на Laravel и Lumen

Сделать валидацию ответа на сервере очень просто. Начнем с примера на Laravel.

1) В папке config создайте файл recaptcha.php с таким содержимым:

<?php

return [
    'enabled' => env('RECAPTCHA_ENABLED', true),
    'key'     => env('RECAPTCHA_SITE_KEY'),
    'secret'  => env('RECAPTCHA_SECRET_KEY'),
];

2) После этого, добавьте переменные в .env файл:

RECAPTCHA_ENABLED=FALSE
RECAPTCHA_SITE_KEY=ВАШ_SITE_KEY
RECAPTCHA_SECRET_KEY=ВАШ_SECRET_KEY

3) Установите GuzzleHttp, чтобы иметь возможность отправлять запросы на API гугла:

composer require guzzlehttp/guzzle

4) В контроллере добавьте метод checkRecaptcha:

protected function checkRecaptcha($token, $ip)
{
    $response = (new Client)->post('https://www.google.com/recaptcha/api/siteverify', [
        'form_params' => [
            'secret'   => config('recaptcha.secret'),
            'response' => $token,
            'remoteip' => $ip,
        ],
    ]);
    $response = json_decode((string)$response->getBody(), true);
    return $response['success'];
}

В этом методе мы отправляем наш токен (который мы получили с фронтенда) методом POST на https://www.google.com/recaptcha/api/siteverify

5) В методе register (в вашем случае название может отличатся, это метод на который вы отправляли POST запрос с фронтенда) добавьте следующий код:

if (config('recaptcha.enabled') && !$this->checkRecaptcha($request->recaptcha_token, $request->ip())) {
    return return response()->json([
        'error' => 'Captcha is invalid.',
    ], Response::HTTP_BAD_REQUEST);
}

Все готово к использованию!

• При обращении к методу register мы получаем email, password и recaptcha_token.
• Если recaptcha включена (в .env файле значение RECAPTCHA_ENABLED стоит TRUE),
  Laravel отправит запрос на API гугла.
• Если ответ отрицательный, мы возвращаем ошибку с текстом: Captcha is invalid.
• Если положительный — продолжаем регистрацию пользователя.

Путешествие токена. Визуальное представление.

Полный код контроллера будет выглядеть так:

<?php

namespace AppHttpControllersUsers;

use AppHttpControllersController;
use IlluminateHttpRequest;
use IlluminateHttpResponse;
use GuzzleHttpClient;

class UserController extends Controller
{
    protected function checkRecaptcha($token, $ip)
    {
        $response = (new Client)->post('https://www.google.com/recaptcha/api/siteverify', [
            'form_params' => [
                'secret'   => config('recaptcha.secret'),
                'response' => $token,
                'remoteip' => $ip,
            ],
        ]);
        $response = json_decode((string)$response->getBody(), true);
        return $response['success'];
    }

    public function register(Request $request)
    {
        $request->validate([
            'email' => 'required|string|email|unique:users|max:255',
            'password' => 'required|string|max:32|min:6',
            'recaptcha_token' => 'string'
        ]);

        if (config('recaptcha.enabled') && !$this->checkRecaptcha($request->recaptcha_token, $request->ip())) {
            return response()->json([
                'error' => 'Captcha is invalid.',
            ], Response::HTTP_BAD_REQUEST);
        }

        // Капча ОК. Регистрируем пользователя...
    }
}

Валидация ответа на Lumen

На Lumen все делаем так же, как в примере с Laravel, за исключением того, что нам нужно зарегистрировать наш конфиг (recaptcha.php) в bootstrap/app.php:

$app->configure('recaptcha');

Заключение

Итак, в этой статье вы научились использовать Google reCAPTCHA в своем проекте на Vue.

ReCAPTCHA — отличный бесплатный инструмент для защиты своего ресурса от ботов.
С невидимой капчой можно проверять посетителей, не требуя от них никаких действий.

Пример приложения из статьи на codepen

Использованные источники:

1. https://github.com/DanSnow/vue-recaptcha
2. https://developers.google.com/recaptcha/docs/invisible
3. https://developers.google.com/recaptcha/docs/verify
4. https://security.stackexchange.com/questions/78807/how-does-googles-no-captcha-recaptcha-work