在注册页，往往需要通过短信或者邮箱进行验证再注册。
如果短信平台接口被恶意调用，短信通道金额会被严重消耗，严重影响平台的利益。
recaptcha V3 是谷歌开发的一款可以验证人机交互是否合法的插件。它是一个JS API，我们可以自定义一个0-1分数，来决定本次交互的合法性。假设我们自定义分数为0.9，当谷歌给本次交互打的分数低于0.9时，则表示本次交互不合法，从而达到拦截目的。
用法
- 创建秘钥。可参考 blog.csdn.net/weixin_5912…
公钥Site Key 和 私钥Secret Key：
Site Key=XXXXXXXXXXXXXXXXXX
Secret Key=AAAAAAAAAAAAAAAAAA
- 引入谷歌提供的 script，将公钥放上去
<script src="https://www.recaptcha.net/recaptcha/api.js?render=XXXXXXXXXXXXXXXXXX"></script>
注意：国内使用，需要将 www.google.com 替换成 www.recaptcha.net
- 在需要人机验证的操作上调用
grecaptcha.execut，生成谷歌返回的token
const token = await window.grecaptcha.execute('XXXXXXXXXXXXXXXXXX', { action: 'login' })
- 通过后端接口验证
token是否有效，如果成功再进行提交/登录等操作
console.log({token})
const formData = new FormData()
formData.append('token', token)
const { data, code, msg } = await robotVerApi.post({
body: formData
})
// 校验成功，进行注册等其他操作
遇到的问题
在未加入人机验证之前，我们遇到以下问题
- 短信验证平台被恶意轰炸
- 注册数量暴增（注册邀请人成功后有返利的原因）
解决办法
控制短信验证平台的频繁请求。
控制了短信验证之后，注册接口也就不会频繁请求了。
一开始的解决办法：
-
前端发起人机校验
-
后端进行token认证，返回状态
-
校验成功，前端请求短信平台
以上能防止一些恶意的页面频繁操作，但是通过数据发现短信平台接口还在暴增，也就是说攻击者绕过前面两个步骤，通过脚本在轰炸短信平台。
所以我们改把前端发送短信的操作放在后端，避免脚本攻击，步骤如下：
- 前端发起后端自定义的短信请求接口
- 后端人机校验，token认证成功
- 后端请求短信平台
// 获取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('邮箱已发送')
}
