极验验证配合后端实现滑块验证后再下发验证码避免机器一直刷

于 2024-03-19 18:00:58 发布
阅读量140 收藏
点赞数 3
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64115279/article/details/136850290
版权

代码如下

  
    <!-- 引入极验验证码 放在pblic 官网下载的包，放在本地更稳定-->
    <script src="/geetest/gt.js"></script>
 // template  因为是登录直接使用axios 和jquery
    import $ from "jquery"
   <a-form-item field="" hide-asterisk>
                <div class="secondBy"> 
                <div id="captcha">
                  <div id="text">
                    行为验证™ 安全组件加载中
                  </div>
                  <div id="wait" class="show">
                    <div class="loading">
                      <div class="loading-dot"></div>
                      <div class="loading-dot"></div>
                      <div class="loading-dot"></div>
                      <div class="loading-dot"></div>
                    </div>
                  </div>
                </div>
              </div>
              </a-form-item>
    <a-form-item field="phone" hide-asterisk :rules="[
                { required: true, message: '请输入手机号' },
                {
                  required: true,
                  match: /^1[3456789]\d{9}$/,
                  message: '手机号格式不正确',
                },
              ]">
                <a-input size="large" :max-length="11" style="
                    background-color: #fff;
                    border: 0 0 1px 0 solid #ccc;
                    height: 40px;
                  " placeholder="请输入手机号" v-model="postData.phone" />
              </a-form-item>

 // 请求
  $.ajax({
    url: `http://${import.meta.env.VITE_APP_IP}:9601/system/captcha/index?t=` + (new Date()).getTime(), // 加随机数防止缓存
    type: "get",
    dataType: "json",
    success: function (data) {
      $('#text').hide();
      $('#wait').show();

      // 调用 initGeetest 进行初始化
      // 参数1：配置参数
      // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
      initGeetest({
        // 以下 4 个配置参数为必须，不能缺少
        gt: data.data.gt,
        challenge: data.data.challenge,
        offline: !data.data.success, // 表示用户后台检测极验服务器是否宕机
        new_captcha: data.data.newCaptcha, // 用于宕机时表示是新验证码的宕机
        product: "float", // 产品形式，包括：float，popup
        width: "348px",
        https: true,
        api_server: "apiv6.geetest.com"

        // 更多前端配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
      }, handler);
    }
  });

  var handler = function (captchaObj) {

    captchaObj.appendTo('#captcha');
    captchaObj.onReady(function () {
      $("#wait").hide();
    });
    // captchaObj.destroy();
    var result = captchaObj.getValidate();

    $('#btn').click(function () {
      var result = captchaObj.getValidate();
      if (!result) {
        Message.error({
          content: "请完成验证",
        });
      }
      getCode(result)

    })
    // captchaObj.destroy();
    // 更多前端接口说明请参见：http://docs.geetest.com/install/client/web-front/
  };

  //  获取验证码
  const getCode = (result) => {
    // console.log(result,'jyCheck.value');
    if (!/^1[3456789]\d{9}$/.test(postData.phone)) {
      postData.phone = "";
      Message.error("请输入正确手机号");
      return;
    }
    jyCheck.value.geetest_challenge = result.geetest_challenge,
      jyCheck.value.geetest_validate = result.geetest_validate,
      jyCheck.value.geetest_seccode = result.geetest_seccode
    smsSend({ phone: postData.phone, ...jyCheck.value }).then((res) => {
      console.log(res);
      if (res.code == 200) {
        Message.success({
          content: "验证码获取成功",
        });
        setTime.value = false;
        code.value = res.data.myCode;
        time.value = 60;
      }
    });
  };


// 确定新增 再注册的时候重新加载组件避免下次加载失败，求大佬更好的方法
  const handleSubmitAdd = ({ values, errors }) => {
    if (!errors) {
      // console.log("注册数据", postData);
      if (postData.phone_code !== code.value) {
        postData.phone_code = "";
        Message.error("验证码不正确");
        return;
      }
      if (postData.password !== postData.password_confirmation) {
        postData.password_confirmation = "";
        Message.error("请确认密码");
        return;
      }
      register(postData).then((res) => {
        // console.log(res);
        if (res.code === 200) {
          // $('#wait').hide();
          // $('#text').show();
          loginStu.value = true;
          rgs.value = false;

          $("#captcha").remove()
          $("#wait").remove()
       
           var txt1=  `     <div id="captcha">  <div id="text">
                    行为验证™ 安全组件加载中
                  </div>
                  <div id="wait" class="show">
                    <div class="loading">
                      <div class="loading-dot"></div>
                      <div class="loading-dot"></div>
                      <div class="loading-dot"></div>
                      <div class="loading-dot"></div>
                    </div>
                  </div> </div>`
           $(".secondBy").append(txt1)
          Message.success({
            content: "注册成功",
          });
          // 再次调用极验验证
                  $.ajax({
            url: `http://${import.meta.env.VITE_APP_IP}:9601/system/captcha/index?t=` + (new Date()).getTime(), // 加随机数防止缓存
            type: "get",
            dataType: "json",
            success: function (data) {
              $('#text').hide();
              $('#wait').show();
              // 调用 initGeetest 进行初始化
              // 参数1：配置参数
              // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
              initGeetest({
                // 以下 4 个配置参数为必须，不能缺少
                gt: data.data.gt,
                challenge: data.data.challenge,
                offline: !data.data.success, // 表示用户后台检测极验服务器是否宕机
                new_captcha: data.data.newCaptcha, // 用于宕机时表示是新验证码的宕机
                product: "float", // 产品形式，包括：float，popup
                width: "348px",
                https: true,
                api_server: "apiv6.geetest.com"

                // 更多前端配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
              }, handler);
            }
          });
        }
      });
    }
  };

 // css太多了 没有删 
<style scoped lang="less">
  .bah {
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 50px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
  }

  .aHref {
    color: #000
  }

  .normalR {}

  .normalL {
    width: 100%;
   
  }

  .rgsClass {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
  }

  .loginClass {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
  }

  .icon {
    display: flex;
    align-items: center;
    width: 1200px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .left1 {
    width: 307px;
    height: 213px;
    background: linear-gradient(0deg, #00FFF0 0%, #0BB391 100%);
    background-image: url(../assets/newLogin/图层5.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.63;
    position: absolute;
    top: 49px;
    left: 299px;
  }
  .left2 {
    width: 284px;
    height:313px;
    background-image: url(../assets/newLogin/图层7.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 87px;
    left: 580px;
  
  }
      .left2t{
        width: 82px;
    height: 63px;
    font-size: 22px;
    font-weight: 500;
    color: #FFFFFF;
    position: absolute;
    left: 98px;
    top: 167px;
    text-align: center;
      }
  .left3 {
    width: 282px;
    height:282px;
    background-image: url(../assets/newLogin/环境监测.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 359px;
    left: 193px;
  }
  .left3t{
    width: 79px;
height: 19px;
font-size: 18px;
font-weight: 500;
color: #FFFFFF;
position: absolute;
left: 101px;
top: 153px;
text-align: center;
  }
  .left4 {
    width: 335px;
    height:335px;
    background-image: url(../assets/newLogin/圆.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 368px;
    left: 491px;
  }
  .left4t{
    width:140px;
height: 90px;
position: absolute;
left: 98px;
top: 120px;
background-image: url(../assets/newLogin/5G.png);
background-repeat: no-repeat;
background-size: 100% 100%;
  }
  .left5 {
    width: 241px;
    height:241px;
    background-image: url(../assets/newLogin/设备状态.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 260px;
    left: 865px;
  }
  .left5t{
    width: 56px;
    height: 14px;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    position: absolute;
    left: 93px;
    top: 127px;
    text-align: center;
  }
  .left6 {
    width: 392px;
    height:258px;
    background-image: url(../assets/newLogin/图层4.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 573px;
    left: 44px;
  }
  .left7 {
    width: 264px;
    height:263px;
    background-image: url(../assets/newLogin/光.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 441px;
    left: 296px;
  }
  .left8 {
    width: 307px;
    height:306px;
    background-image: url(../assets/newLogin/气象监测.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 680px;
    left: 520px;
  }
  .left8t{
    width: 95px;
    height: 23px;
    font-size: 20px;
    font-weight: 500;
    color: #FFFFFF;
    position: absolute;
    left: 105px;
    top: 166px;
    text-align: center;
  }
  .left9 {
    width:286px;
    height:199px;
    background-image: url(../assets/newLogin/图层6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 800px;
    left: 775px;
  }
  .left10 {
    width:293px;
    height:279px;
    background-image: url(../assets/newLogin/图层8.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 475px;
    left: 878px;
  }
  .left10t{
    width: 98px;
    height: 24px;
    font-size: 20px;
    font-weight: 500;
    color: #FFFFFF;
    position: absolute;
    left: 97px;
    top: 144px;
    text-align: center;
  }
  .rightK {
   width: 800px;
   height: 100%;
  }

  :deep .arco-tabs-tab-title {
    font-size: 22px;
  }

  :deep .arco-tabs-tab-active {
    color: #4cd392;
  }

  :deep .arco-tabs-nav-ink {
    z-index: 20;
  }

  .from {
    width: 100%;
    padding: 10px 10px 10px 0;
    position: relative;
    
  }

  .itemFrom {
    width: 400px;
    position: absolute;
    top:200px;
    right: 200px; 
    min-height: 350px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #fff;
    /* box-shadow:inset 1px 1px 0 0 ,1px 3px 5px 1px #fff; */
  }

  .bg {
    background-image: url(../assets/newLogin/背景.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  :deep.arco-input-wrapper.arco-input-focus {
    border-bottom: 1px solid #4cd392;
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: 0;
  }

  :deep .arco-input-wrapper {
    border-top: none;
    border-left: none;
    border-right: none;
  }

  .inp {
    border: 1px solid #cccccc;
    border-radius: 2px;
    padding: 0 10px;
    width: 278px;
    height: 40px;
    font-size: 18px;
  }

  .btn {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #cccccc;
    border-radius: 2px;
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
  }

  .btn:hover {
    background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%)
  }

  #captcha {
    width: 348px;
    display: inline-block;
  }

  label {
    vertical-align: top;
    display: inline-block;
    width: 80px;
    text-align: right;
  }

  .geetest_success_animate {
    width: 348px !important;
  }

  .geetest_ghost_success {
    width: 348px !important;
  }

  #text {
    height: 42px;
    width: 346px;
    text-align: center;
    border-radius: 2px;
    background-color: #F3F3F3;
    color: #BBBBBB;
    font-size: 14px;
    letter-spacing: 0.1px;
    line-height: 42px;
  }

  #wait {
    display: none;
    height: 42px;
    width: 346px;
    text-align: center;
    border-radius: 2px;
    background-color: #F3F3F3;
  }

  .loading {
    margin: auto;
    width: 70px;
    height: 20px;
  }

  .loading-dot {
    float: left;
    width: 8px;
    height: 8px;
    margin: 18px 4px;
    background: #ccc;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    opacity: 0;

    -webkit-box-shadow: 0 0 2px black;
    -moz-box-shadow: 0 0 2px black;
    -ms-box-shadow: 0 0 2px black;
    -o-box-shadow: 0 0 2px black;
    box-shadow: 0 0 2px black;

    -webkit-animation: loadingFade 1s infinite;
    -moz-animation: loadingFade 1s infinite;
    animation: loadingFade 1s infinite;
  }

  .loading-dot:nth-child(1) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
  }

  .loading-dot:nth-child(2) {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }

  .loading-dot:nth-child(3) {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }

  .loading-dot:nth-child(4) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }

  @-webkit-keyframes loadingFade {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 0.8;
    }

    100% {
      opacity: 0;
    }
  }

  @-moz-keyframes loadingFade {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 0.8;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes loadingFade {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 0.8;
    }

    100% {
      opacity: 0;
    }
  }
  #full-screen-box {
    height: 1080px !important;
    width: 1920px !important;
    position: relative;
    /* overflow: hidden; */
  }
</style>

CV小白不转弯
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
滑块验证码后台生成及校验
qingtian_weiwei的博客
03-07 2580
前言 在自己做的某一个项目中要求具备滑块验证码的功能，在翻阅部分博客后自己参考编写了一个后台的滑块验证码工具类，这里要给提供参考资料的博客说声谢谢，但是因时间久远忘记了之前的博客地址，所以也要说声抱歉。 思路流程 验证码的生成及验证流程是利用jhlabs jar包工具对图片进行抠图，将抠出的图片与背景图片通过base64编码转转成图片字符串发送给前台，并记录抠出图片的X坐标值，后续校验过程中我们会根据前台用户滑动的X坐标值与我们后台记录的X坐标值进行比较，在坐标值范围内则可证明验证成功。 注意点：
基于Jquery 实现的 滑块验证，防刷单必备
最新发布
07-27
基于Jquery 实现的 滑块验证，有效防止机器行为。纯本地化代码，无需引用第三方服务。
极验滑块验证码破解与研究（四）：滑块轨迹构造
帯泪的鱼的博客
12-01 7985
极验滑块验证码破解与研究（四）：滑块轨迹构造声明一、极验滑动轨迹分析1. 生成滑动轨迹的js入口1.1. 参数搜索方式1.2. 请求调用栈方式2. 滑动轨迹分析3. 滑动轨迹的python实现二、结语*本期文章结束啦，如果对您有帮助，记得收藏加关注哦，后期文章会持续更新 ~~~* 声明 原创文章，请勿转载！ 本文内容仅限于安全研究，不公开具体源码。维护网络安全，人人有责。 本文关联文章超链接： 极验滑块验证码破解与研究（一）：AST还原混淆JS 极验滑块验证码破解与研究（二）：缺口图片还原 极验滑块验证码
一种前后端滑动验证码方案
lonelymanontheway的博客
09-27 1457
概述 实际开发中，很常见的一种需求，即拦截机器人登陆，增加略微复杂的滑动验证码（相对于静态验证码而言）。
Vue3.0 PC端滑块拼图验证，配合后端验证
qq_41620887的博客
02-14 1549
主要是配合element plus 实现UI大致框架，背景图片和拼图都是通过后端接口获取，通过CryptoJS对滑块滑动距离以及当前拼图唯一标识和秘钥进行加密处理，配合后端进行验证。
vue2项目使用图片滑块验证（前后端）
weixin_42255789的博客
05-06 1333
图片滑块验证
极验滑块验证-demo
05-09
极验滑块验证demo
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
10-15
主要介绍了php+js实现的拖动滑块验证码验证表单操作,结合实例形式分析了php+js拖动滑块验证码验证表单操作基本功能实现与使用相关操作技巧,需要的朋友可以参考下
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
10-18
给大家介绍了基于vue实现拖动滑块验证功能，代码引用css与js都是线上的，将代码全部复制到一个html中可以直接打开，超级简单，感兴趣的朋友跟随脚本之家小编一起看看吧
MVC使用极验验证制作登录验证码学习笔记7
01-01
 再后来浏览网页的过程中，发现很多很多网站项目中都使用了一种叫极验验证的验证码，采用移动滑块的方式进行验证，方便美观。而一番搜索之后了解到，官方提供的免费版也足以应付我手头的大多数项目了，不禁想把在...
图片滑动验证JS+后台完整版
11-08
后端采用python+flask+redis，简易实现图片验证功能，如需复杂验证，请记录鼠标拖动轨迹，后端实现分析，有兴趣的朋友可以试试
【JavaScript 逆向】极验三代滑块验证码逆向分析
Yy_Rose的博客
11-30 7837
极验滑块验证码底图还原及 w 参数逆向
拖动验证（前端+后端）
岛泪的博客
05-05 2851
按照自己的思路写了一个拖动验证，不知道别人是不是这样写的，我觉得方法应该差不多。不废话，上代码。 <?php require_once 'Check.php'; if($data = Check::create()){ $x = $data['x']; $y = ($data['y'] - 5).'px'; $name = $data['na...
vue滑块验证，前端+后端代码及逻辑
贤和知识点收藏
01-02 9426
最近总部的漏洞扫描团队天天对我们的系统进行SQL注入，登陆破解..等等，搞得表示压力山大，其中对我们 的滑块验证码存在绕过登陆问题发报，最终把账号、密码登陆下线，今天终于把这块的bug进行修复了，先看效果： 第一步：弹出框架子模块_src/components/loginmove/slide-verify.vue <template> <div cl...
java后端实现滑块拼图验证
weixin_45740898的博客
11-24 1228
1.直接上代码，首先创建一个PuzzleHelper 拼图助手方便生成滑块 你可能会出现的问题： 1.图片转BASE64我用的工具类，你需要自己去网上找一个。 2.你可能报错Can’t read input file!，是因为图片的地址不正确，所以找不到图片。 3.前端需要把图片约束成300*150像素的大小。 package com.xx.puzzle; import com.xx.common.utils.sign.Base64; import com.xx.house.entity.PuzzleIn
图片滑块校验JAVA后端实现方式
weixin_44797037的博客
10-25 1566
首先我们写 图片剪切工具类ImgCutUtil 说白了就是通过这个工具获取一个裁剪图片的编码 （一）获取裁剪图片相关信息 1.裁剪图片获取图片转换流base64 代码前半段是转换流操作，裁剪参数确保随机生成 Map<Object,Object> map = new HashMap<Object,Object>(); Random rand = new ...
极验验证——滑块拼图验证码
热门推荐
cc蒲公英的博客
09-13 3万+
如何使用： 首先要确认前端使用页面，比如登陆页面   1 2 <script src="http://code.jquery.com/jquery-1.12.3.min.js"> <script src="http://static.geetest.com/static/tools/gt.js">
基于Element plus 实现滑块验证
05-28
好的，实现滑块验证需要先引入Element Plus组件库和相关的CSS文件，然后在页面上添加一个滑块组件和一个验证按钮。 HTML代码如下： ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值