Google Recaptcha в VueJS

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

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

Во-первых, давайте установим пакет Vue Recaptcha через npm.

npm install vue-recaptcha

Далее давайте импортируем компонент и зарегистрируем его в нашем экземпляре Vue.

import Vue from 'vue'
import VueRecaptcha from 'vue-recaptcha'

Vue.component('vue-recaptcha', VueRecaptcha)

Теперь мы можем использовать компонент vue-recaptcha в нашем шаблоне.

<template>
  <div>
    <form @submit.prevent="submitForm">
      <label>
        Name:
        <input type="text" v-model="name">
      </label>
      <label>
        Email:
        <input type="email" v-model="email">
      </label>
      <vue-recaptcha ref="recaptcha" @verify="onVerify"></vue-recaptcha>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

Обратите внимание, что мы используем директиву @submit.prevent, чтобы предотвратить нормальную отправку формы, и вместо этого мы вызываем метод submitForm. Мы также используем директиву v-model для привязки наших входных значений к свойствам данных. Самая важная часть — это компонент vue-recaptcha, который мы используем с атрибутом ref, чтобы мы могли ссылаться на него позже в нашем коде. Мы также добавляем прослушиватель событий @verify для обработки проверки reCAPTCHA.

Теперь давайте определим наши данные и методы в разделе сценария.

export default {
  data() {
    return {
      name: '',
      email: ''
    }
  },
  methods: {
    submitForm() {
      this.$refs.recaptcha.execute()
    },
    onVerify(response) {
      // Verify the response with your server and submit the form
      console.log(response)
    }
  }
}

В методе submitForm мы вызываем метод execute для компонента vue-recaptcha, который инициирует вызов reCAPTCHA. Когда пользователь завершит вызов, будет вызван метод onVerify с токеном ответа. Затем вы можете проверить токен на своем сервере и отправить форму, если она действительна.

Вот и все! Теперь у вас должна быть работающая reCAPTCHA в вашей форме VueJS. Конечно, это всего лишь базовый пример — вы, вероятно, захотите настроить внешний вид и поведение своей reCAPTCHA в соответствии со своими потребностями. Компонент Vue Recaptcha предоставляет множество реквизитов и событий, которые вы можете использовать для этого.

Вот полный код для справки.

<template>
  <div>
    <form @submit.prevent="submitForm">
      <label>
        Name:
        <input type="text" v-model="name">
      </label>
      <label>
        Email:
        <input type="email" v-model="email">
      </label>
      <vue-recaptcha ref="recaptcha" @verify="onVerify"></vue-recaptcha>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
<script>
  import Vue from 'vue'
  import VueRecaptcha from 'vue-recaptcha'
  
  Vue.component('vue-recaptcha', VueRecaptcha)
  
  export default {
    data() {
      return {
        name: '',
        email: ''
      }
    },
    methods: {
      submitForm() {
        this.$refs.recaptcha.execute()
      },
      onVerify(response) {
        // Verify the response with your server and submit the form
        console.log(response)
      }
    }
  }
</script>

Об авторе

Я Ньоман Джиотиса — веб-разработчик с многолетним опытом работы с различными языками программирования и фреймворками. Лучше всего он разрабатывает новые веб-сайты, а также поддерживает и добавляет новые функции к существующему веб-сайту. Если вы заинтересованы, вы добро пожаловать на работу.