不可能使用vue-recaptcha-v3

Dom 发表于 Dev

判断

我是vue.js 3的初学者。我正在尝试使用似乎很流行的vue-recaptcha-v3。但是我不知道如何使用它。

在我的main.js，我有：

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

const app = createApp(App)
  .use(store)
  .use(router)
  .use(VueReCaptcha, { siteKey: '6Lc_______________ipg' })

在我的表单中，我刚刚添加了以下内容：

<VueReCaptcha />

我有这个错误：

（用英语：“此按键未激活，用于不可见的验证码”）。

我想我的方法非常简单。但是我没有找到任何关于此的教程。谢谢你的帮助。

东尼19

这似乎表明配置了错误的站点密钥。另外，没有VueReCaptcha组件（vue-recaptcha-v3只有一个提供API方法的插件），因此请不要添加<VueReCaptcha />到模板中。

根据文档，以下是我为我工作的步骤：

为您的站点注册一个API密钥对。
对于标签，输入密钥标签（例如Codesandbox Demo）
对于reCAPTCHA类型，请选择reCAPTCHA v3。
对于“域”，输入将在其中使用密钥的域（例如，csb.app对于Codesandbox），然后单击+图标。
选中接受reCAPTCHA服务条款框。
点击提交。

在您的组件中，使用Composition API设置您的reCAPTCHA：

<template>
  <button @click="recaptcha">Execute recaptcha</button>
</template>

<script>
import { useReCaptcha } from 'vue-recaptcha-v3'

export default {
  setup() {
    const { executeRecaptcha, recaptchaLoaded } = useReCaptcha()

    const recaptcha = async () => {
      await recaptchaLoaded()
      const token = await executeRecaptcha('login')
      console.log({ token })
    }

    return {
      recaptcha
    }
  },
}
</script>

演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。