Google reCAPTCHA 前端接入说明

关于个人网站接入 Google reCAPTCHA 网上有大量类似的文章,从 reCAPTCHA 注册申请到前后端验证,各方面说的比较详尽。但大部分都比较类似,对于特殊用法很少谈及。本文为我的博客接入 Google reCAPTCHA 时,对于前端呈现 reCAPTCHA 特殊要求的使用笔记。

在谈论具体使用前,先简述一下 reCAPTCHA  验证码工作流程。为了描述方便,将要接入 reCAPTCHA 的网站即我的博客 pzy.io 假设为 A,Google reCAPTCHA 假设为 G。当需要验证时,A 首先使用 Sitekey 向 G 发起一个请求,请求成功后 G 返回一个令牌 Token;接着 A 使用得到的Token,以及 SecretKey 等参数,再次向 G 发起一个验证请求,请求成功后,A 得到 G 返回的验证结果,根据结果即可判断客户端操作者是否为机器人。以下为流程图:

验证码-时序图
reCAPTCHA验证码-时序图

正如前文所述,个人网站接入 reCAPTCHA 的方法大同小异,关键是看前端呈现的要求。目前,根据我的博客(pzy.io)使用经历来看,前端使用 reCAPTCHA 有以下三种方式。

一、JS API 直接验证

JS 渲染即不改变前端网页原有 HTML 结构,通过直接使用 js 的方式实现 reCAPTCHA 接入和渲染,分为两个步骤。首先,在要使用 reCAPTCHA 的页面中引入 api.js 脚本:

<script src="https://recaptcha.net/recaptcha/api.js?render=siteKey"></script>

其中,siteKey 为网站公钥。其次,使用 JS API 向 reCAPTCHA 发起Token获取请求,仍然为 JS  脚本:

$("#submit-comment").click(function (e) { 
     grecaptcha.ready(function () { 
         grecaptcha.execute('sitekey', { action: '/' }).then(function (token) { 
             submitComment(token); 
         }); 
     }); 
});

其中 token 为 Google 返回的验证token,需要将它与其它(评论/登陆)参数一同传递给后端,完成验证。注意,使用该方式时,前端页面的右下脚出现很小的 reCAPTCHA 图标。

二、JS   渲染

与 JS  API   直接验证不同,JS 渲染需要在前端页面中添加 HTML 简单标签,假设为 recaptchaDiv,如下:

<div id='recaptchaDiv'></div>

接着仍然需要引入相关脚本,如下代码:

<script src="https://recaptcha.net/recaptcha/api.js?onloadCallback&render=explicit" async defer></script>

其中 onloadCallback 为回调参数,对应为函数,可以写下 JS 渲染内容,如下:

<script type="text/javascript">
     var onloadCallback = function() {
       //render grecaptcha
       grecaptcha.render('recaptchaDiv', {
         'sitekey': 'd33dde',
         'callback': function (token) {submitComment(token); 
         }
       });
    };
</script> 

然后,使用 JS API 向 reCAPTCHA 发起 Token 获取请求,仍然为 JS  脚本:

$("#submit-comment").click(function (e) { 
     grecaptcha.ready(function () { 
         grecaptcha.execute('sitekey');
     }); 
});

三、HTML 渲染

HTML 渲染是嵌入型的,具体是在前端页面中加入 HTML 标签,其中 submitComment 为成功获取到 token 后执行的下一步操作,如下:

<input type="hidden" class="g-recaptcha" data-sitekey="sitekey" data-callback="submitComment" data-size="invisible" data-badge="inline"/>

如果你不想 reCAPTCHA 在右下角显示图标,可以使用隐藏域input type="hidden",但需要注意相关参数组合,否则达不到效果,我的博客评论机器 验证使用了这种方式,验证码顺利隐藏越来。与前面类似的,使用 JS API 向 reCAPTCHA 发起 Token 获取请求,代码如下:

grecaptcha.ready(function () {
           grecaptcha.execute();
      });

全文完,参考资料:

  1. https://blog.csdn.net/joyce_lcy/article/details/81980683
  2. https://www.cnblogs.com/xiaxiaolu/p/10753583.html
  3. https://cloud.tencent.com/developer/ask/151607

《Google reCAPTCHA 前端接入说明》的相关评论

发表评论

必填项已用 * 标记,邮箱地址不会被公开。