recaptcha是一项谷歌免费验证码服务，本次接入的是reCaptcha v2
1、首先选择reCaptcha的类型，注册申请api密钥对，包含站点密钥和密钥组成，站点密钥用于在网站调用reCAPTCHA服务，密钥则是验证应用后端和 reCAPTCHA 服务校验用户返回的响应这两者间通信安全
2、接着接入到需要应用谷歌验证码的应用中
- 最简单的接入方法：
<script src="https://www.google.com/recaptcha/api.js" async defer></script> <div class="g-recaptcha" data-sitekey="your_site_key"></div>关于recaptcha标签的属性和render参数，详情可见任意门
注意script标签载入js必须使用https协议
- 第二种方法是明确指定
指定回调方法，他会在谷歌所有依赖被载入时候被调用
<script type="text/javascript">var onloadCallback = function() {alert("grecaptcha is ready!");};</script>引入js资源，url中设定回调函数名称(第一步的回调名称)
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"async defer></script>以下是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的样式，相比前者少了选择框（我不是机器人），所以在适配上也少了很多工作，而接入的工作也是差不多，
以下是官方提供的一个示例：
<html>
<head>
<script>function onSubmit(token) {alert('thanks ' + document.getElementById('field').value);}function validate(event) {event.preventDefault();if (!document.getElementById('field').value) {alert("You must add text to the required field");} else {grecaptcha.execute();}}function onload() {var element = document.getElementById('submit');element.onclick = validate;}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body><form>Name: (required) <input id="field" name="field"><div id='recaptcha' class="g-recaptcha"data-sitekey="your_site_key"data-callback="onSubmit"data-size="invisible"></div><button id='submit'>submit</button></form>
<script>onload();</script>
</body>
</html>
