10
AugGoogle reCAPTCHA is a free service from Google that helps protect websites from spam and abuse. The difference between google Recaptcha v2 vs v3 is that in v2 users get the challenge to solve captcha but in v3 user does not get any challenge. Instead, it generates a probability score based on your web browsing behavior.
Vue reCAPTCHA-v3 is a simple and easy-to-use reCAPTCHA V3 library for Vue based on reCAPTCHA-v3. So today I will explain the steps to use the Vue reCAPTCHA-v3 in the Vue js component.
You can install it via npm or yarn.
Npm
$ npm install vue-recaptcha-v3
Yarn
$ yarn add vue-recaptcha-v3
If you wanted to use this package you only need a valid site key for your domain, which you can easily get here.
import Vue from 'vue'
import { VueReCaptcha } from 'vue-recaptcha-v3'
// For more options see below
Vue.use(VueReCaptcha, { siteKey: '<site key>' })
new Vue({
methods: {
async recaptcha() {
// (optional) Wait until recaptcha has been loaded.
await this.$recaptchaLoaded()
// Execute reCAPTCHA with action "login".
const token = await this.$recaptcha('login')
// Do stuff with the received token.
}
},
template: '<button @click="recaptcha">Execute recaptcha</button>'
})
import { createApp } from 'vue'
import { VueReCaptcha, useReCaptcha } from 'vue-recaptcha-v3'
const component = {
setup() {
const { executeRecaptcha, recaptchaLoaded } = useReCaptcha()
const recaptcha = async () => {
// (optional) Wait until recaptcha has been loaded.
await recaptchaLoaded()
// Execute reCAPTCHA with action "login".
const token = await executeRecaptcha('login')
// Do stuff with the received token.
}
return {
recaptcha
}
},
template: '<button @click="recaptcha">Execute recaptcha</button>'
}
createApp(component)
.use(VueReCaptcha, { siteKey: '<site key>' })
To get type suggestions for instance variables (this is not needed for composition API), create a new file called shims-vue-recaptcha-v3.d.ts and put the following inside it:
import { ReCaptchaInstance } from 'recaptcha-v3'
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$recaptcha: (action: string) => Promise<string>
$recaptchaLoaded: () => Promise<boolean>
$recaptchaInstance: ReCaptchaInstance
}
}
Name | Description | Type | Default value |
---|---|---|---|
siteKey | The site key for your domain from Google. | string | none |
loaderOptions | Optional options for the recaptcha-v3 loader. The available options are described here. | object | null |
To use the options just pass an object to the Vue.use(…)
method. For example:
import Vue from 'vue'
import { VueReCaptcha } from 'vue-recaptcha-v3'
Vue.use(VueReCaptcha, {
siteKey: '<site key>',
loaderOptions: {
useRecaptchaNet: true
}
})
If you want to learn more about this package, you can visit its documentation on Github.
Published at : 10-08-2021
I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.
Launch project