如何在Vue 3中使用reCaptcha v2？

Question

我已经尝试了很多次在我的Vue 3项目中添加reCaptcha。如果有人知道如何在vue 3中添加reCaptcha，请帮助我。

我尝试安装了vue-reCaptcha npm包，但它没有起作用。我想添加“我不是机器人”的复选框。

- Abhinand K

---

请明确您的具体问题或提供额外的细节，以准确突出您所需要的内容。目前的描述方式让人难以确定您的具体需求。 - undefined

Answer 1

按照以下步骤在Vue3应用程序中使用reCAPTCHA。

1. 收集API密钥-您可以在此处注册（https://developers.google.com/recaptcha/intro）
2. 在终端中运行以下命令：

Using Yarn: "yarn add vue-recaptcha"
Using NPM: "npm i vue-recaptcha"

这是你可以跟随的代码片段。

<template>
  <VueRecaptcha
    :sitekey="siteKey"
    :load-recaptcha-script="true"
    @verify="handleSuccess"
    @error="handleError"
  ></VueRecaptcha>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import { VueRecaptcha } from 'vue-recaptcha';

export default defineComponent({
  name: 'ReCaptcha',
  components: {
    VueRecaptcha
  },
  setup() {
    const siteKey = computed(() => {
      return 'yourSiteAPIKey';
    });

    const handleError = () => {
      // Do some validation
    };

    const handleSuccess = (response: string) => {
     // Do some validation
    };

    return {
      handleSuccess,
      handleError,
      siteKey,
    };
  }
});
</script>

请前往文档了解有关您可以使用的属性和方法的更多信息：https://github.com/DanSnow/vue-recaptcha#readme

- Khaled Md Tuhidul Hossain

---

出现错误。"模块 'vue-recaptcha' 没有导出成员 'VueRecaptcha'。你是不是想使用 'import VueRecaptcha from "vue-recaptcha"' 代替？" - undefined

@AbhinandK 你能分享一下你的 package.json 文件中的 "devDependencies" 部分吗？谢谢！ - undefined

}, "dependencies": { "vue": "^3.3.4", "vue-recaptcha": "^3.0.0-alpha.5" }, "devDependencies": { "@tsconfig/node18": "^2.0.1", "@types/node": "^18.16.17", "@vitejs/plugin-vue": "^4.2.3", "@vue/tsconfig": "^0.4.0", "npm-run-all": "^4.1.5", "typescript": "~5.0.4", "vite": "^4.3.9", "vue-tsc": "^1.6.5" } - undefined

@AbhinandK 所以我找到了， npm文档中有一个拼写错误，我们必须阅读 useReCaptcha 而它被写成了 useRecaptcha。更改它可能解决问题。 - undefined

Answer 2

根据您在下面第一个答案中的回复，看起来您正在使用vue-recaptcha 3.0.0-alpha版本。您应该使用https://www.npmjs.com/package/vue-recaptcha/v/2.0.3这个版本，因为它可能是最稳定的版本。

尽管如此，这个版本的文档说明需要将提交按钮与vue-recaptcha一起包装起来。

            <VueRecaptcha
              class="full-width"
              :sitekey="siteKey"
              :load-recaptcha-script="true"
              @verify="handleSuccess"
              @error="handleError"
            >
              <button type="submit"> Submit </button>
            </VueRecaptcha>

这不是你可能想要的复选框，但这个应该可以工作。

- VaughnVoyage