本文作者：陈进坚
博客地址：https://jian1098.github.io
CSDN博客：https://blog.csdn.net/c_jian
简书：https://www.jianshu.com/u/8ba9ac5706b6
联系方式：jian1098@qq.com
环境要求
- 能翻墙的电脑
- 域名
验证原理
在谷歌recaptcha申请验证密钥，配置好服务器的域名，在需要验证的表单中嵌入google reCAPTCHA ,提交表单的时候将验证成功生成的响应码传给后台，后台将响应码post到谷歌的服务器验证地址，谷歌服务器将返回验证结果。生成响应码的页面域名必须是在谷歌页面配置的域名才能生成，只有ip也不行。google reCAPTCHA在web端有3种形式的验证
1.reCAPTCHA v3
在网页加载的时候生成响应码，不需要用户进行任何操作。生成响应码的时候会稍有延迟，比网页加载完成会慢一点，确保了他人利用程序获取html代码的方式不会获取响应码。加入reCAPTCHA v3 的页面会有类似下面的图标
2.reCAPTCHA v2 Checkbox 点击复选框
用户点击复选框进行验证成功后生成响应码，图标如下
3.reCAPTCHA v2 Invisible 自定义按钮
开发人员自定义验证的动作，验证成功后调用生成响应码的js代码生成响应码即可。图标与第1种相同。
申请密钥
打开网页 https://www.google.com/recaptcha/admin 登录谷歌账号，在Label下面的输入项目名，然后选择reCAPTCHA的类型，点击Register即可注册完成，完成后可以得到Site key和Secret key。
配置域名
在上一步注册好之后的页面底下Domains的框中输入需要验证的域名，只有输入的域名网站才有资格生成你的响应码。
插入前端代码
在申请密钥完成的页面中按照给出的步骤Step1加入前端代码,比如如果是v3类型的验证码：
在html头部引入js
<script src='https://www.google.com/recaptcha/api.js?render=你的Site key'></script>
由于国家防火墙的原因，大陆的网站需要将js替换为国内的js地址（js是在客户端浏览器执行的，服务器能翻墙也不行）
https://www.recaptcha.net/recaptcha/api.js
生成响应码
<script>
grecaptcha.ready(function() {
grecaptcha.execute('你的Site key', {action: 'action_name'})
.then(function(token) {
// 将这个生成的token传给后台
});
});
</script>
后台验证
将前端传过来的响应码和你的Secret key发送到谷歌验证地址进行验证，判断返回数据即可
大陆的需要将验证链接 https://www.google.com/recaptcha/api/siteverify 改为 https://www.recaptcha.net/recaptcha/api/siteverify
php示例：
<?php
function send_post($url, $post_data)
{
$postdata = http_build_query($post_data);
$options = array(
'http' => array(
'method' => 'POST',
'header' => 'Content-type:application/x-www-form-urlencoded',
'content' => $postdata,
'timeout' => 15 * 60 // 超时时间（单位:s）
)
);
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
return $result;
}
$post_data = array(
'secret' => '你的Secret key',
'response' => $_POST["g-recaptcha-response"] //前端传过来的响应码
);
$recaptcha_json_result = send_post('https://www.google.com/recaptcha/api/siteverify', $post_data);
$recaptcha_result = json_decode($recaptcha_json_result);
//在这里处理返回的值
var_dump($recaptcha_result);
?>
隐藏reCAPTCHA图标
根据reCAPTCHA的服务条款（即你必须同意），您必须告知游客有关网站上的验证码实现
但是有时候在手机页面这么大的一个图标确实会影响到页面效果，不得不隐藏的时候可以在前端做一下处理
-
设置
data-badge属性inline<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" /> -
添加CSS
.grecaptcha-badge { display: none; }
