国内使用reCaptcha验证码的完整教程

reCaptcha是Google公司的验证码服务，方便快捷，改变了传统验证码需要输入n位失真字符的特点。reCaptcha在使用的时候是这样的：

只需要点一下复选框，Google会收集一些鼠标轨迹、网络信息、浏览器信息等等，依靠后端的神经网络判断是机器还是人，绝大多数验证会一键通过，无需像传统验证码一样。个人感觉比Geetest要好一些。

但是reCaptcha使用了google.com的域名，这个域名在国内是被墙的，如果使用可以用Nginx配置反向代理，本文的教程无需自行配置，我们直接使用Google官方的反向代理。

获取代码（这一步需要访问国外网站，以后不再需要）：首先要有Google账号，登录账号并进入这里：https://www.google.com/recaptcha/admin

在register a new site表单里填写验证名（随便命名）、域名（你要使用reCaptcha 的域），type选择v2，下面的钩钩打上，然后Register即可注册。

接着打开你刚刚创建的验证，找到Keys，记住你的site-key和select

客户端部署代码：

在你要添加reCaptcha的页面添加script标签：

接着在你要显示reCaptcha验证框的地方添加div容器：

这样就完成了客户端的部署。

服务端部署代码：

服务端只需要将客户端点击验证码后传回的g-recaptcha-response值和ip以及secret传给Google的API： https://recaptcha.net/recaptcha/api/siteverify 即可

刷新页面，就可以看到验证码已经创建好了：

是不是很简单？当然有的人不喜欢把一堆属性加在dom上，更希望通过js API来使用，没关系，我们来看看显示加载是怎么玩的。

第一步还是引入js资源文件，与上面一样，这个时候我们创建一个验证码容器，其实就是一个装载验证码组件的盒子，如下：

标签没硬性要求，但一定要加一个id，在js中我们会使用到这个id，接下来是在js中做初始化工作：

});

刷新页面，你会发现验证码成功展示出来了。聪明的同学已经发现了，grecaptcha.render()就是验证码组件初始化方法，它接受两个参数，前者为组件容器id，也就是我们在div上添加的robot；第二个参数是一个对象，也就是组件相关配置。

有同学就纳闷了，为啥通过API调用显示加载可以加这么多属性，dom形式自动加载能不能加这些配置？当然能，以sitekey为例，在作为标签属性时你得写作data-sitekey，同理，theme用在标签上时也得加上data-前缀，其它属性配置全部如此。

在解释这些属性前，我先附上一个完整的例子，大家直接复制替换下公钥，这样下面的解释可以同步修改理解：

验证是否通过

var callback = function (args) {

}; var expiredCallback = function (args) {

}; var errorCallback = function (args) {

};

var widgetId; var onloadCallback = function () {

};

function getResponseFromRecaptcha() {

};

配置参数说明 sitekey(data-sitekey)：客户端秘钥，也就是我们创建的秘钥，这是必填项。

theme(data-theme)：验证码组件主题色，默认light，还有一个dark可选，颜色对比如下：

size(data-size)：验证码尺寸规则，默认normal也就是长方形，可选值compact正方形，如下：

callback(data-callback)：验证成功回调，比如用户点击了我不是机器人复选框，弹出了图片，用户在选择完图片点击右下角的验证，如果验证成功便会触发此回调，比如上方例子验证成功后输出了验证成功以及一大段乱码字符，这段字符官方称为 response token，后端会使用到这个token，我们在后面具体说。

expired-callback(data-expired-callback)：过期回调，如果用户第一次验证成功后页面放置一段时间，当前验证就会过期，一旦过期谷歌会自动调用过期回调，如下：

error-callback(data-error-callback)：错误回调，验证过程中如果出现错误便会执行这个回调。 API说明 我们已经通过上面的例子了解了初始化组件的API，谷歌验证码一共也就提供了三个API，如下：

-

-

- 获取组件验证状态的api，同样接受一个验证码id作为参数，用于获取指定id的验证码验证状态，如果不填，则默认获取第一个验证码状态。获取的结果有两种情况，如果成功，拿到的也就是前面我们说到的response token，如果失败则拿到的是空字符串。

在上文例子我们同样提供了这个方法，大家可以在验证成功和过期两种情况下分别点击验证是否通过的按钮查看不同结果。

有同学一定会纳闷getResponse方法有啥用，说个很简单的例子，用户登录输完了账号密码，只要点击提交按钮，我们就可以通过此方法判断用户有没有提前通过验证，如果通过了再请求登录接口。 - url参数说明 细心的同学一定发现上方例子提供的js 引用后缀有点不同，其实js引用地址也接受三个参数，也不是很复杂，我们来解释下分别表示啥意思：