vue-recaptcha

1. 简介

vue-recaptcha是一个基于Vue.js的Google reCAPTCHA v2和v3的封装库。Google reCAPTCHA是一项验证服务，旨在确定用户是人类还是机器。它可以用于防止恶意机器人攻击、垃圾邮件和其他恶意行为。vue-recaptcha为我们提供了简便的方法来集成和使用Google reCAPTCHA。

在本篇文章中，我们将介绍如何在Vue.js应用程序中使用vue-recaptcha，并详细解释其核心概念和用法。

2. 安装

可以通过npm或yarn来安装vue-recaptcha：

npm install vue-recaptcha

或

yarn add vue-recaptcha

3. 配置

在使用vue-recaptcha之前，我们需要先进行一些配置。

首先，我们需要在Google reCAPTCHA网站上注册一个reCAPTCHA密钥：https://www.google.com/recaptcha 。

然后，在Vue.js的应用程序中，我们需要在main.js文件中引入vue-recaptcha，并使用我们的reCAPTCHA v2或v3密钥进行配置：

import Vue from 'vue'
import VueRecaptcha from 'vue-recaptcha'

Vue.use(VueRecaptcha, { sitekey: 'YOUR_RECAPTCHA_SITEKEY' })

请记得将YOUR_RECAPTCHA_SITEKEY替换为您自己的reCAPTCHA密钥。

4. 使用vue-recaptcha

4.1 reCAPTCHA v2

reCAPTCHA v2是基于用户交互的人机验证方法。它要求用户点击一个复选框来证明自己是人类。

在我们的Vue组件中，可以使用vue-recaptcha组件来创建reCAPTCHA v2表单：

<template>
  <div>
    <vue-recaptcha @verify="onVerify"></vue-recaptcha>
    <button @click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  methods: {
    onVerify(response) {
      // 验证通过后的回调函数
      console.log(response)
    },
    submitForm() {
      // 验证表单
      this.$refs.recaptcha.execute()
    }
  }
}
</script>

在上面的代码中，我们在template中使用了vue-recaptcha组件，并为verify事件绑定了一个回调函数onVerify。当reCAPTCHA验证通过时，它将自动调用该函数，并传递一个表示验证成功的响应参数。

我们还添加了一个按钮用于提交表单。在点击该按钮时，我们调用this.$refs.recaptcha.execute()方法来触发reCAPTCHA验证。

4.2 reCAPTCHA v3

reCAPTCHA v3是基于用户行为的人机验证方法。它不再需要用户交互，而是通过收集用户在网站上的行为模式来进行验证。

在我们的Vue组件中，可以使用vue-recaptcha组件来创建reCAPTCHA v3的验证方法：

<template>
  <div>
    <button @click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  methods: {
    submitForm() {
      this.$recaptcha('v3-action-name')
        .then((response) => {
          // 验证通过后的回调函数
          console.log(response)
          // 在这里可以对响应进行处理
        })
    }
  }
}
</script>

在上面的代码中，我们通过调用this.$recaptcha('v3-action-name')方法来获取reCAPTCHA v3的验证结果。v3-action-name是一个用于标识验证行为的字符串。

请注意，reCAPTCHA v3的验证结果是一个包含分数和其他相关信息的对象。

5. 高级用法

5.1 自定义配置

vue-recaptcha还支持一些自定义配置选项。在使用插件时，可以通过第二个参数传递这些选项：

Vue.use(VueRecaptcha, { sitekey: 'YOUR_RECAPTCHA_SITEKEY', size: 'normal', theme: 'dark' })

上面的代码中，我们设置了reCAPTCHA的大小为normal，主题为dark。可以根据自己的需求进行调整。

5.2 刷新验证码

有时，我们可能需要在某些特定情况下手动刷新验证码。为了实现这一点，可以使用vue-recaptcha插件提供的一个方法reset()。例如：

<template>
  <div>
    <vue-recaptcha ref="recaptcha"></vue-recaptcha>
    <button @click="refreshCaptcha">刷新验证码</button>
  </div>
</template>

<script>
export default {
  methods: {
    refreshCaptcha() {
      this.$refs.recaptcha.reset()
    }
  }
}
</script>

在上面的代码中，我们为刷新按钮添加了一个点击事件，并在点击时通过this.$refs.recaptcha.reset()方法来手动刷新reCAPTCHA验证码。