GeetTest~下一代验证(附C#案例)

基本介绍

极验验证除了在服务器端提供了广泛的语言支持外,在客户端也提供了多平台的扩展支持。

客户端主要涵盖了如下平台:

    • pcWeb
    • 普通台式电脑,笔记本电脑web页面前端组件
    • 移动Web
    • 移动智能手机上的web页面前端组件
    • android应用
    • 原生android本地app调用组件
    • iOS应用
    • 原生iOS本地app调用组件

注意:

  1. pcWeb对IE6/7/8这些低版本浏览器进行了兼容
  2. pcWeb使用保守的前端实现方式,可以兼容移动端页面
  3. 移动Web针对移动端更强大的浏览器引擎,使用了高级实现方式,具有更流畅的体验

C#案例:https://github.com/GeeTeam/gt-csharp-sdk

pcWeb

组件设置

注意:为了降低普通用户的使用门槛,本示例以 同步请求 方式为例子来作为示例引导。

直接在页面的任意地方(建议放在头部head处),引入如下代码:

<script src="http://api.geetest.com/get.php"></script>

这样就在页面中完成了对验证的前端 gt_lib 库的引入

注意:

如果是https页面的引用,则使用如下代码:

<script src="https://api.geetest.com/get.php"></script>

然后使用如下方式将对象绑定到相应的宿主页面的显示层

new Geetest(config).appendTo(Dom);

关于上述的一些接口的具体函数请参考下文。

在web_api中引入了一个重要的Geetest类,关于它的最基本配置如下。

new window.Geetest(config)

使用new新建一个Geetest实例,将js对象config参数传入,config参数含义如下:

  1. gt:用户在极验后台建立的检验模块id
  2. challenge:验证事件流水号
    • product:验证模块的前端展现形式
    1. float:浮动式
    2. embed:嵌入式
    3. popup:弹出式(注意事项)
    • popupbtnid:页面绑定的submit按钮的id(只有在product类型为popup的时候才需要设置此参数)
    • 设置方法见:bindOn()
    • zh-cn:中文
    • en:英文
    • lang:界面显示语言,默认中文
    • true:在https使用
    • false:在http下使用
    • https:是否支持https
    • 在移动端使用canvas版本时有效
    • PC版本不用设置此参数,是固定宽度。
    • width:指定验证模块宽度

实现如下的要求:

  1. 验证的id为 {{id}}
  2. 产品展现形式为 embed
  3. 绑定到宿主页面的id为 div_id_embed 的div层(用来放置验证模块的容器)

初始化示例代码如下:

var gt_captcha_obj = new window.Geetest({
                gt: "{{id}}",
                challenge:"{{challenge}}",
                product: "embed"
              })
gt_captcha_obj.appendTo("#div_id_embed");

关于上述代码的说明:

  1. {{id}}为网站主在后台申请的验证模块的id
  2. {{challenge}}为网站主服务器向极验服务器注册的验证事件
  3. 示例使用接口方法见 appendTo()

前端API

appendTo(position [, after])

用途:将验证码dom添加到相关的位置 参数:

    • position:表示将验证码添加到的位置
    1. dom元素
    2. id选择器字符串:”#test”
    3. jq选择器:$(‘.test’),会自动选择第一个元素
    4. querySelector接受的选择器字符串: ”.test” (仅在浏览器支持querySelector时)
    • after:可选参数
    1. 可选参数after,boolean,默认为false;
    2. true: append到所制定元素之后
    3. false: append到所制定元素之内

bindOn(btn)

对popup模式,使用bindOn绑定按钮,点击按钮弹出验证码 接受参数和appendTo的position一致

refresh()

手动刷新验证码

onReady(callback)

当监听到本体DOM元素加载完毕执行callback函数

onRefresh(callback)

当刷新时执行callback函数 例子:

captcha.onRefresh(function(){
    pass = false;
})

onStatusChange(callback)

当状态改变时执行callback(message) message为状态改变的结果,有Fail, Forbidden, Abuse, Error

onSuccess(callback)

当验证成功时调用callback函数 例子:

captcha.onSuccess(function() {
    var validate = captcha.getValidate();
    $.ajax({
                                    url : "VerifyLoginServlet",
                                    type : "post",
                                    data : validate,
                                    success : function(sdk_result) {
                                            console.log(sdk_result)
                                    }
                                    });
})

onError(callback)

当验证出现未知错误时调用callback函数作为failback方案

例子:

captcha.onError(function() {
    //switch to other captcha
    //or refresh the page to use failback from SDK
})

getValidate()

如果验证成功,返回验证码的结果(三个需要传给后台的值,原由三个input传递),用于ajax提交 如果失败则返回false

enable()disable()

对于popup形式,可以通过disable和enable方法来临时禁用或恢复验证码的弹出。

综合示例

//创建一个embed类型的captcha
window.embed_captcha = new window.Geetest({
      gt: '{{id}}',
      product: 'embed'
}).appendTo("#embed_div_id");

//创建一个popup类型的captcha
window.popup_captcha = new window.Geetest({
      gt: '{{id}}',
      product: 'popup'
}).appendTo('#popup_div_id').bindOn('#click')


//ajax提交示例
embed_captcha.onSuccess(function() {
$.ajax({
    data: embed.getValidate()
})
})

高级用法

自定义静态文件加载时机

加载极验的js库分为两种方式:

  1. 静态加载
  2. 动态加载

用户可以根据自身需求来选择相应的加载方式。

前面的文档为了降低普通用户的使用门槛,默认是以静态加载的方式来描述。但是对于有特殊需求的用户也可以选择动态的载方式。 关于动态和静态的方式的区别如下所述。

静态加载

静态方式适合于普通用户,实现方法简单直接,但是和页面的载入是同时向极验服务器请求静态库文件,会占用页面的少量带宽。

注意:静态加载方式可以是同步请求也可以是异步请求

关于同步和异步,请参考 同步和异步请求及执行

<script src="http://api.geetest.com/get.php"></script>
动态加载

动态加载方式适合于对前端请求事件流通严格控制需求的用户,可以在需要验证的时候才向极验服务器请求静态库文件,为网站加载节省带宽。

例如:页面弹出浮动层注册对话框,对话框里面显示极验验证模块

注意:动态加载的方式只能使用异步请求的方式(因为目录主流浏览器不允许动态加载里面有document.write方法)

前端代码示例:

s = document.createElement('script');s.src = 'http://api.geetest.com/get.php?callback=funname';dom.appendChild(s)

同步和异步请求及执行

根据前端js的请求是否会阻塞页面 ,可以将请求静态文件分为同步请求和异步请求

同步请求

在前面的普通用户使用文档里面提到的调用方式是同步调用,同步调用使用比较简单,开发集成比较简单,推荐普通用户使用。

异步请求

异步请求具有如下的特点:

  1. 请求和加载js的时候,不会阻塞宿主页面
  2. 可以捕捉js加载完毕后的事件
  3. 可以控制初始化Geetest实例的时机

有高级需求的用户可以使用些方法。

和同步的请求不同,需要在api接口后面加上成功后的callback回调函数名称

具体示例代码如下:

<script async=true src="http://api.geetest.com/get.php?callback=funcname"></script>

即增加了callback参数,作为成功后的回调。

异步回调函数:

 var funcname = function() {
  new Geetest(config).appendTo(Dom);
}

单页面多验证实例

将不同的验证模块放在不同的表单里面。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Custom Ajax</title>

  <script type="text/javascript" src="http://api.geetest.com/get.php"></script>
</head>
<body>
<div style="height: 200px;"></div>
<form action="" id="form1">
    <div id="captcha1"></div>
</form>
<form action="" id="form2">
    <div id="captcha1"></div>
</form>
<script>
   var captcha1 = new Geetest().appendTo('#captcha1')
   var captcha2 = new Geetest().appendTo('#captcha2')
</script>
</body>
</html>

复杂弹出式模块

高端用户不建议使用popup形式,它自定义能力相对比较差,如果有弹出的需求,可以优先考虑自行设计和实现弹出层并调用浮动或者嵌入式更佳。

其原理为:

  1. 拷贝绑定的按钮
  2. 隐藏原按钮
  3. 点击新按钮弹出验证码
  4. 验证成功用js触发原按钮的点击

注意事项

    • 用户有高级使用需求时,尽量使用官方提供接口
    • 极验对产品升级时,会保证接口的兼容性
    • 用户尽量减少对极验插件DOM依赖
    • 极验升级产品时,不能保证DOM的不变性

常见问题

JSP页面的弹出式图片错位问题

问题描述:

使用Eclipse建立的默认的JSP页面的弹出式验证,在有些浏览器下面,例如IE8,会出现图片错位的情况。

解决方法:

使用如下的html文档头部

<!doctype html>

而不要使用默认的Eclipse模板的文档图

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

其它

(待续...)

移动Web

基本介绍

注意:本文档的API适用于在创建时,选择 “移动端”选项的验证模块,主要特点是在移动端使用canvas来实现,有更流畅的效果。

将下列当前验证专属代码放在网站页面的form表单合适的位置以显示验证模块。

添加引用源

<script async  type="text/javascript" src="http://api.geetest.com/get.php?gt={{id}}"></script>

手机打开如下页面可以查看效果:

canvas交互展示

前端开发Demo

为了帮助前端开发人员快速理解使用方法,本项目提供了开发项目demo

git clone https://github.com/GeeTeam/gt-canvas-demo.git

更多详细内容请访问:Github页面

前端API

刷新验证

GeeTest[0].refresh()

其中的数字N表示本页面的第N个实例。

验证回调

验证成功/失败的回调函数

window.gt_custom_ajax = function(result, id, message) {
  //result 参数表示验证结果,有以下两种可能 True 或者 Flase
  //id 参数表示验证码所在div的id,可定义验证码的位置
  //message 参数表示此次验证的返回信息,有以下四种可能"Success", "Fail", "Abuse", "Forbidden"
  if(result) {
    //定义你要在验证成功或者失败时执行的代码。
  }
}

验证后台处理

在拖动过程中会生成3个input值,将这三个input值传到后台,根据我们提供的SDK,做出相应的处理

window.gt_custom_ajax = function(result, id, message) {
  if(result) {
    value = $('#' + id).find('input');
    $.ajax({
      type:'POST',
      url:'XXX',
      data:{"geetest_challenge":value[0],"geetest_validate":value[1],"geetest_seccode":value[2]},
      success:function(){

      };
    })
  }
}

黑名单机型排除

因为某些手机的本地浏览器更改较大,导致不能支持canvas特性,故做了相应的黑名单备选方案。对于黑名单手机,会推送普通web版的验证,回调接口会有所不同。已经统一在js上做了兼容,用户不用刻意再修改前端代码

目前已知的不支持canvas特性的手机有:

  1. 魅族MX3系列的(老版本Flyme不支持),UA关键字:M3
  2. 三星,UA关键字:GT-I9500
  3. 其它后续持续增加中

友情提示

为保证设计的美观性,尽量选择弹出式验证码

android应用

git clone https://github.com/GeeTeam/gtapp-android.git

更多详细内容见 Demo页面

iOS应用

示例项目

git clone https://github.com/GeeTeam/gtapp-ios-oc.git

更多详细内容见 Demo页面

适配机型

平台分类:

  1. armv7及armv7以上
  2. arm64

枚举机型:

  1. armv6 设备: iPhone, iPhone2, iPhone3G, 第一代、第二代 iPod Touch
    • armv7 设备: iPhone3GS, iPhone4, iPhone4S
    • iPad, iPad2, iPad3(The New iPad), iPad mini iPod Touch 3G, iPod Touch4
  2. armv7s设备: iPhone5, iPhone5C, iPad4(iPad with Retina Display)
  3. arm64 设备: iPhone5S, iPad Air, iPad mini2(iPad mini with Retina Display)

NextPrevious

© 版权所有 2014, geetest.com.

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2015-10-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(二十四):全局页面配置

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

30330
来自专栏Google Dart

AngularDart4.0 英雄之旅-教程-02启动应用

码云项目页:https://gitee.com/scooplolwiki/toh-0

9220
来自专栏用户2442861的专栏

linux之ldconfig工具的使用

ldconfig是一个动态链接库管理命令 为了让动态链接库为系统所共享,还需运行动态链接库的管理命令--ldconfig ldconfig  命令的用途...

12410
来自专栏为数不多的Android技巧

简化markdown写作中的贴图流程

这么复杂的流程,让人简直没有了插入图片的欲望;但是大量的文字没有图片,必然让人疲惫;

16250
来自专栏小程序容器

OpenApplus小程序容器

OpenApp+ (https://www.openapplus.com)一个小程序容器,配置简单、功能完善、界面流畅、开箱即用!使用OpenApp+可以快速扩...

64590
来自专栏西安-晁州

vue.js应用开发笔记

看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项...

52810
来自专栏Albert陈凯

2018-11-28 最常用的Intellij IDEA快捷键

除了上面的快捷键之外,还有非常多有用的快捷键,几乎每一个在Intellij中的操作都有一个等同的快捷键。 我们很难一下全部学习到位,需要一定的时间和练习。 我每...

13420
来自专栏韩东吉的Unity杂货铺

零基础入门 37:加强版日志窗口

又是俩星期不见,大家好,刚刚忙完,所以现在深夜更新,今天的主题描述我用语音和大家来介绍。

13110
来自专栏葡萄城控件技术团队

SoapUI实践:自动化测试、压力测试、持续集成

17320
来自专栏更流畅、简洁的软件开发方式

【自然框架】QuickPager分页控件的总体介绍和在线演示

QuickPager分页控件的特点  两种运行方式:自动运行、手动运行。前者便捷,后者灵活。  多种分页方式:Postback、Postback伪URL、URL...

26480

扫码关注云+社区

领取腾讯云代金券