本文前提:需翻墙需翻墙需翻墙~
先了解下什么是Google reCAPTCHA?
官方介绍了reCAPTCHA是一项免费服务，可保护您的网站免受垃圾邮件和滥用的侵害。reCAPTCHA使用高级风险分析引擎和适应性挑战，以防止自动化软件参与您网站上的滥用行为。这样做是为了让您的有效用户轻松通过。终极目的，就是区分正常人和机器的操作。
image.png
reCAPTCHA v3
reCAPTCHA v3是一种最新的行为验证码(无感知验证)，识别效果大大提升，被破解的概率大幅下降。可帮助您在无需用户交互的情况下检测网站上的滥用流量。reCAPTCHA v3不会显示验证码挑战，而是返回score分数，因此您可以为您的网站选择最合适的操作。
reCAPTCHA的作用
区分人机行为的作用不言而喻。互联行为的注册、登录、发帖、领优惠券、投票等等应用场景，都有被机器刷造成各类损失的风险，如果不对各类机器垃圾的行为加以防范，灌水内容、垃圾注册、恶意登录、刷票、撞库、活动作弊、垃圾广告、爬虫、羊毛党等用户行为一旦发生，将对产品自身发展、用户体验造成极大的影响。
简要梳理下使用过程中的验证原理(v2/v3工作原理一致)
A为项目登录页面.
B为Google reCAPTCH服务地址
C为后端接口
..........................................................
当需要验证的时候，A页面发送publickey到B。
B接收到publickey后返回一个Token到A，之后A将接收到的Token发送到C。
最后C将TOKEN和预先留有的SecretKey等参数再次发送到B，进行验证。
请求成功后，C 得到 B 返回的验证结果，根据结果即可判断客户端是否为机器人操作。
官方文档:https://developers.google.com/recaptcha/docs/invisible
reCaptcha在各个版本中的demo:https://recaptcha-demo.appspot.com/
接入调用详情
1.对需要接入验证的网站 申请公秘钥
后台管理 申请/查看reCaptcha公秘钥:https://google.com/recaptcha/admin/
image.png
image.png
2.开始部署客户端和服务端
国内的网站需要将js替换为国内的js地址（js是在客户端浏览器执行的，服务器能翻墙也不行）
https://www.recaptcha.net/recaptcha/api.js
客户端
这里记录的是v2与v3一起使用
2.1、在你要添加reCaptcha的页面添加script标签
//v3的使用
<script src="https://recaptcha.net/recaptcha/api.js?render=v3公钥">
//v2采用JS渲染div使用
<script src="https://recaptcha.net/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
2.2、觉得合适的位置加入reCaptcha验证框
<div id='recaptchaDiv'></div>//js渲染div
<input type="hidden" class="g-recaptcha" data-sitekey="sitekey" data-callback="submitComment" data-size="invisible" data-badge="inline" />//传回的值
2.3、v2渲染调用将token绑定到input里
<script type="text/javascript">
var onloadCallback = function () {
grecaptcha.render('recaptchaDiv', {
'sitekey': "v2公钥",
'callback': function (token) {
submitComment(token);
}
});
};
</script>
2.4、v3渲染绑定按钮将参数一起发送
grecaptcha.ready(function () {
grecaptcha.execute("v3公钥", { action: 'login' }).then(function (token) {
Recaptcha.value = token;
var data = $('form').serializeArray();
$.ajax({
type: 'post',
dataType: 'json',
url: '服务端',
data: data,
timeout: 15000,
success: function (data) {
if (data['code'] == 0) {
if (data['url']) {
location.href = data['url'];
}
layer_errmsg(data['msg']);
} else {
layer.msg(data['msg'], {
time: 3000 //3秒关闭
}, function () {
if (data['url']) {
location.href = data['url'];
}
});
}
$("body").removeClass("xf-lock");
$(".xf-loading").remove();
},
error: function (data) {
$("body").removeClass("xf-lock");
$(".xf-loading").remove();
}
})
});
服务端
3.1将客户端传到服务端的g-recaptcha-response的值和秘钥值,发送至goodle reCAPTCHA端;
//v2验证
$secretV2 = '秘钥';
$tokenV2 = $data['g-recaptcha-response'];//传回的g-recaptcha-response的值
$url = 'https://recaptcha.net/recaptcha/api/siteverify?secret=' . $secretV2 . '&response=' . $tokenV2;
$curl = cmf_curl_get($url);
//v3验证
$secret = '秘钥';
$token = $data['token'];//v3传回的token令牌的值
$url = 'https://recaptcha.net/recaptcha/api/siteverify?secret=' . $secret . '&response=' . $token;
$curl = cmf_curl_get($url);
3.2返回的结果
image.png
参数说明
{
success: true
challenge_ts: "2019-03-06T08:33:46Z",
score: 0.9,//v3的话则返回评分参数
hostname: "你绑定的域名",
action:'指定的动作,方便在google后台查询分辨是哪些动作'
}
3.3根据返回的结果来进行下一步的判断
网友评论