谷歌验证码recaptcha接入

recaptcha是一项谷歌免费验证码服务，本次接入的是reCaptcha v2

 

1、首先选择reCaptcha的类型，注册申请api密钥对，包含站点密钥和密钥组成，站点密钥用于在网站调用reCAPTCHA服务，密钥则是验证应用后端和 reCAPTCHA 服务校验用户返回的响应这两者间通信安全

 

2、接着接入到需要应用谷歌验证码的应用中

• 最简单的接入方法：

关于recaptcha标签的属性和render参数，详情可见任意门

         注意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的样式，相比前者少了选择框（我不是机器人），所以在适配上也少了很多工作，而接入的工作也是差不多，

 

以下是官方提供的一个示例：

   

     Name: (required) 
     

     submit