java实现滑动验证解锁

本文实例为大家分享了java实现滑动验证解锁的具体代码,供大家参考,具体内容如下

1.html:

<div class="drag">
   <div class="bg"></div>
    <div class="text" onselectstart="return false;">请拖动滑块解锁</div>
    <div class="dragBtn">>></div>
   </div>

<script>
 /*    滑动验证码    */
 var successRand = '';
 //一、定义一个获取DOM元素的方法
 var
  box = document.querySelector(".drag"),//容器
  bg = document.querySelector(".bg"),//背景
  text = document.querySelector(".text"),//文字
  btn = document.querySelector(".dragBtn"),//滑块
  success = false,//是否通过验证的标志
  distance = box.offsetWidth - btn.offsetWidth;//滑动成功的宽度(距离)

 //二、给滑块注册鼠标按下事件
 btn.onmousedown = function(e){

  //1.鼠标按下之前必须清除掉后面设置的过渡属性
  btn.style.transition = "";
  bg.style.transition ="";

  //说明:clientX 事件属性会返回当事件被触发时,鼠标指针向对于浏览器页面(或客户区)的水平坐标。

  //2.当滑块位于初始位置时,得到鼠标按下时的水平位置
  var e = e || window.event;
  var downX = e.clientX;

  //三、给文档注册鼠标移动事件
  document.onmousemove = function(e){

   var e = e || window.event;
   //1.获取鼠标移动后的水平位置
   var moveX = e.clientX;

   //2.得到鼠标水平位置的偏移量(鼠标移动时的位置 - 鼠标按下时的位置)
   var offsetX = moveX - downX;

   //3.在这里判断一下:鼠标水平移动的距离 与 滑动成功的距离 之间的关系
   if( offsetX > distance){
    offsetX = distance;//如果滑过了终点,就将它停留在终点位置
   }else if( offsetX < 0){
    offsetX = 0;//如果滑到了起点的左侧,就将它重置为起点位置
   }

   //4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
   btn.style.left = offsetX + "px";
   bg.style.width = offsetX + "px";

   //如果鼠标的水平移动距离 = 滑动成功的宽度
   if( offsetX == distance){

    //1.设置滑动成功后的样式
    text.innerHTML = "验证通过";
    text.style.color = "#fff";
    btn.innerHTML = "√";
    btn.style.color = "green";
    bg.style.backgroundColor = "lightgreen";

    //2.设置滑动成功后的状态
    success = true;
    //成功后,清除掉鼠标按下事件和移动事件(因为移动时并不会涉及到鼠标松开事件)
    btn.onmousedown = null;
    document.onmousemove = null;

    //3.成功解锁后的回调函数
    setTimeout(function(){
     successRand = new Date().getTime() + Math.random();
     var obj = {};
     obj.rand = successRand;
     $.ajax({
        type: "post",
        url: projectName + "/loginC/setRand",
        data: JSON.stringify(obj),
        datatype: 'json',
        contentType: "application/json",
        success: function (data) {
         //console.log(vm.parent.success);
         //console.log(vm.isTest);
         if (data.success == true) {
         } else {
          layer.alert(data.message);
          // change_authimage();
         }
        },
        error: function () {
         layer.alert("请求失败");
        }
       });
    },1);
   }
  }

  //四、给文档注册鼠标松开事件
  document.onmouseup = function(e){

   //如果鼠标松开时,滑到了终点,则验证通过
   if(success){
    return;
   }else{
    //反之,则将滑块复位(设置了1s的属性过渡效果)
    btn.style.left = 0;
    bg.style.width = 0;
    btn.style.transition = "left 1s ease";
    bg.style.transition = "width 1s ease";
   }
   //只要鼠标松开了,说明此时不需要拖动滑块了,那么就清除鼠标移动和松开事件。
   document.onmousemove = null;
   document.onmouseup = null;
  }
 }

 // 复位验证滑块
 function restDragBtn() {
  /*btn.style.left = 0;
  bg.style.width = 0;
  btn.style.transition = "left 1s ease";
  bg.style.transition = "width 1s ease";
  text.innerHTML = "请拖动滑块解锁";
  btn.innerHTML = ">>>";
  text.style.color = "#a9a9a9";*/
  location.reload();
 }
</script>

2.后端:

@RequestMapping(value="/setRand",method = RequestMethod.POST)
 @ResponseBody
 @ApiOperation(value = "设置验证码成功")
 //@ApiImplicitParam(paramType = "query",name= "username" ,value = "用户名",dataType = "string")
 /*public void userLogin(@RequestParam(value = "username" , required = false) String username,
       @RequestParam(value = "password" , required = false) String password)*/
 public Message setRand(@RequestBody JSONObject json,HttpServletRequest request){
  Message message = new Message();
  String rand = json.getString("rand");
  if(StringUtils.isNotBlank(rand)){
   // 将认证码存入redis
   HttpSession httpSession = request.getSession();
   redisUtil.set(httpSession.getId() + ".rand",rand);
   redisUtil.expire(httpSession.getId() + ".rand",60);
   message.setSuccess(true);
  }else{
   message.setMessage("发生异常,请刷新重试");
  }

  return message;
}

3.登录验证时:

// 验证验证码
 String randInput = json.getString("rand");
 String rand = (String) redisUtil.get(httpSession.getId() + ".rand");

    if(randInput==null||!randInput.equals(rand)) {
     message.setMessage("验证码验证失败");
     // 清空验证码
     redisUtil.set(httpSession.getId() + ".rand","");
     return message;
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-07-23

java实现图片滑动验证(包含前端代码)

前言 1.下面是一个效果展示: 2.先抱怨一下,在博客上面的抄袭真的非常严重,为了实现一个图片滑动验证,我搜索了挺久的资料,不过内容翻来覆去就是同样的内容,千篇一律,作者还各不相同:内容相同我就不多说了,毕竟能解决问题就行,然而恰恰相反,这些东西都没有为我实质性地解决问题.可能图片验证是一个需要前后台同时交互的功能吧,从业的人员大部分都是偏向后台或者偏向前台的,所以写出来的博客都不能完整阐述整个流程,下面是我自己实践完成的内容,记录一下,供各位参阅斧正. 注:由于使用到的控件和工具较多,有许多地

selenium+java破解极验滑动验证码的示例代码

摘要 分析验证码素材图片混淆原理,并采用selenium模拟人拖动滑块过程,进而破解验证码. 人工验证的过程 1.打开威锋网注册页面 2.移动鼠标至小滑块,一张完整的图片会出现(如下图1) 3.点击鼠标左键,图片中间会出现一个缺块(如下图2) 4.移动小滑块正上方图案至缺块处 5.验证通过 selenium模拟验证的过程 加载威锋网注册页面 下载图片1和缺块图片2 根据两张图片的差异计算平移的距离x 模拟鼠标点击事件,点击小滑块向右移动x 验证通过 详细分析 1.打开chrome浏览器控制台,会

Java实现仿淘宝滑动验证码研究代码详解

通过下面一张图看下要实现的功能,具体详情如下所示: 现在我就来介绍些软件的其它功能.希望大家有所受益. 模拟人为搜索商品 在刷单的时候,不能直接拿到一个商品网址就进入购买页面吧,得模拟人为搜索. 在这一个过程中有两个难点: 1)商品列表的异步加载 ; 2)翻页并且截图; 在园子里,我就不在关公面前耍大刀了. 直接上关键代码: i:搜索商品,并且翻页 public bool? SearchProduct(TaskDetailModel taskDetailData) { bool? result

Java实现滑动验证码的示例代码

最近滑动验证码在很多网站逐步流行起来,一方面对用户体验来说,比较新颖,操作简单,另一方面相对图形验证码来说,安全性并没有很大的降低.当然到目前为止,没有绝对的安全验证,只是不断增加攻击者的绕过成本. 接下来分析下滑动验证码的核心流程: 后端随机生成抠图和带有抠图阴影的背景图片,后台保存随机抠图位置坐标 前端实现滑动交互,将抠图拼在抠图阴影之上,获取到用户滑动距离值,比如以下示例 前端将用户滑动距离值传入后端,后端校验误差是否在容许范围内. 这里单纯校验用户滑动距离是最基本的校验,出于更高的安全考

js+java实现登录滑动图片验证

最新需要公司要求在不改变原来的登录逻辑的情况下,将原来的验证码登录的形式改成滑动图片的形式!下面是做出来的效果: 实现思路:所有的图片数据,验证全部由后端来做.前端调用接口,后端会返回两张经过base64加密的图片信息,分别是背景图片和滑块图片,前端滑动滑块以后将X方向的滑动距离传回后端做验证,验证成功以后再做后续的登录逻辑验证,以下是完整的过程: 获取背景图,我这边是在FTP上放了10张图片,随机获取一张. @LogAnnotation(description = "web获取滑动图片信息&q

java图片滑动验证(登录验证)原理与实现方法详解

本文实例讲述了java图片滑动验证(登录验证)原理与实现方法.分享给大家供大家参考,具体如下: 这是我简单做出的效果图,处理300X150px的校验图,并把图片发到前端,用时50毫秒左右,速度还是非常快的. 原理: 1.利用java从大图中随机抠出一张小图,并在大图上给抠出小图的位置加阴影,然后把这两张图片返回给前端: 2.前端获取图片,用户滑动小图到阴影的位置,获取小图滑动的距离,返回给java后台进行校验: 3.校验通过,返回校验通过编号: 4.前端调登录接口,把账号.密码.和校验编号传到J

Java selenium处理极验滑动验证码示例

要爬取一个网站遇到了极验的验证码,这周都在想着怎么破解这个,网上搜了好多知乎上看到有人问了这问题,我按照这思路去大概实现了一下. 1.使用htmlunit(这种方式我没成功,模拟鼠标拖拽后轨迹没生成,可以跳过) 我用的是java,我首先先想到了用直接用htmlunit,我做了点初始化 private void initWebClient() { if (webClient != null) { return; } webClient = new WebClient(BrowserVersion.

Python3网络爬虫开发实战之极验滑动验证码的识别

上节我们了解了图形验证码的识别,简单的图形验证码我们可以直接利用 Tesserocr 来识别,但是近几年又出现了一些新型验证码,如滑动验证码,比较有代表性的就是极验验证码,它需要拖动拼合滑块才可以完成验证,相对图形验证码来说识别难度上升了几个等级,本节来讲解下极验验证码的识别过程. 1. 本节目标 本节我们的目标是用程序来识别并通过极验验证码的验证,其步骤有分析识别思路.识别缺口位置.生成滑块拖动路径,最后模拟实现滑块拼合通过验证. 2. 准备工作 本次我们使用的 Python 库是 Selen

thinkphp整合系列之极验滑动验证码geetest功能

给一个央企做官网,登录模块用的thinkphp验证码类.但是2019-6-10到12号,国家要求央企检验官网漏洞,防止黑客攻击,正直贸易战激烈升级时期,所以各事业单位很重视官网安全性,于是乎集团总部就委托了宁波一个专业检测公司用专业工具检测出,后台验证码能用打码工具暴力破解,发函要求整改.so,就有了下面的极速验证图形 官网:http://www.geetest.com/ 一:注册获取key 注册:创建应用:获取key: 二:导入sdk /ThinkPHP/Library/Org/Xb/Geet

java selenium处理Iframe中的元素示例

java selenium  处理Iframe 中的元素 有时候我们定位元素的时候,发现怎么都定位不了. 这时候你需要查一查你要定位的元素是否在iframe里面 阅读目录 什么是iframe iframe 就是HTML 中,用于网页嵌套网页的. 一个网页可以嵌套到另一个网页中,可以嵌套很多层. selenium 中提供了进入iframe 的方法 // 进入 id 叫frameA 的 iframe dr.switchTo().frame("frameA"); // 回到主窗口 dr.sw

Django中使用极验Geetest滑动验证码过程解析

一,环境部署 1.创建一个django测试项目 二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github.com/GeeTeam/gt3-python-sdk.git 手动下载压缩包文件:https://github.com/GeeTeam/gt3-python-sdk/archive/master.zip 2.参数配置 修改请求参数(可选) 名称 说明 user_id 用户标识,若担心用户信息风险,可作预处理(如哈

使用puppeteer破解极验的滑动验证码

基本的流程: 1. 打开前端网,点击登录. 2. 填写账号,密码. 3. 点解验证按钮,通过滑动验证,最后成功登陆. 代码实现: github上可以checkout. 具体代码如下所示: run.js const puppeteer = require('puppeteer'); const devices = require('puppeteer/DeviceDescriptors'); const iPhone = devices['iPhone 6 Plus']; let timeout

python3 破解 geetest(极验)的滑块验证码功能

下面一段代码给大家介绍python破解geetest 验证码功能,具体代码如下所示: from selenium import webdriver from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.common.action_chains import ActionChains import PIL.Image as image import time,re, random import