谷歌 google验证码 reCAPTCHA V2 复选框形式 对接

申请key地址：google

v2版就是常见的验证方式，v3是通过判断评分的方式，这里先看看v2的用法。

首先google官方文档： 文档提供的api链接国内是无法使用的，需要调整下：

https://www.google.com/recaptcha/api.js

将这段链接改为：

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

即可。

引入js

由于js我们可以异步引入，所以官方支持一个load回调，所以使用异步加载js文件的话，你的回调函数记得要写在加载js文件之前

官方引入示例：

<script src="https://www.recaptcha.net/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
</script>

可以看到onload对应一个onloadCallback,这个就是回调函数，我们初始化都在这个回调函数里。

render表示是否显式加载组件，默认值是onload，我们这里设置为explicit，表示不自动将验证模块渲染，我们自己手动初始化渲染。

正常使用前我们还需要了解下初始化函数：

初始化

grecaptcha.render("id",option);

有两个参数，第一个为元素的id，我们一般都是创建一个div元素，设置一个id，然后这个元素的id作为参数。

option为初始化配置，有好几个参数：

这里的回调函数其实都不大重要，因为要判断是否验证通过还有另一个方法会方便一些。

超时回调是当验证通过超过一定时间会有超时，然后需要重新验证。

现在参数知道了我们把引入的代码完整下：

<script >
function onloadCallback() {
        grecaptcha.render('sss', {
            'sitekey': '第一个key',
            'callback': onSubmit,
        });
    };
    function onSubmit(token){
      console.log(token)
    } 
</script> 
<script src = "https://www.recaptcha.net/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer > < /script>

回调函数写前面，验证成功后，回调函数会有一个token参数传入。

在这里，可以通过三个回调函数，也可以完成一些基本的验证操作。

但是一般来说，我们可能需要在点击提交按钮后判断验证是否通过，在进行提交。

所以我们还需要一个手动判断的方法：

grecaptcha.getResponse()

这个方法需要传入一个参数，这个参数就是recaptcha的id，官方文档称之为opt_widget_id，小部件id，这个id怎么获得呢？

其实grecaptcha.render初始化后就会return出一个id，这个id我们用一个变量保存即可。

<script >
var op_id = null;
function onloadCallback() {
        op_id = grecaptcha.render('sss', {
            'sitekey': '第一个key',
            'callback': onSubmit,
        });
    };
    function onSubmit(token){
      console.log(token)
    } 
</script> 

op_id变量保存了id，然后我们通过方法判断：

var isToken = grecaptcha.getResponse(op_id);

if(isToken.length){
  console.log("通过")；
}else {
  console.log("失败")；
}

grecaptcha.getResponse如果验证通过会返回一个token值，不通过则是一个空字段，所以通过length来判断是否通过，这个这个方法我们封装成一个函数，绑定在元素click事件上即可。

方法都搞定了，剩下的就是html元素渲染了，我们上面使用了一个id为sss的参数，所以我们要保证在页面中有一个id名为sss元素容器，一般为div

<div id="sss"></div>