谷歌验证码recaptcha接入
recaptcha是一项谷歌免费验证码服务，本次接入的是reCaptcha v2
1、首先选择reCaptcha的类型，注册申请api密钥对，包含站点密钥和密钥组成，站点密钥用于在网站调用reCAPTCHA服务，密钥则是验证应用后端和 reCAPTCHA 服务校验用户返回的响应这两者间通信安全
2、接着接入到需要应用谷歌验证码的应用中
- 最简单的接入方法：
注意script标签载入js必须使用https协议
- 第二种方法是明确指定
指定回调方法，他会在谷歌所有依赖被载入时候被调用
var onloadCallback = function() {
alert("grecaptcha is ready!");
};
引入js资源，url中设定回调函数名称(第一步的回调名称)
以下是api.js的参数
| 参数 | 值 | 描述 |
|---|---|---|
| onload | - | 可选，所有的依赖项加载后要执行的回调函数名称 |
| render | explicit onload |
可选，是否显示呈现验证码部件，这将在它找到的第一个g-recaptcha标记中呈现 |
| hl | - | 可选，强制组件以特定语言呈现，如果没有指定，则自动检测用户语言 |
3、在用户验证不是机器人后，会响应一串token，对于web用户，有如下三种方式获取token
- 直接$_REQUEST['g-recaptcha-response']获取到用户post过来的数据
- 使用grecaptcha.getResponse(
opt_widget_id
)方法，当用户验证之后 - 指定了回调函数时，作为回调函数的参数(本次使用方法)
4、获取到token响应之后，需要向下面的API发起请求验证
URL: https://www.google.com/recaptcha/api/siteverify
METHOD：POST
| POST 参数 | 描述 |
|---|---|
| secret | 必须，申请的密钥 |
| response | 必须，用户响应的token |
| remoteip | 可选，用户ip |
api响应内容
{
"success": true|false,
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string, // the hostname of the site where the reCAPTCHA was solved
"error-codes": [...] // optional
}
-----------------------------------------------------------------------------------------
更新：
最近更换中也会遇到问题之一就是移动端设备适配问题，特别是在webview页面中使用的checkbox类型谷歌验证特别难以适配，造成前端工作繁琐，于是我们在移动端的页面中使用的是invisible 类型，他和前者区别可以通过以下图片简单区分：
以下是invisible的样式，相比前者少了选择框（我不是机器人），所以在适配上也少了很多工作，而接入的工作也是差不多，
以下是官方提供的一个示例：