Django：极验（滑动验证）

这是前后端分离的项目中，使用极验官网提供的滑动验证来完整验证的部分

前端

 

    methods: {
      loginHandler() {
        let params = {
          username: this.username,
          password: this.password,
          geetest_challenge: this.validateResult.geetest_challenge,
          geetest_validate: this.validateResult.geetest_validate,
          geetest_seccode: this.validateResult.geetest_seccode
        };
        this.$http.userLogin(params)
          .then(res => {

            if (res.data.code == 1000) {
              this.$router.push({
                //重定向，编程式导航
                name: "Home"
              });
              localStorage.setItem('token', res.data.token);
              localStorage.setItem('username', res.data.userinfo.username);
              localStorage.setItem('head_img', res.data.userinfo.head_img);
              // localStorage.setItem('shop_cart_num',res.data.shop_cart_num);
              let user = {
                token: localStorage.getItem('token'),
                username: localStorage.getItem('username'),
                head_img: localStorage.getItem('head_img'),
              };
              // dispacth action的行为
              this.$store.dispatch('getUserInfo', user)
            } else {
              this.$message('登录失败')
            }
          })
          .catch(err => {
            console.log(err);
          })
      },
      getGeetest() {
        // 获取验证码滑动块
        this.$http.geetest()
          .then(res => {
            let data = res.data;
            //{success: 1, gt: "37ca5631edd1e882721808d35163b3ad", challenge: "99851e139f82e509f8f88135f422a0b0"}
            var _this = this;
            //请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
            initGeetest({
              // 以下配置参数来自服务端 SDK
              gt: data.gt,
              challenge: data.challenge,
              offline: !data.success,
              new_captcha: true,
              product: 'popup',
              width: '100%'
            }, (captchaObj) => {
              var result = captchaObj.getValidate();

              // 这里可以调用验证实例 captchaObj 的实例方法
              captchaObj.appendTo("#geetest"); //将验证按钮插入到宿主页面中captchaBox元素内
              captchaObj.onReady(() => {
                //your code
              }).onSuccess(() => {
                var result = captchaObj.getValidate();
                this.validateResult = result;    //  result中含有三个验证值，在后端需要进行校验
              }).onError(() => {
              })
            })
          })
          .catch(err => {
            console.log(err);
          })
      }
    },
    created() {
      this.getGeetest()
    }

 

 

 

 

 

 

 

 

 

后端

 

 

 

---

 

官方文档