防止验证码轰炸_谷歌人机校验_recaptchaV3

在注册页，往往需要通过短信或者邮箱进行验证再注册。
如果短信平台接口被恶意调用，短信通道金额会被严重消耗，严重影响平台的利益。

recaptcha V3 是谷歌开发的一款可以验证人机交互是否合法的插件。它是一个 JS API，我们可以自定义一个 0-1 分数，来决定本次交互的合法性。假设我们自定义分数为0.9，当谷歌给本次交互打的分数低于0.9时，则表示本次交互不合法，从而达到拦截目的。

用法

1. 创建秘钥。可参考 https://blog.csdn.net/weixin_59127121/article/details/127092549?spm=1001.2101.3001.6650.5

公钥Site Key 和 私钥Secret Key：

Site Key=XXXXXXXXXXXXXXXXXX
Secret Key=AAAAAAAAAAAAAAAAAA

2. 引入谷歌提供的 script，将Site Key放上去

<script src="https://www.recaptcha.net/recaptcha/api.js?render=XXXXXXXXXXXXXXXXXX"></script>

:::info
注意：国内使用，需要将 www.google.com 替换成 www.recaptcha.net
:::

3. 在需要人机验证的操作上调用grecaptcha.execut，填入Site Key，生成谷歌返回的token

const token = await window.grecaptcha.execute('XXXXXXXXXXXXXXXXXX', {
  action: 'login',
});

4. 通过后端接口验证token是否有效，如果成功再进行提交/登录等操作

console.log({ token });
const formData = new FormData();
formData.append('token', token);
const { data, code, msg } = await robotVerApi.post({
  body: formData,
});
// 校验成功，进行注册等其他操作

遇到的问题

在未加入人机验证之前，我们遇到以下问题

1. 短信验证平台被恶意轰炸
2. 注册数量暴增（注册邀请人成功后有返利的原因）

解决办法

控制短信验证平台的频繁请求。
控制了短信验证之后，注册接口也就不会频繁请求了。

一开始的解决办法：

1. 前端发起人机校验
2. 后端进行 token 认证，返回状态
3. 校验成功，前端请求短信平台

以上能防止一些恶意的页面频繁操作，但是通过数据发现短信平台接口还在暴增，也就是说攻击者绕过前面两个步骤，通过脚本在轰炸短信平台。

所以我们改把前端发送短信的操作放在后端，避免脚本攻击，步骤如下：

1. 前端发起后端自定义的短信请求接口
2. 后端人机校验，token 认证成功
3. 后端请求短信平台

// 获取token
const token = await window.grecaptcha.execute('XXXXXXXXXXXXXXXXXX', {
  action: 'login',
});

// 将token和邮箱传给后端，后端认证token并请求短信平台
const { data, msg, code } = await backendCustomApi.post({
  body: { email, token },
});

// 将短信平台的状态返回
if (code === '000') {
  console.log('邮箱已发送');
}

参考:

• https://developers.google.com/recaptcha/docs/v3
• https://xushanxiang.com/recaptcha-v3.html
• https://blog.csdn.net/weixin_59127121/article/details/127092549?spm=1001.2101.3001.6650.5
• https://dun.163.com/news/p/b613338178b84e2ea5029e6cff150724