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

Question

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

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?

Merlenemerlin

It might help you : github.com/AurityLab/recaptcha-v3/#loader-options – Guertin

@CrBast Seems it's different – Merlenemerlin

@CrBast if you believe it can, please answer this question with specific answers. Btw, I update my question – Merlenemerlin

Can you try this : https://mcmap.net/q/108711/-how-to-hide-the-google-invisible-recaptcha-badge (override css) – Guertin

@CrBast I want the badge to still appear. but only on one page – Merlenemerlin

Try to change autoHideBadge with false and add : .grecaptcha-badge { display:none !important; } where you don't want to show it – Guertin

@CrBast There seems to be something wrong with your words. Should change autoHideBadge with true and add .grecaptcha-badge { display:block !important; }. Right? – Merlenemerlin

autoHideBadge to false and add css code (where you don't want to show it.) – Guertin

@CrBast If like that, I will add on all component. If I change autoHideBadge with true and add .grecaptcha-badge { display:block !important; }. It just change main.js and 1 component – Merlenemerlin

Answer 1

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.

Burma

Answer 2

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

Simultaneous

perfect answer for this use case – Kanzu

Answer 3

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

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

})

Hamrick

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Sukkah

Answer 4

Just use this code:

const recaptcha = this.$recaptchaInstance

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

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

vue-recaptcha-v3 npm

Brest

you should give some more info explaining why does your code work and why is this code the solution to the original post – Eric

Answer 5

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

Cattalo

Answer 6

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

Needs