首页 > 其他分享> > day 86 Vue学习之八geetest滑动验证

day 86 Vue学习之八geetest滑动验证

2019-05-26 22:50:08 作者：互联网

Vue学习之八geetest滑动验证

本节目录

一 geetest前端web中使用　　

　　下载gt文件，官网地址，下面我们就来完成一下基于geetest的滑动验证怎么做：

　　首先在项目之使用，将我们下载的文件放到我们的项目目录下，我放到了static文件夹下的global文件夹下，然后在项目入口文件main.js中引入，看目录结构：

　　然后我们直接就能在各个组件中使用了，首先我们找个案例分析一下：看图

　　那么后端返回的这三个数据是什么呢，我们看看看geetest官网怎么说的：

　　我们引入了gt.js之后，就可以使用一个函数叫做`initGeetest` 初始化函数，这个函数怎么用呢，结合ajax或者axios来用，看代码：

ajax({
    url: "API1接口（详见服务端部署）",这个url就是我们上面那个例子中的请求路径
    type: "get",
    dataType: "json",
    success: function (data) {
        //请检测data的数据结构， 保证data.gt, data.challenge, data.success有值，你就会发现，这三个数据正好是我们上面这个例子中后端返回给前端的三个数据
        initGeetest({
            // 以下配置参数来自服务端 SDK
            gt: data.gt,
            challenge: data.challenge,
            offline: !data.success,
            new_captcha: true  //这个参数先不用管它，放在这里就行了
        }, function (captchaObj) {
            // 这里可以调用验证实例 captchaObj 的实例方法
        })
    }
})

　　官网还说了一句话：以上初始化过程，需要结合服务端 SDK 使用，因为初始化所传入的配置参数来自服务端 SDK，也就是说要配合后端进行工作。

　　我们来试一下，看看项目中怎么玩，上面我们在项目中已经引入gt.js文件了，那么我们直接来使用一下：

　　直接看代码吧，我的代码写的复杂了一些，其实直接在你想做滑动验证的组件中发送axios请求就行，我把请求和url都放到了一个其他的文件里面了，名字叫做api.js，在static文件夹下的global文件夹下

　　好，入口文件main.js的代码如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; 
Vue.use(ElementUI);
import VueCookie from 'vue-cookies'
Vue.use(VueCookie);

Vue.config.productionTip = false;

//引入全局的geetest
import '../static/global/gt'

//将api引入
import * as api from './restful/api'
Vue.prototype.$http = api;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

　　api.js文件内容如下：

import Axios from 'axios'
Axios.defaults.baseURL = 'https://www.luffycity.com/api/v1' ;
const captchaCheckUlr = '/captcha_check/';
export function testGeet() {

  return Axios.get(`${captchaCheckUlr}`).then(res=>res.data) //根据后端返回的数据结构来处理的，那现在得到的是一个含有包含那三个数据的自定义对象{challenge:"b58455a1f1493a9037e86f0a4f478eba"gt:"37ca5631edd1e882721808d35163b3ad"success:1}
}

　　路由信息文件index.js内容如下：

import Vue from 'vue'
import Router from 'vue-router'
// import Home from '@/components/Home/Home'
import Login from '@/components/Login/Login'

Vue.use(Router);

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      redirect:{name:'Login'}
    },
    {
      path: '/',
      name: 'Login',
      component: Login
    }
  ]
})

　　组件Login.vue内容如下：

<template>
  <div id="login">
    <div id="geetest"></div>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {}
    },
    methods: {
      getGeetest() {
        this.$http.testGeet().then(res => {
          console.log(res);
          //使用gt的initGeetest函数来初始化咱们的滑动验证
          initGeetest({
            // 以下配置参数来自服务端 SDK，这是第一次验证，也就是获取到了后端的这个三个数据
            gt: res.data.gt,
            challenge: res.data.challenge,
            offline: !res.data.success,
            new_captcha: true
          }, function (captchaObj) {
            // 这里可以调用验证实例 captchaObj 的实例方法
            console.log(captchaObj);
            //通过调用captchaObj对象的appendTo方法，给某个标签添加上滑动验证对象，就行了，看写法
            captchaObj.appendTo('#geetest') //参数是一个标签选择器，那么这个标签就加上了滑动验证的页面效果

          })
        }).catch(err => {

        })
      }
    },

    created() {
      this.getGeetest();
    }
  }
</script>

<style scoped>
  #login {
    width: 200px;
    height: 40px;
  }

</style>

　　App.vue组件的内容如下：

<template>
  <div id="app">

    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

　　好，拿到上面的代码一运行，就有了。

　　页面效果如下：

　　点击这个按钮之后的效果如下：

　　滑动之后的效果如下：

　　好，现在滑动验证的效果就有了。

　　但是做一个滑动验证还需要第二次验证，上面拿到后端的那三个数据算是第一次验证了，也就是第一次和后端交互了，那么第二次验证是什么呢，官网上也有说法，直接看我的图吧：

　　官方代码是这样写的：通过 ajax 方式进行二次验证，就是滑动完成，需要将滑动完数据发送给后端进行验证

initGeetest({
    // 省略配置参数
}, function (captchaObj) {
    // 省略其他方法的调用

    // 这里调用了 onSuccess 方法，该方法介绍见下文 
    captchaObj.onSuccess(function () {  //这是滑动验证成功之后立马发送ajax请求进行登陆，就可以写在这个方法里面，但是我们上面的那个业务场景并不是直接就登陆，还需要点击登陆按钮，所以我们登陆请求不是写在这里的
        var result = captchaObj.getValidate();

        // ajax 伪代码
        ajax(apirefer, {
            geetest_challenge: result.geetest_challenge,
            geetest_validate: result.geetest_validate,
            geetest_seccode: result.geetest_seccode,

            // 其他服务端需要的数据，比如登录时的用户名和密码
        }, function (data) {
            // 根据服务端二次验证的结果进行跳转等操作
        });
    });
});

　　然后我针对上面的场景写了一个简单的登陆页面：

　　然后我们写一下login.vue组件的代码，其他文件的代码和之前一样：

<template>
  <div id="login">
    <div>
      用户名：<input v-model="username" type="text" name="username">
    </div>
    <div>
      密码：<input v-model="password" type="password" name="password">
    </div>
    <div id="geetest"></div>
    <div>
      <button @click="loginHandler">登陆</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        username: '', //保存用户名和密码
        password: '',
        geetestObj: {} //二次验证的时候需要的三个geetest数据
      }
    },
    methods: {
      getGeetest() {
        this.$http.testGeet().then(res => {
          console.log(res);
          //使用gt的initGeetest函数来初始化咱们的滑动验证
          initGeetest({
            // 以下配置参数来自服务端 SDK
            gt: res.data.gt,
            challenge: res.data.challenge,
            offline: !res.data.success,
            new_captcha: true
          }, (captchaObj) => {
            // 这里可以调用验证实例 captchaObj 的实例方法
            console.log(captchaObj);
            //通过调用captchaObj对象的appendTo方法，给某个标签添加上滑动验证对象，就行了，看写法
            captchaObj.appendTo('#geetest'); //参数是一个标签选择器，那么这个标签就加上了滑动验证的页面效果

            //进行二次验证
            // captchaObj.onSuccess(function () { //别忘了改成箭头函数，不然this不是你当前的组件对象
            captchaObj.onSuccess(() => {
              //通过这个captchaObj.getValidate()方法，会得到一个自定义对象，这个对象里面有三个数据，将来点击提交按钮的时候，不仅仅要提交用户名和密码，还要将这三个数据提交给后端进行验证
              let result = captchaObj.getValidate();
              console.log(result);//{geetest_challenge: "a56e62f9d5d985b1d5f94a7477359bc940", geetest_validate: "7157b987d41f2acdae4e60fbd832376f", geetest_seccode: "7157b987d41f2acdae4e60fbd832376f|jordan"}
              this.geetestObj = result; //保存这个数据

              // // ajax 伪代码,这些代码是官网提供的，这是我们做滑动验证成功之后，直接发送登陆请求的写法，写在这个captchaObj.onSuccess的方法中，但是我们的场景不是这样的，
              // ajax(apirefer, {
              //   geetest_challenge: result.geetest_challenge,
              //   geetest_validate: result.geetest_validate,
              //   geetest_seccode: result.geetest_seccode,
              //
              //   // 其他服务端需要的数据，比如登录时的用户名和密码
              // }, function (data) {
              //   // 根据服务端二次验证的结果进行跳转等操作
            });


          })
        }).catch(err => {

        })
      },

      //点击登陆按钮，将数据发送给对应的登陆url
      loginHandler() {
        console.log(this.username, this.password, this.geetestObj);//输入的用户名密码还有geetest三个数据，就都有了，
        //组合数据，当作登陆请求的参数
        let params = {
          geetest_challenge: this.geetestObj.geetest_challenge,
          geetest_validate: this.geetestObj.geetest_validate,
          geetest_seccode: this.geetestObj.geetest_seccode,
          username: this.username,
          password: this.password,
        };
        //其实我们在前端还可以对我们发送的这五个数据进行不为空的验证，我就不写啦
        // 伪代码：就可以了
        // axios.post('登陆url',params).then(res=>{}).catch(error=>{});
      }

    },

    created() {
      this.getGeetest();
    }
  }
</script>

<style scoped>
  #login {
    width: 200px;
    height: 200px;
  }

</style>

　　然后就能够登陆了，发送了登陆认证请求之后，后端会验证我们的发送的五个数据(还有个记住密码的选填数据，这个数据可以自己加到咱们的数据里面，暂时咱们没用昂)，验证成功之后，后端会返回给前端一个token，作为你已经登陆成功的标识，以后再点击网站的其他页面的时候，就通过这个token值就能判断当前用户是不是登陆了，怎么玩呢，通过vue-cookie保存到cookie中就行了。