谷歌验证码recaptcha接入

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>

谷歌验证码recaptcha接入

猜你喜欢