Hai kawan,

Hari ini, saya akan mempelajari cara menggunakan google recaptcha di Vue. Kami akan menunjukkan contoh vue google recaptcha. Saya akan menjelaskan langkah demi langkah vue google recaptcha tutorial. Anda dengan mudah membuat google recaptcha di vue. Saya akan menginstal vue-recaptcha untuk vue google recaptcha.

Di sini, saya akan memberikan contoh lengkap untuk google recaptcha di vue seperti di bawah ini.

Install

npm install --save vue-recaptcha

atau dengan CDN

<script src="https://unpkg.com/vue-recaptcha@latest/dist/vue-recaptcha.min.js"></script>

Template - HTML

Sekarang adalah contoh komponen form di VueJS. Bentuknya cukup standar, tetapi Anda bisa melihat tag <vue-recaptchi>, yang merupakan pembungkus komponen vue untuk reCaptcha.

<template>
  <form :model="form" @submit.prevent="submit" ref="contactForm">
    <div class="form-group row">
      <label ...></label>
      <div class="col-sm-10">
        <input v-model="..." required="">
      </div>
    </div>
    <div class="form-group row">
      ...
    </div>
    <div class="form-group row">
      <label for="robot" class="col-sm-2 col-form-label"></label>
      <div class="col-sm-10">
        <vue-recaptcha ref="recaptcha"
          @verify="onVerify" sitekey="/*/*/*/*/*/">
        </vue-recaptcha>
      </div>
    </div>
    <button type="submit" class="btn btn-primary mb-2">Send</button>. 
  </form>
</template>

JAVASCRIPT

Berikut adalah contoh, inti dari komponen kita ada di Javascript berikutnya. Jika kita melihat tag vue-recaptcha, kita telah meneruskan panggilan penangan onVerify, yang akan dipanggil setelah pengguna diverifikasi, dan kunci situs yang kita peroleh ketika kita mendaftarkan instance reCaptcha di Google.

<script type="text/javascript">
import VueRecaptcha from 'vue-recaptcha';

export default {
  data() {
    return {
      form: {
        ...
        robot: false
      }
    }
  },
  methods: {
    submit: function() {
      if (this.form.robot) {
        ...
      }
    },
    onVerify: function (response) {
      if (response) this.form.robot = true;
    },
  },
  components: {
    'vue-recaptcha': VueRecaptcha
  },
}
</script>