Blog Detail

10

Aug
How to Add Google Recaptcha V3 by Vue-recaptcha-v3 cover image

arrow_back How to Add Google Recaptcha V3 by Vue-recaptcha-v3

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

Installation

You can install it via npm or yarn.

Npm

$ npm install vue-recaptcha-v3

Yarn

$ yarn add vue-recaptcha-v3

Prerequisites

If you wanted to use this package you only need a valid site key for your domain, which you can easily get here.

Usage

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

Vue 3 Composition

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

TypeScript + Vue 3

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

Options

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

Option Usage

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

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

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

Launch project