Google reCAPTCHA ----------验证码

2023-11-07

现有验证码的产品形态调研范围如下,基本涵盖了比较主流的验证码平台:

产品背景

‍‍reCAPTCHA起初是由CMU(卡耐基梅隆大学)设计,将OCR(光学自动识别)软件无法识别的文字扫描图传给世界各大网站,用以替换原来的验证码图片。那些网站的用户在正确识别出这些文字之后,其答案便会被传回CMU。这样一来既起到了验证码的效果,又可以帮助进行古籍的数字化工作(可以称为人工OCR)。

‍‍reCAPTCHA在2009年被Google 收购,‍‍Google让reCAPTCHA里显示Google街景的图片。这样经常会从街景里提取如街道名称和交通标志等数据,向Google地图里添加商铺地址和位置等有用信息。

再往后,新版reCAPTCHA又进化为noCAPTCHA。人工智能飞速发展,据说已经能够解决99.8%的图片字符型验证码,因此扭曲的文本验证方式也不再是一个可靠的方法。noCAPTCHA只提供了一个复选框,里面写着“我不是机器人”。当你打钩之后,Google就能利用“风险分析引擎”进行一系列无缝检查,以此来判断你是否是真人。

‍‍如果noCAPTCHA认为你是真人,那就不用再做什么了;否则会要求你填一个传统的CAPTCHA字符串或更先进的字符串,比如门牌号,或从一组图片中挑选出正确的图片。‍‍

 

 

 

 

复选框看似更简单,但背后确是Google强大的机器学习技术。基本的原理就是先检测客户端环境,判断使用者是否处于人类的操作环境中。如果检测结果在容错范围内则直接通过测试,否则弹出验证码进行二次认证。据统计reCAPTCHA的技术可以大大提高识别准确率,总共可以有效节约用户每天50000小时的上网时间。

reCAPTCHA17年3.13日又升级到了Invisible reCAPTCHA,顾名思义,“隐形验证码”。这样一来,连复选框都不会出现,对普通用户完全透明,用户体验又更进一步。页面底部将展示一个logo注明当前页面使用到此技术(当然不想要也可以将其隐藏)。

接入方式官网目前产品主要有两款:reCAPTCHA V2Invisible reCAPTCHAreCAPTCHA V2便是noCAPTCHA的最新版(V1版据说官方已不再维护),嵌入式复选框。Invisible reCAPTCHA为之前提到的隐形验证码。在此只关注它的接入方式(其实和reCAPTCHA V2类似)。
其中第1种比较简单,官网的说法是“The easiest method”——其实就是在已有的按钮元素上添加一些属性以绑定reCAPTCHA,由点击自动触发。示例如下:

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id='demo-form' action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit'>Submit</button>
      <br/>
    </form>
  </body>
</html>

说完第1种,再来看看第2种:自己通过JS代码的方式控制一些属性的传入。示例如下:

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script type="text/javascript">
      
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id='submit' type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

其中需要注意的是:由于顺序执行的原因,onloadCallback要写在前面,这样最后才能保证onload可以接收到
onloadCallback(否则 async and defer 也是白用了)

When your callback is executed, you can call thegrecaptcha.render
method from the Javascript API.Note: your onload callback function must be defined before the reCAPTCHA API loads. To ensure there are no race conditions:

  • order your scripts with the callback first, and then reCAPTCHA
  • use the async and defer parameters in thescript tags

第2种方式,代码量相对第1种多了许多,但是却做到了“不污染已有的html元素”
第3种方式,是分配一块页面空间给到reCAPTCHA,从而固定其展示的位置。因为Invisible reCAPTCHA的Invisible并不是绝对的——你可以通过调参使其visible。那么这样就可以秀出“我们是有用验证码的”。

与第2种相比,同样没有污染已有元素,但是更加customised。示例如下:

<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>

注意这里的invoke不是使用render,而是execute。具体的api调用如下:

服务端的地方就不讨论了,都大同小异:无非是需要特定的密钥,结合前端callback的内容做二次验证。原因是前端可以被绕过。

验证流程如下(这里借用网易易盾流程图。其实都差不多):

 

总结

同国内验证码产品相比,Google reCAPTCHA在接入上,并不强调产品的形态(点选 、滑动等),而是侧重接入的灵活程度。具体的形态由“风险分析引擎”得出,动态展示给调用方。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Google reCAPTCHA ----------验证码 的相关文章

  • java常用工具类总结

    1 Java自带工具方法 1 1 List集合拼接成以逗号分隔的字符串 如何把list集合拼接成以逗号分隔的字符串 a b c List

随机推荐

  • 不安装oracle客户端,用plsql连接oracle

    首先安装32位和64位的Oracle客户端 在很多Oracle安装介绍中 都有提到设置2点 一 e 1 环境变量 NLS LANG SIMPLIFIED CHINESE CHINA ZHS16GBK 2 TNS ADMIN D app pr
  • 跨域问题Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin

    场景 前端跟后台联合开发的时候 在局域网内 浏览器访问别人的地址可以获取数据 但是通过接口请求 就会跨域 解决方法 现在是vue项目 用axios请求 前端这边单独解决这个问题 不需要后端处理 第一 找到config index js 设置
  • 蓝牙Mesh开发四 TLSR8258 ble mesh通信测评

    前言 TLSR是由泰凌微电子设计的一款低功耗蓝牙芯片 8258芯片方案已经支持SigMesh协议栈 符合BLE5 0协议规范 跑下Demo来做下SIG Mesh的测试 如有异议 欢迎留言指正 特性 32 Bit RISC V 处理器 最高主
  • 深度学习损失函数之——L1 L2 SmoothL1(范数、损失函数、正则化)

    L1 L2以及Smooth L1是深度学习中常见的3种损失函数 这3个损失函数有各自的优缺点和适用场景 首先给出各个损失函数的数学定义 假设 x x x 为预测值与Ground Truth之间的差值 L1 loss表示预测值和真实值之差的绝
  • Redis查看订阅的模式串详细内容

    问题描述 pubsub channels可以查看Redis中被订阅的频道 channel pubsub numpat可以查看被订阅的模式 pattern 数量 redis cli pubsub numpat integer 3 问题 除了查
  • A,B,C , D, E类地址的划分及子网划分汇总的详解

    一 A类地址 1 A类地址第1字节为网络地址 其它3个字节为主机地址 它的第1个字节的第一位固定为0 2 A类地址范围 1 0 0 1 126 255 255 254 3 A类地址中的私有地址和保留地址 10 X X X是私有地址 所谓的私
  • 联想电脑如何启动BIOS并开启CPU虚拟化功能

    联想电脑如何启动BIOS并开启CPU虚拟化功能 首先 打开设置 gt 系统 gt 更新与安全 gt 恢复 gt 高级启动 gt 立即重新启动 进入后选择疑难解答 再点击高级选项 再在高级选项中选择UEFI固建设置后进入BIOS 进入BIOS
  • C++ 城市路径

    include
  • 全网最新最全的jmeter接口测试,压力测试

    一 前言 jmeter是apache公司基于java开发的一款开源压力测试工具 体积小 功能全 使用方便 是一个比较轻量级的测试工具 使用起来非常简单 因 为jmeter是java开发的 所以运行的时候必须先要安装jdk才可以 jmeter
  • pandas6:DataFrame非值数据(Nan)的处理

    Pandas中有哪些非值数据 1 NaN 是什么 NaN是被遗失的 不属于任何类型 from numpy import NaN nan print nan nan print NaN True print NaN False print N
  • 2023蓝桥杯考前整理

    目录 python接收数据的方法 python内置方法 python字符串方法 python模块 python接收数据的方法 接收一个元素 s input 接收一个字符串 n int input 接收一个整数 接收两个或三个元素 以空格隔开
  • 【软考】-高项-质量管理-子过程ITTO记忆技巧

    质量管理 贵管控 规划质量管理 1 记忆口诀 需求 干系 风险记住清 组织质量体系 策略盈 标杆成本质量流 思维测试 计划留 质量测量指标出 管理计划 记心头 2 故事 在一个叫做 需求城 的地方 有三个重要的公民 需求文件先生 干系人登记
  • Markdown中图片对齐方式及尺寸设置

    在markdown编辑模式下导入图片默认尺寸会很大 不符合预期效果 有时候需要对图片的对齐方式和尺寸大小进行调整 1 直接上传图片的原始效果 添加图片后默认尺寸很大 会占满整个宽度 2 图片尺寸及对齐方式调整 添加图片之后 图片底部 CSD
  • java对于Excel进行快速处理的框架EasyExcel(SpringBoot集成)

    一 EasyExcel介绍 EasyExcel是阿里巴巴开源的一个excel处理框架 以使用简单 节省内存著称 EasyExcel能大大减少占用内存的主要原因是在解析Excel时没有将文件数据一次性全部加载到内存中 而是从磁盘上一行行读取数
  • Anchor-Free based目标检测

    CornerNet 预测左上角和右下角来得到最后的bounding boxes 所以最基本的需要两个feature map表示对应的Corner 称为heatmap top left 和 bottom right 将属于同一个object的
  • C++中template(模版)的使用

    我们在编程的时候总是会遇到一些类似的模块 只是模块中的形参的数据类型不同 导致我们要不断的去更改模块的 这里就涉及到重载的知识点了 例如以下的几种情况 函数1 int max int x int y return x gt y x y 函数
  • 分布式监控系统——Zabbix(3)配置

    文章目录 分布式监控系统 Zabbix 3 配置 一 监控项 1 定义一个不带参数的监控项 2 定义一个带参数的监控项 3 删除监控项 4 监控项存储的值 二 触发器 1 简介 2 触发器表达式 3 定义一个触发器 4 触发器的依赖关系 5
  • 项目4总结:MySQL数据表的检索

    目录 任务4 1 查询时选择列 1 基本查询语句 2 检索所有列 3 检索指定列 任务4 2 查询时选择行 1 查询指定记录 2 带IN关键字的查询 3 带BETWEEN AND的范围查询 4 带LIKE的字符匹配查询 5 查询空值 6 带
  • truncate和delete的区别

    两者都可以删除表中的数据 但是本质上是有区别的 两者使用方法如下 删除表中所有数据 DELETE FROM table name 删除表中部分符合条件的数据 DELETE FROM table name WHERE 删除表中所有数据 TRU
  • Google reCAPTCHA ----------验证码

    现有验证码的产品形态调研范围如下 基本涵盖了比较主流的验证码平台 Google reCAPTCHA 极验 阿里云 腾讯云 点触 网易易盾 螺丝帽 FunCaptcha 产品背景 reCAPTCHA起初是由CMU 卡耐基梅隆大学 设计 将OC