vue3+recaptcha2谷歌人机验证组件

1.安装插件

npm install vue3-recaptcha2

2.

<vue-recaptcha
            :sitekey="siteKey"
            size="normal"
            theme="light"
            @verify="onVerify"
            @expire="recaptchaExpired"
            @fail="recaptchaFailed"
            v-if="isRecaptcha"
        />


<script lang="ts" setup>
// reCAPTCHA 组件
import VueRecaptcha from 'vue3-recaptcha2'

//拿到网站密钥
const siteKey = '6LflA-MqAAAAAChtyQ0Xsn337ycrybSGkHMEbPmw'

//获取token发送到后端验证
const onVerify = (token: string) => {
  console.log('Token:', token) // 发送到后端验证
}

//过期后执行动作
const recaptchaExpired = () => {
      
}
 
//失败执行动作
const recaptchaFailed = () => {
     
}

<script>

3.

使用前需注意: 
1.reCaptcha官网网站为:https://developers.google.com/recaptcha/(需要翻墙)
2.在国内使用的话,需要将demo中所有的www.google.com替换成www.recaptcha.net不然无法使用reCAPTCHA