如何仅在某些页面上显示验证码图标(VUE reCAPTCHA-v3)？

yi0zb3m4 于 2023-02-16 发布在 Vue.js

关注(0)|答案(5)|浏览(185)

我使用这个软件包：https://www.npmjs.com/package/vue-recaptcha-v3
我添加我的main.js：

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

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

我添加以下代码：

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

到我的组件以从google recapchta获取令牌
我的问题是右下角的验证码图标出现在所有页面上

我希望它只出现在某些组件中
也许我必须改变这一点：Vue.use(VueReCaptcha, { siteKey: 'xxxxxxxxxxxxxxxxx' })。似乎仍在挂载到Vue.use。我想挂载到某个组件，而不是vue根示例
我怎样才能解决这个问题？

我是这样试的：

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

它隐藏了徽章。我希望徽章仍然出现。但只在1页，注册页。我该怎么做？

5条答案

我在使用npm软件包时遇到过同样的问题，这很烦人。
在一天结束的时候，我决定不使用这个包&遵循Google's documentation。
这一行：

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

等效于npm包中的这一行：

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

你只需要在你的for recaptcha中添加这一行< head >就可以了：

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

但是，一旦脚本标记在您< head >的，您将面临同样的问题，它显示在每一页。
这个技巧是你只把它插入到< head >你需要的on组件中。有很多方法可以做到这一点，但我最终引用了this。
您可以将其放在组件的方法中&在加载组件时调用该方法。
这样它只会出现在你需要的页面上。

在main.js中将autoHideBadge设置为真：

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

在每个你想要显示徽章的页面上，你可以在挂载中显示徽章，由于某些原因，直到挂载事件this.$recaptchaInstance之后的几秒钟，你不能使用它，所以我使用了一个超时来在挂载中页面加载后5秒显示徽章。

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

当你显示它的时候，你必须在同一页中再次隐藏它。

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

如果您正在使用合成API设置，这是您需要的：

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

}）

请使用以下代码：

const recaptcha = this.$recaptchaInstance

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

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

我偶然发现了这个难以置信的简单答案。它非常好，特别是如果你想隐藏你所有页面的徽章。你也许可以使用scoped css来隐藏一些页面。

.grecaptcha-badge { visibility: hidden; }

你可以阅读文章here