正在加载验证码......

请先完成验证

前言

只做一件事情,可以做的很精致。验证码,只是一个网站很小很小的一部分,有人有公司却做的体验非常棒。下边是网易易盾和极验两加公司做的验证码产品demo的链接:

网易易盾: http://dun.163.com/trial/jigsaw
极验: http://www.geetest.com/exp.html

极验提供了两种验证方式(拖动和点击),四种展现形式(float、popup、custom、bind),二次验证的服务以及多平台。以保障良好的安全以及体验。不过,按钮不能任意定义高度。免费产品也不能自定义图片。

image

image

极验既然能免费用,那就免费用吧。

注册登录

插件中会用到 idkey。所以,先去官网注册一个账号,申请一个验证。

官方地址:http://www.geetest.com/

进入网站,注册,登录,然后进入后台。添加 新增验证

image

image

添加成功后,会生成你这个项目的 idkey

image

image

开始

集成流程图:

image

image

注册,申请部分上边已经提到过了。

通讯流程图:

image

image

这里以php服务器来说一下通讯流程:

一、前端web服务器向自己的服务器发起请求,获取初始化数据(官方提供获取代码,放到服务器上即可)。

二、前端获取上一步请求的数据,建立dom,添加到form表单下的div中(官方提供js,建立dom)。如下图:

image

image

三、点击按钮,生成拖动验证面板或点击验证面板。等待操作(这些也是官方js自己完成),如下图:

image

image

四、拖动或点击,进行验证。操作正确了,会关闭验证面板,产生回调。回调函数的注册,在上边第二部中,可以手动注册。如下图:

image

image

五、将表单填写完整,提交表单。在提交表单这里,在web服务端,还可以进行二次验证(官方提供验证代码)。

下载部署

初步知道了流程,下边进行代码部署,让插件跑起来。

先下载 phpsdkhttps://github.com/GeeTeam/gt3-php-sdk 将下载好的文件放到服务器的一个目录下,修改 config/config.php 中的 idkey 为你自己申请的。

再修改服务端文件: StartCaptchaServlet.php ,data中定义了三个变量,比如请求人的ip,自己获取到填充进去就可以了。

然后访问其demo: http://localhost:8080/geetest/static/login.html

到这里,你已经可以体验到极验验证码了(这里没做二次验证)。然后,就可以有耐心去看它的官方文档了。

http://docs.geetest.com/install/server/php/

文档写的还是蛮好懂,也比较详细。按照文档,你可以去尝试它的四种展现方式以及两种验证方式。

总结

  1. 虽然官方说只能定义按钮的宽度,不能定义高度。自己通过写css,还是可以改变高度的。

  2. 免费体验有各种限制,其中一条就是不能去广告logo和链接。这个也是可以通过css去掉的。这样是不是很不好啊。为了美观,还是坚决把广告logo去掉了。

  3. 免费体验的验证图片不能自定义。只有付费版本每个月9999元以上的用户才可以自定义图片。验证dom都是由官方提供的js生成的,想改变图片不是那么容易。其图片用cavans绘制的,非img标签。

  4. 做php项目,一般都会用到框架。这个时候,sdk代码会做一些修改。改成适合框架的就行。