CODEWITHSUNDEEP
vue.jsvue-componentrecaptchavuetify.jsrecaptcha-v3
moses toh
moses toh

Reputation: 13192

How do I display the captcha icon only on certain pages (VUE reCAPTCHA-v3)?

I use this package : https://www.npmjs.com/package/vue-recaptcha-v3

I add on my main.js : 

import { VueReCaptcha } from 'vue-recaptcha-v3'

Vue.use(VueReCaptcha, { siteKey: 'xxxxxxx' })

I add this code :

await this.$recaptcha('login').then((token) => {
    recaptcha = token
})

to my component to get token from google recapchta

My problem is the captcha icon in the lower right corner appears on all pages

enter image description here

I want it to only appear in certain components

Maybe I must to change this : Vue.use(VueReCaptcha, { siteKey: 'xxxxxxxxxxxxxxxxx' }). Seems it still mounting to Vue.use. I want to mount to a certain component instead of vue root instance

How can I solve this problem?

Update

I try like this : 

Vue.use(VueReCaptcha, {
  siteKey: 'xxxxxxx',
  loaderOptions: {
    useRecaptchaNet: true,
    autoHideBadge: true
  }
})

It hides the badge. I want the badge to still appear. But only on 1 page, the registration page. How can I do it?

Upvotes: 8

Views: 5670

Answers (6)

be able
be able

Reputation: 81

Vue 3 Composition API

in main.js

// reCaptca 3
import { VueReCaptcha } from 'vue-recaptcha-v3'

const app = createApp(App);
app.use(VueReCaptcha, { 
    siteKey: 'yourSiteKeyFromGoogleHere',
    loaderOptions: {
        useRecaptchaNet: true,
        autoHideBadge: true
        }
    })

And in your .vue file where you need to activate the recaptcha.

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import { useReCaptcha } from 'vue-recaptcha-v3'

const { executeRecaptcha, recaptchaLoaded } = useReCaptcha()

const recaptchaIns = useReCaptcha().instance

onMounted(() => {
    setTimeout(() => {
        recaptchaIns.value.showBadge()
    }, 1000)
}),
onBeforeUnmount(() => {
    recaptchaIns.value.hideBadge()
})

Please refer https://www.npmjs.com/package/vue-recaptcha-v3

Upvotes: 0

F KIng
F KIng

Reputation: 498

I stumbled upon this incredibly simple answer. It is excellent especially if you wish to hide the badge from all your pages. You can perhaps use scoped css to hide on some pages as well.

.grecaptcha-badge { visibility: hidden; }

You can read the post here

Upvotes: 0

Majid Adigozalpour
Majid Adigozalpour

Reputation: 11

If you are using composition API setup this is what you need:

const reCaptchaIn = useReCaptcha().instance
onMounted(() => {
    setTimeout(() => {
    reCaptchaIn.value.showBadge()
}, 3000)

})

Upvotes: 1

alireza abdollahi
alireza abdollahi

Reputation: 21

in main.js set autoHideBadge true:

import { VueReCaptcha } from 'vue-recaptcha-v3'
Vue.use(VueReCaptcha, { siteKey: 'your site key', 
  loaderOptions:{autoHideBadge: true }})

in every page you want to show the badge you can show the badge in mounted, for some reasons until a few seconds after mounted event this.$recaptchaInstance is null and you cant use it, so I use a timeout to showing the badge 5 second after page load in mounted.

mounted(){
    setTimeout(()=>{
      const recaptcha = this.$recaptchaInstance
      recaptcha.showBadge()
    },5000)
   },

when you show it you have to hide it again in the same page.

   beforeDestroy() {
    const recaptcha = this.$recaptchaInstance
      recaptcha.hideBadge()
    },

Upvotes: 2

Vladjmg
Vladjmg

Reputation: 1

Just use this code:

const recaptcha = this.$recaptchaInstance

// Hide reCAPTCHA badge:
recaptcha.value.hideBadge()

// Show reCAPTCHA badge:
recaptcha.value.showBadge()

vue-recaptcha-v3 npm

Upvotes: 0

lime_ajinomoto
lime_ajinomoto

Reputation: 1030

I've had the same issue while using the npm package, it's pretty annoying.

At the end of the day, I've decided not to use the package & follow Google's documentation.

This line here :

grecaptcha.execute('_reCAPTCHA_site_key_', {action: 'login'}).then(function(token) {
  recaptcha = token
})

Is equivalent to this line here from the npm package :

this.$recaptcha('login').then((token) => {
   recaptcha = token 
})

You just need to add this line into your < head > for recaptcha to work :

<script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"></script>

But as soon the script tag is in your < head >, you will be facing the same issue of it showing on every page.

The hack is that you only insert it into the < head > on components that you need. There are ways to do this but I ended up referencing this.

You can put it in the methods of your component & call the method when the component is loaded.

That way it will only show up on the pages that you need it to.

Upvotes: 3

Related Questions