无法使用 vue-recaptcha-v3

Question

我是 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 />

我有这个错误：

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

我想我的方法非常简单。我怎样才能实现我想做的事？

Answer 1

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

根据文档，这些是我采取的对我有用的步骤：

1. 为您的站点注册 API 密钥对。

2. 对于Label，输入键的标签（例如Codesandbox Demo）

3. 对于reCAPTCHA 类型，选择reCAPTCHA v3。

4. 对于Domains，输入将使用密钥的域（例如，csb.app对于 Codesandbox），然后单击+图标。

5. 选中接受 reCAPTCHA 服务条款复选框。

6. 单击“提交”。

在您的组件中，使用 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>

演示