非你网

前言

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

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

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

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

注册登录

插件中会用到id和key。所以，先去官网注册一个账号，申请一个验证。

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

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

添加成功后，会生成你这个项目的 id 和 key 。

开始

集成流程图：

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

通讯流程图：

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

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

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

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

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

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

下载部署

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

先下载 phpsdk：https://github.com/GeeTeam/gt3-php-sdk 将下载好的文件放到服务器的一个目录下，修改 config/config.php 中的 id 和 key 为你自己申请的。

再修改服务端文件：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代码会做一些修改。改成适合框架的就行。