🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Chào mừng đến với Cafedev – nơi chúng tôi không chỉ chia sẻ những kiến thức sâu rộng về lập trình và công nghệ mà còn mang đến những giải pháp thực tế cho các vấn đề trong thế giới công nghệ ngày nay! Trong bài viết này, chúng ta sẽ khám phá cách tích hợp Google Recaptcha vào ứng dụng VueJS của bạn. Recaptcha là một công cụ bảo mật mạnh mẽ giúp ngăn chặn các hành động spam tự động trên trang web. Hãy cùng khám phá cách triển khai trong bài viết dưới đây tại Cafedev!


Nếu bạn đã từng điền một biểu mẫu trực tuyến, có khả năng bạn đã gặp phải Google reCAPTCHA. Tính năng bảo mật này giúp ngăn chặn các bot tự động spam trang web bằng cách yêu cầu người dùng hoàn thành một thử thách mà chỉ con người mới có thể làm được, như chọn hình ảnh khớp với mô tả cụ thể hoặc nhập văn bản biến dạng. Trong câu chuyện này, chúng ta sẽ hướng dẫn cách thêm reCAPTCHA vào một biểu mẫu VueJS bằng cách sử dụng thành phần Vue Recaptcha.

Trước khi bắt đầu, bạn cần phải có một tài khoản Google và tạo một khóa trang web và khóa bí mật cho miền của bạn. Bạn có thể làm điều này bằng cách truy cập vào bảng điều khiển quản trị Google reCAPTCHA và làm theo hướng dẫn. Khi bạn có các khóa của mình, chúng ta có thể bắt đầu thiết lập dự án VueJS của chúng ta.

Trước tiên, hãy cài đặt gói Vue Recaptcha thông qua npm.

npm install vue-recaptcha

Tiếp theo, hãy nhập thành phần và đăng ký nó trong instance Vue của chúng ta.

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

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

Bây giờ chúng ta có thể sử dụng thành phần vue-recaptcha trong template của chúng ta.

<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>

Lưu ý rằng chúng tôi đang sử dụng chỉ thị @submit.prevent để ngăn biểu mẫu gửi đi theo cách thông thường, và thay vào đó chúng tôi gọi một phương thức submitForm. Chúng tôi cũng đang sử dụng chỉ thị v-model để ràng buộc các giá trị nhập của chúng tôi với các thuộc tính dữ liệu. Phần quan trọng nhất là thành phần vue-recaptcha, mà chúng tôi đang sử dụng với thuộc tính ref để chúng ta có thể tham chiếu đến nó sau này trong mã của chúng ta. Chúng tôi cũng đang thêm một trình nghe sự kiện @verify để xử lý việc xác minh reCAPTCHA.
Bây giờ hãy xác định dữ liệu và phương thức của chúng ta trong phần script.

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)
    }
  }
}

Trong phương thức submitForm, chúng tôi gọi phương thức execute trên thành phần vue-recaptcha, điều này sẽ kích hoạt thử thách reCAPTCHA. Khi người dùng hoàn thành thử thách, phương thức onVerify sẽ được gọi với mã token phản hồi. Sau đó, bạn có thể xác minh mã token với máy chủ của bạn và gửi biểu mẫu nếu nó hợp lệ.
Đó là tất cả! Bây giờ bạn đã có một reCAPTCHA hoạt động trong biểu mẫu VueJS của bạn. Tất nhiên, đây chỉ là một ví dụ cơ bản — bạn có thể muốn tùy chỉnh giao diện và hành vi của reCAPTCHA để phù hợp với nhu cầu của bạn. Thành phần Vue Recaptcha cung cấp nhiều props và sự kiện mà bạn có thể sử dụng để làm điều này.

Dưới đây là toàn bộ mã để tham khảo.

<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>

Chúng tôi hy vọng rằng bài viết về tích hợp Google Recaptcha vào VueJS đã mang lại cho bạn những kiến thức hữu ích và giúp bạn thực hiện các biện pháp bảo mật hiệu quả cho ứng dụng của mình. Đừng ngần ngại áp dụng những phương pháp này vào dự án của bạn và chia sẻ kinh nghiệm của mình trên cộng đồng Cafedev. Hãy tiếp tục theo dõi chúng tôi để cập nhật thêm nhiều thông tin bổ ích và thú vị khác về lập trình và công nghệ!

Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM