zoukankan      html  css  js  c++  java
  • VUE中使用geetest滑动验证码

    一,准备工作:服务端部署

      下载文件gt.gs:  https://github.com/GeeTeam/gt3-python-sdk

      需要说明的是这里的gt.js文件,它用于加载对应的验证JS库。

      1.引入初始化函数  

      main.js

    import '../static/global/gt.js'

      2.调用初始化函数进行初始化

      api.js 

    // 滑动验证码api
    export const getGeetest = ()=> {
      return Axios.get('captcha_check/')  // 后端相对应的API
        .then(res=>res.data)
    };
    // 登陆api
    export const userLogi = (params)=>{
    // 这个参数至少包含用户名和密码,以及滑动验证的3个字段
    return Axios.post("account/login/", params)
    .then(res=>res.data)
    };
     

      初始化

    getGeetest() {
    this.$api.getGeetest()
    .then(res => {
    let data = res.data;
    //请检测data的数据结构, 保证data.gt, data.challenge, data.success有值
    initGeetest({
    // 以下配置参数来自服务端 SDK
    gt: data.gt,
    challenge: data.challenge,
    offline: !data.success,
    new_captcha: true,
    product: 'popup',
    "100%"
    },
    (captchaObj) => {
    // 这里可以调用验证实例 captchaObj 的实例方法

    }).onSuccess(() => {
    }).onError(() => {
    })
    })
    })
    .catch(error => {
    console.log(
    error
    )
    })
    }

    部署完成后可以看到

    点击进行验证

    二,发送登录用户名密码

    getValidate()

    获取用户进行成功验证(onSuccess)所得到的结果,该结果用于进行服务端 SDK 进行二次验证。getValidate 方法返回一个对象,该对象包含 geetest_challenge,geetest_validate,geetest_seccode 字段

    geeGeetest

    
    
    getGeetest() {
    this.$api.getGeetest()
    .then(res => {
    let data = res.data;
    //请检测data的数据结构, 保证data.gt, data.challenge, data.success有值
    initGeetest({
    // 以下配置参数来自服务端 SDK
    gt: data.gt,
    challenge: data.challenge,
    offline: !data.success,
    new_captcha: true,
    product: 'popup',
    "100%"
    },
    (captchaObj) => {
    // 这里可以调用验证实例 captchaObj 的实例方法
    captchaObj.appendTo("#geetest"); //将验证按钮插入到宿主页面中geetest元素内
    captchaObj.onReady(() => {
    //your code
    }).onSuccess(() => {
    //your code
    this.validResult = captchaObj.getValidate();
    // console.log(this)
    }).onError(() => {
    //your code
    })
    })
    })
    .catch(error => {
    console.log(
    error
    )
    })
    }
    ,

    loginHandler

    loginHandler() {
            let params = {
              username: this.username,
              password: this.password,
              geetest_challenge: this.validResult.geetest_challenge,
              geetest_validate: this.validResult.geetest_validate,
              geetest_seccode: this.validResult.geetest_seccode
            };
            this.$api.userLogi(params)
              .then(res => {
                console.log(
                  res
                )
              }).catch(error => {
              console.log(
                error
              )
            })
    
    
          }

    参考官方文档:https://docs.geetest.com/install/deploy/client/web

  • 相关阅读:
    黑马程序员_使用Jquery实现AJAX功能
    BootStrap 推荐网站
    工具类
    ExtJS 模块案例(增删改查)
    sql server 经典语句。~转 (入门必看)
    sql 时间格式转换
    转载wuhuacong(伍华聪)的专栏 利用Aspose.Word控件实现Word文档的操作 (留作笔记)
    c#操作Word文件 导出数据到word文档 (table 书签方式)
    ExtJs之格式化(Ext.util.Format) ~转
    查询/修改XML里某个字段的值
  • 原文地址:https://www.cnblogs.com/zivli/p/10656329.html
Copyright © 2011-2022 走看看