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?

It might help you : https://github.com/AurityLab/recaptcha-v3/#loader-options — crbast, Nov 18 '19 at 21:28
@CrBast if you believe it can, please answer this question with specific answers. Btw, I update my question — moses toh, Nov 19 '19 at 21:29
Can you try this : https://stackoverflow.com/a/58849283/9165517 (override css) — crbast, Nov 20 '19 at 07:42
@CrBast I want the badge to still appear. but only on one page — moses toh, Nov 21 '19 at 01:26
Try to change `autoHideBadge` with `false` and add : `.grecaptcha-badge { display:none !important; }` where you don't want to show it — crbast, Nov 21 '19 at 06:50
@CrBast There seems to be something wrong with your words. Should change `autoHideBadge` with `true` and add `.grecaptcha-badge { display:block !important; }`. Right? — moses toh, Nov 21 '19 at 06:53
`autoHideBadge` to `false` and add css code (where you don't want to show it.) — crbast, Nov 21 '19 at 06:59
@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 — moses toh, Nov 21 '19 at 07:06

score 3 · Answer 1 · answered Nov 28 '19 at 04:17

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.

score 2 · Answer 2 · answered Dec 20 '21 at 08: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()
    },

perfect answer for this use case – Gags Feb 17 '22 at 04:54 — Gags, Feb 17 '22 at 04:54

score 1 · Answer 3 · answered Apr 02 '22 at 11:59

1

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

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

})

answered Apr 02 '22 at 11:59

Majid Adigozalpour

11
1
3

1

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](/help/how-to-answer). – Community Apr 02 '22 at 13:04

score 0 · Answer 4 · answered Jun 27 '21 at 18:25

0

Just use this code:

const recaptcha = this.$recaptchaInstance

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

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

vue-recaptcha-v3 npm

answered Jun 27 '21 at 18:25

Vladjmg

1

1

you should give some more info explaining why does your code work and why is this code the solution to the original post – Cornel Raiu Jun 28 '21 at 01:23

score 0 · Answer 5 · answered Feb 14 '23 at 18:45

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

be able · Answer 6 · 2023-08-02T20:55:45.190

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

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

6 Answers6

Linked