无法使用 vue-recaptcha-v3答案

【问题标题】：Impossible to use vue-recaptcha-v3无法使用 vue-recaptcha-v3
【发布时间】：2020-12-27 11:51:26
【问题描述】：

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

我有这个错误：

(英文："This key is not activate for the invisible captcha").

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

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

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

基于docs，这些是我采取的对我有用的步骤：

Sign up for an API key pair 为您的网站。
对于标签，输入键的标签（例如，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>

demo

【讨论】：