极验验证demo（django+vue）

阅读量：6081 次

发布时间：2019-06-20

本文共 4621 字，大约阅读时间需要 15 分钟。

在使用之前，曾经试过用阿里云的人机验证，不过在签名部分比较复杂，下载sdk后需要自己写很多，折腾了一下，还是放弃。而腾讯云的人机验证python版本有demo，直接填写keyhe1secret就可以使用，但是demo使用的是web.py的框架，这个之前有了解过，比较好用，但是作者去世了，只有python2版本，没有3的版本，想了一下即使修改成3的版本，还要做改成django的，有点麻烦。网易云的宣传上有vue版本的，而且效果看起来不错，本来想试一下，但是注册后还要官方通过验证，等了1天还没通过，就打算另找方法。

偶然翻看博客，发现有人介绍geetest，看了一下感觉上手比较容易，sui遂注册使用。

一、简单注册使用

geetest官网：

该公司主要是做验证的。目前开放的是行为验证。身份验证还未开放。

注册申请后，获得id和key。在其github项目上下载相应语言和版本，就可使用。

文档看起来也比较清晰

老版本python sdk下载：

新版本python sdk下载：

这两个都可以使用python2.7以上的版本，区别在于验证特性设置有些不同。需要注意的是django版本是1.8

根据之前项目的django是1.11.3版本，修改了sdk中报错的部分代码。

下载之后运行setup.py文件

在demo中发现python的三大主流框架都有，这真是太棒了呢

在django_demo文件夹中先安装requirements.txt里面需要的库

注意：打开django_demo下的settings.py文件

TEMPLATE_DIRS = (    os.path.join(BASE_DIR, "static"),)

最后添加这部分，官方的内容给的是绝对路径，我们需要拼接相对路径

demo中的文件替换自己项目中相应的文件

运行后即可看到验证页面

二、vue和python部分结合

分析：后端中validate和ajax_validate区别是：返回页面与返回数据

鉴于我们使用前后端分离的方式，在提交路径上选择ajax_validate

1.vue部分

（1）form-action属性提交

python部分可用后，打开demo中的index.html，将html部分放置在vue验证组件的template中，将style放在vue的style中。

在根页面的head区域引入jquery

打开复制全部内容到你的assets资源目录下

在你的验证组件页面引入刚才复制的资源

import '../assets/js/gt.js'

在methods里新建一个方法

拷贝demo.html中script里ajax获取数据的方法，在vue里改为axios获取

getCaptchaData () {      this.$axios.get('/api/register?t=' + (new Date()).getTime())        .then((res) => {          console.log('res', res)          var handlerEmbed = function (captchaObj) {            $('#embed-submit').click(function (e) {              var validate = captchaObj.getValidate()              if (!validate) {                $('#notice')[0].className = 'show'                setTimeout(function () {                  $('#notice')[0].className = 'hide'                }, 2000)                e.preventDefault()              }            })            // 将验证码加到id为captcha的元素里            captchaObj.appendTo('#embed-captcha')            captchaObj.onReady(function () {              $('#wait')[0].className = 'hide'            })          // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html          }          // 使用initGeetest接口          // 参数1：配置参数          // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件          window.initGeetest({            gt: res.data.gt,            challenge: res.data.challenge,            product: 'embed', // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效            offline: !res.data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注          }, handlerEmbed)        })        .catch(function (error) {          console.log(error)        })    }

在创建时启动

this.getCaptchaData()

附件：slidingBlock1.vue

这里axio获得数据使用代理的方式

打印获取的数据

使用vuex的，可以结合参考文档1使用

（2）form-methods提交按钮提交

为了区别，将验证码卸载id为captcha的容器里

var handlerEmbed = function (captchaObj) {            captchaObj.appendTo('#captcha')            captchaObj.onReady(function () {              document.getElementById('wait').style.display = 'none'            })            captchaObj.onSuccess(function () {              _this.form.isDisabled = !_this.isDisabled              _this.form.writeCode = !_this.writeCode              _this.form.geetest_challenge = captchaObj.getValidate().geetest_challenge              _this.form.geetest_validate = captchaObj.getValidate().geetest_validate              _this.form.geetest_seccode = captchaObj.getValidate().geetest_seccode              console.log(_this.form)            })            captchaObj.onError(function () {              console.log('出错啦，提示用户稍后进行重试')            })          }

主要是在回调函数的initGeetest部分重写handlerEmbed，将回调的部分数据加入post数据里

注意：删除提交按钮类型

login () {      let data = this.$qs.stringify(this.form)      console.log(data)      let that = this      this.$axios.post('/api/ajax_validate/', data, {withCredentials: true      })        .then((res) => {          console.log(res)          if (res.data.status === 'fail') {            $('#notice')[0].className = 'show'            setTimeout(function () {              $('#notice')[0].className = 'hide'            }, 2000)          }        })        .catch(function () {          that.$message.error('账号名或密码错误') // catch里的this不是vue对象，需要外层设置        })    },

添加登录按钮方法，对返回的结果进行判断，通过隐藏/显示来提示用户验证码情况

附件：slidingBlock2.vue