logo标签列表

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

vue.jsvue-componentrecaptchavuetify.jsrecaptcha-v3
8

我使用的是这个包：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 reCAPTCHA的Token。

我的问题是验证码图标出现在所有页面的右下角。

enter image description here

我希望它只出现在某些组件中。

也许我必须更改这个：Vue.use(VueReCaptcha, { siteKey: 'xxxxxxxxxxxxxxxxx' })。看起来它仍然挂载到 Vue.use 上。我想将其挂载到某个特定组件上，而不是vue根实例。

我该如何解决这个问题？

更新

我尝试了这样：

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

它隐藏了徽章。我希望徽章仍然出现。但是只在一个页面，即注册页面上。我该怎么做？

这可能会有所帮助：https://github.com/AurityLab/recaptcha-v3/#loader-options - crbast
1
@CrBast 看起来有所不同 - moses toh
1
@CrBast如果您认为可以，请用具体的答案回答这个问题。顺便说一下，我更新了我的问题。 - moses toh
1
@CrBast 我希望徽章仍然出现，但只在一个页面上。 - moses toh
1
@CrBast 如果是这样的话，我会添加所有组件。如果我将 autoHideBadge 更改为 true 并添加 .grecaptcha-badge { display:block !important; }。它只会更改 main.js 和 1 个组件。 - moses toh
显示剩余4条评论
6个回答
3
我在使用npm包时遇到了同样的问题，这真的很烦人。
最终，我决定不使用该包并遵循Google的文档。
这里的这行代码：
grecaptcha.execute('_reCAPTCHA_site_key_', {action: 'login'}).then(function(token) {
  recaptcha = token
})

相当于npm包中的这行代码：
this.$recaptcha('login').then((token) => {
   recaptcha = token 
})

您只需要将以下代码添加到 <head> 标签中，就可以让reCAPTCHA正常工作：

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

但是一旦脚本标签在您的中，您将面临它在每个页面上显示的相同问题。
这个技巧是只在需要的组件中将其插入到中。有几种方法可以做到这一点，但我最终引用了this。
您可以将其放在组件的方法中，并在加载组件时调用该方法。
这样它将仅出现在您需要它的页面上。
2
在main.js中设置autoHideBadge为true：
import { VueReCaptcha } from 'vue-recaptcha-v3'
Vue.use(VueReCaptcha, { siteKey: 'your site key', 
  loaderOptions:{autoHideBadge: true }})

在每个你想展示徽章的页面中，你可以在mounted事件中显示徽章。由于某些原因，在mounted事件之后的几秒钟内，this.$recaptchaInstance为空，因此我使用了一个定时器，在页面加载后5秒钟展示徽章。

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

当你展示它时，你需要在同一页中再次隐藏它。
   beforeDestroy() {
    const recaptcha = this.$recaptchaInstance
      recaptcha.hideBadge()
    },
1
这个使用案例的完美答案 - Gags
1
如果您正在使用组合式API设置，则需要执行以下操作：
const reCaptchaIn = useReCaptcha().instance
onMounted(() => {
    setTimeout(() => {
    reCaptchaIn.value.showBadge()
}, 3000)

})

1
你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community
0

只需使用此代码：

const recaptcha = this.$recaptchaInstance

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

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

{{link1：vue-recaptcha-v3 npm}}

1
你应该提供更多的信息，解释为什么你的代码能够工作，并且为什么这段代码是原始帖子的解决方案。 - Cornel Raiu
0

我偶然发现了这个非常简单的答案。如果您希望从所有页面隐藏徽章，它非常出色。您也可以使用作用域 CSS 在某些页面上隐藏。

.grecaptcha-badge { visibility: hidden; }

你可以在这里阅读文章链接

0

Vue 3 组合 API

在 main.js

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

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

在您的.vue文件中，您需要激活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()
})

请参考https://www.npmjs.com/package/vue-recaptcha-v3。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接