Вот демо конечного продукта.

Нажмите здесь, чтобы опубликовать эту статью в LinkedIn »

Google reCaptcha - отличный способ держать под контролем любой спам и поддельные аккаунты в вашем приложении / веб-сайте. В этом руководстве мы рассмотрим, как добавить reCaptcha на страницу регистрации / подписи вверх приложения vuejs, чтобы гарантировать, что кто бы ни подписал up на самом деле человек. Поток следующий.

  1. Пользователь заполняет форму регистрации и отправляет.
  2. Google reCaptcha запускает механизм, чтобы определить, является ли пользователь ботом. Мы будем использовать невидимую reCaptcha, что означает, что проверка пользователя может происходить без их ведома. Пользователю может быть предложено выполнить задание, если reCaptcha не может ненавязчиво определить, являются ли они людьми.
  3. После завершения проверки reCaptcha выдаст событие с токеном, который показывает, что пользователь был проверен. Пока пользователь не будет проверен, это событие не будет запущено.
  4. Мы отправим этот токен на наш сервер вместе с формой регистрации. Первое, что мы делаем, это проверяем правильность токена. Для этого нам нужно вызвать API reCaptcha.

Мы разделим интерфейс и серверную часть на клиент и API. Начнем с клиента.

Фронтенд

Для начала нам нужно создать экземпляр reCaptcha. Для этого вам понадобится учетная запись Google. Перейдите на https://www.google.com/recaptcha/admin#list. Вам будет представлена ​​следующая форма:

Заполните форму: вы можете использовать любой ярлык, какой захотите. Выберите параметр невидимая капча , введите домен, в котором будет размещено ваше приложение - я просто выбрал localhost для этой демонстрации. Примите условия и нажмите зарегистрироваться. На следующей странице запишите ключ и секрет сайта, они нам понадобятся позже.

Фронтент будет иметь 3 зависимости:

//index.html

Мы даем нашему корневому div id app. Мы будем использовать это, чтобы сообщить Vue, где находится корень нашего приложения. Внизу у нас есть 3 сценария зависимостей Vue, Vue-re-raptcha и Google reCaptcha. Кроме того, мы включаем index.js, который содержит основную логику нашего приложения. Форма довольно стандартная, но для тега vue-recaptcha, который является оболочкой компонента vue для reCaptcha. Передаем компоненту 2 обработчика:

  • verify - вызывается после проверки пользователя
  • expired - вызывается по истечении срока действия reCaptcha. ReCaptcha с истекшим сроком действия необходимо перезагрузить, чтобы снова работать.

Мы также передаем sitekey, который мы получили при регистрации экземпляра reCaptcha, и размер invisible для невидимого варианта reCaptcha.

Ядро нашего приложения находится в index.js

Метод submit вызывается, когда пользователь нажимает кнопку регистрации. Мы устанавливаем this.status=submitting, чтобы можно было отключить кнопку регистрации. Таким образом, мы можем избежать многократных щелчков и, следовательно, многократных отправок. Также в методе submit мы вызываем this.$refs.recaptcha.execute(), , это говорит reCaptcha начать проверку, действительно ли пользователь является человеком. На этом этапе может произойти одно из двух:
1. reCaptcha уверен, что пользователь является человеком, и не просит его выполнить задание
2. reCaptcha подозревает нечестную игру и просит пользователя завершить вызов доказать, что они люди.

Как только reCaptcha уверен, что пользователь - человек (с вызовом или без него), он вызовет обработчик verify, указанный в нашем компоненте vue-recaptcha. В этом случае нашим обработчиком является метод onCaptchaVerified. Внутри нашего метода onCaptchaVerified мы знаем, что пользователь подтвержден как человек, и можем приступить к отправке формы на наш сервер.

recaptchaToken передается в наш метод onCaptchaVerified, и мы можем опубликовать этот токен вместе с нашей формой регистрации, чтобы еще раз проверить на сервере, что пользователь доказал, что они не бот. Важно сбросить нашу reCaptcha (this.$refs.recaptcha.reset()), потому что в случае ошибки на сервере (например, электронная почта уже используется) нам нужно будет снова подтвердить пользователя на сервере. Мы могли бы попытаться сохранить токен в нашем состоянии и снова отправить его на сервер для проверки при повторной отправке пользователем, но reCaptcha позволяет использовать токен только для проверки сервера один раз, поэтому этот подход не будет работать, мы должны сбросить reCaptcha. Мы также сбрасываем reCaptcha по истечении срока действия, иначе мы получим ошибку при попытке выполнить его.

Бэкэнд

Как только мы получим токен на серверной части, нам нужно убедиться, что он действителен, прежде чем подписывать пользователя. Это относительно просто, нам просто нужно опубликовать токен (размещенный в теле как параметр response) в API reCaptcha для проверки. В дополнение к токену мы также должны публиковать через наш секрет reCaptcha (сказали, что он вам понадобится, обратите внимание, что мы установили его как переменную среды в приведенном ниже примере). Взглянем на наш сервер:

Если все пойдет хорошо, мы получим ответ JSON, который выглядит примерно так:

{
  "success": true|false,
  "challenge_ts": timestamp,  
  "hostname": string,         
  "error-codes": [...]        // optional
}

См. Https://developers.google.com/recaptcha/docs/verify для получения дополнительной информации. Самое важное для нас поле - это поле success. Он указывает, была ли проверка токена успешной. Если это так, то мы можем продолжить и добавить подписку нашего пользователя, если нет, мы отклоняем пользователя и возвращаем ошибку в интерфейс.

Вот и все! Теперь мы можем быть уверены, что наши пользователи законны.

Если вы его пропустили, здесь живая демонстрация вместе с исходным кодом.