使用Google reCAPTCHA防止机器注册_recaptcha属性中 badge有啥用

本文作者：陈进坚
博客地址：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>
1

由于国家防火墙的原因，大陆的网站需要将js替换为国内的js地址（js是在客户端浏览器执行的，服务器能翻墙也不行）

https://www.recaptcha.net/recaptcha/api.js
1

生成响应码

<script>
grecaptcha.ready(function() {

	grecaptcha.execute('你的Site key', {action: 'action_name'})

.then(function(token) {

// 将这个生成的token传给后台

	});

});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

后台验证

将前端传过来的响应码和你的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);    
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

隐藏reCAPTCHA图标

根据reCAPTCHA的服务条款（即你必须同意），您必须告知游客有关网站上的验证码实现

但是有时候在手机页面这么大的一个图标确实会影响到页面效果，不得不隐藏的时候可以在前端做一下处理

• 设置data-badge属性inline

  <button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" /> 
  1

• 添加CSS

  .grecaptcha-badge { 
      display: none; 
  } 
  1
  2
  3