如何在vue 3中使用reCaptcha v2？

Question

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

我尝试安装 vue-reCaptcha npm 包，但没有成功。我想添加“我不是机器人”复选框。

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

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>