GeetTest~下一代验证（附C#案例）

逸鹏

发布于 2018-04-09 11:41:56

1.9K0

发布于 2018-04-09 11:41:56

文章被收录于专栏：逸鹏说道逸鹏说道

基本介绍

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

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

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

注意：

pcWeb对IE6/7/8这些低版本浏览器进行了兼容
pcWeb使用保守的前端实现方式，可以兼容移动端页面
移动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参数含义如下：

gt：用户在极验后台建立的检验模块id
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：指定验证模块宽度

实现如下的要求：

验证的id为 {{id}}
产品展现形式为 embed
绑定到宿主页面的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");

关于上述代码的说明：

{{id}}为网站主在后台申请的验证模块的id
{{challenge}}为网站主服务器向极验服务器注册的验证事件
示例使用接口方法见 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库分为两种方式：

静态加载
动态加载

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

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

静态加载

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

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

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

<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的请求是否会阻塞页面，可以将请求静态文件分为同步请求和异步请求

同步请求

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

异步请求

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

请求和加载js的时候，不会阻塞宿主页面
可以捕捉js加载完毕后的事件
可以控制初始化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形式，它自定义能力相对比较差，如果有弹出的需求,可以优先考虑自行设计和实现弹出层并调用浮动或者嵌入式更佳。

其原理为：

拷贝绑定的按钮
隐藏原按钮
点击新按钮弹出验证码
验证成功用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特性的手机有：

魅族MX3系列的（老版本Flyme不支持）,UA关键字:M3
三星，UA关键字：GT-I9500
其它后续持续增加中

友情提示

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

android应用

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

更多详细内容见 Demo页面

iOS应用

示例项目

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

更多详细内容见 Demo页面

适配机型

平台分类：

armv7及armv7以上
arm64

枚举机型：

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

NextPrevious

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2015-10-05，如有侵权请联系 cloudcommunity@tencent.com 删除

ios

android

本文分享自我为Net狂微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

ios

android

登录后参与评论

0 条评论

热度