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

Question

我添加了我的 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 个页面上，即注册页面。我该怎么做？

Answer 1

我在使用 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>

但是，一旦脚本标签出现在您的 < head > 中，您将面临它在每个页面上显示的相同问题。

技巧是您只将其插入到您需要的组件的 <head> 中。有很多方法可以做到这一点，但我最终参考了这个。

您可以将其放入组件的方法中并在加载组件时调用该方法。

这样它只会显示在您需要的页面上。