如何在Vue 3中使用reCaptcha v2？尝试vue-reCaptcha包失败求助

方案一：直接使用官方原生集成（不依赖第三方npm包） #

这种方法兼容性最好，能避免第三方包的版本适配问题：

1. 获取reCAPTCHA密钥
   去谷歌reCAPTCHA控制台注册应用，选择v2类型的「我不是机器人」复选框，获取Site Key和Secret Key（后端验证用）。

2. 引入官方脚本
   可以在项目的public/index.html中添加全局脚本：

   <script src="https://www.google.com/recaptcha/api.js" async defer></script>
   

   或者在需要的组件内动态加载（适合按需使用的场景）：

   import { onMounted } from 'vue'
   
   onMounted(() => {
     const script = document.createElement('script')
     script.src = 'https://www.google.com/recaptcha/api.js'
     script.async = true
     script.defer = true
     document.body.appendChild(script)
   })
   

3. 添加验证复选框
   在组件模板中插入验证容器，替换成你的Site Key：

   <div class="g-recaptcha" data-sitekey="你的Site Key"></div>
   

4. 获取验证令牌并提交
   谷歌会自动生成全局grecaptcha对象，在表单提交时获取验证令牌：

   const handleSubmit = () => {
     const token = grecaptcha.getResponse()
     if (!token) {
       alert('请完成人机验证')
       return
     }
     // 将token与表单数据一起发送给后端，后端用Secret Key验证令牌有效性
   }
   

方案二：使用适配Vue3的vue-recaptcha包 #

如果偏好组件化方式，确保安装支持Vue3的版本：

1. 安装正确版本

   npm install vue-recaptcha@next
   

2. 组件内使用

   import { VueReCaptcha } from 'vue-recaptcha'
   import { ref } from 'vue'
   
   const recaptchaToken = ref('')
   
   const handleVerify = (token) => {
     recaptchaToken.value = token
     // 验证成功，可继续表单提交逻辑
   }
   
   const handleExpired = () => {
     alert('验证已过期，请重新完成')
   }
   

   模板部分：

   <VueReCaptcha 
     sitekey="你的Site Key" 
     @verify="handleVerify" 
     @expired="handleExpired"
   />
   

注意事项 #

• 若遇到grecaptcha未定义的报错，可通过监听脚本加载完成事件确保对象可用：

  window.onload = () => {
    // 这里可执行依赖grecaptcha的逻辑
  }
  

• 后端必须用Secret Key调用谷歌的验证接口，判断令牌有效性，前端令牌仅用于传递，不能直接作为验证依据。

内容的提问来源于stack exchange，提问作者Abhinand K