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

Question

我使用这个包: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 获取 token

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

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

也许我必须更改此设置:Vue.use(VueReCaptcha, { siteKey: 'xxxxxxxxxxxxxxxxx' })。似乎它仍在安装到 Vue.use 。我想挂载到某个组件而不是vue根实例

如何解决这个问题？

更新

我尝试这样:

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

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

Answer 1

我在使用 npm 包时遇到了同样的问题，这非常烦人。

最终，我决定不使用该软件包并关注 Google's documentation .

这行在这里:

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

相当于 npm 包中的这一行:

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

您只需将此行添加到您的 < head > 中即可使验证码正常工作:

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

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

黑客的做法是，您只将其插入到您需要的组件的 中。有很多方法可以做到这一点，但我最终引用了 this .

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

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