Java实现拖动图片验证处理

效果

话不多说,点击查看 实现的效果

  • 前端

image

  • 后台

image

核心流程分析

  • 服务端随机生成滑块图片和带滑块抠图的背景图片,并保存滑块抠图的坐标位置

  • 前端实现滑动交互,将抠图拼在抠图阴影之上,获取到用户滑动轨迹

  • 前端将滑动轨迹上报到服务端,服务端匹配是否与抠图坐标在允许的误差范围(这里单纯校验用户滑动距离是最基本的校验,出于更高的安全考虑,
    还会考虑用户滑动的整个轨迹,用户在当前页面的访问行为等。这些可以很复杂,甚至借助到用户行为数据分析模型,
    最终的目标都是增加非法的模拟和绕过的难度。)

  • 滑动轨迹验证通过,服务端生成ticket票据和验证码随机数jsonp方式给到前端

  • 前端将验证通过的ticket和随机数上报给业务服务端

  • 业务服务端调用API方式到验证码服务器校验ticket的合法性

image

本文重点讲的核心是滑动验证码中滑块和阴影背景图的处理生成,滑块的形状和抠图坐标位置都是随机
生成的,这样可以增加暴力破解的难度。

话不多说,直接上关键实现代码


    /**
     * 生成随机滑块形状
     * 
     * 0 透明像素
     * 1 滑块像素
     * 2 阴影像素
     *
     * @return
     */
    private static int[][] getBlockData() {
   
        int[][] data = new int[CUT_WIDTH][CUT_HEIGHT];

        //(x-a)²+(y-b)²=r²
        //x中心位置左右5像素随机
        double x1 = RECTANGLE_PADDING + (CUT_WIDTH - 2 * RECTANGLE_PADDING) / 2.0 - 5 + RandomUtil.randomInt(0, 11);
        //y 矩形上边界半径-1像素移动
        double y1_top = RECTANGLE_PADDING - RandomUtil.randomInt(0, 3);
        double y1_bottom = CUT_HEIGHT - RECTANGLE_PADDING + RandomUtil.randomInt(0, 3);
        double y1 = RandomUtil.randomInt(0, 2) == 1 ? y1_top : y1_bottom;


        double x2_right = CUT_WIDTH - RECTANGLE_PADDING - circleR + RandomUtil.randomInt(0, 2 * circleR - 3);
        double x2_left = RECTANGLE_PADDING + circleR - 2 - RandomUtil.randomInt(0, 2 * circleR - 3);
        double x2 = RandomUtil.randomInt(0, 2) == 1 ? x2_right : x2_left;
        double y2 = RECTANGLE_PADDING + (CUT_HEIGHT - 2 * RECTANGLE_PADDING) / 2.0 - 5 + RandomUtil.randomInt(0
  • 1
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 26
    评论
实现滑动图片拼图验证的步骤如下: 1.准备两张图片,一张是完整的原图,另一张是被拆分的拼图。 2.使用Java的Graphics类将原图和拼图绘制到JPanel上。 3.使用Java的Random类生成一个随机位置,将拼图绘制到原图的随机位置。 4.使用Java的MouseAdapter类监听鼠标事件,当用户按下鼠标并拖动时,将拼图跟随鼠标移动。 5.使用Java的Rectangle类判断拼图是否在原图的正确位置,如果是,则验证通过,否则提示用户重新拼图。 下面是一个简单的Java代码示例: ```java import java.awt.*; import java.awt.event.MouseAdapter; import java.awt.event.MouseEvent; import java.util.Random; import javax.swing.*; public class SlidePuzzle extends JPanel { private Image img; // 原图 private Image puzzleImg; // 拼图 private Point puzzleLoc; // 拼图位置 private Rectangle puzzleRect; // 拼图矩形 private boolean isDragging; // 是否正在拖动 public SlidePuzzle() { // 加载图片 img = new ImageIcon("original.jpg").getImage(); puzzleImg = new ImageIcon("puzzle.jpg").getImage(); // 随机生成拼图位置 Random rand = new Random(); int x = rand.nextInt(img.getWidth(null) - puzzleImg.getWidth(null)); int y = rand.nextInt(img.getHeight(null) - puzzleImg.getHeight(null)); puzzleLoc = new Point(x, y); // 创建拼图矩形 puzzleRect = new Rectangle(puzzleLoc.x, puzzleLoc.y, puzzleImg.getWidth(null), puzzleImg.getHeight(null)); // 添加鼠标监听器 addMouseListener(new MouseAdapter() { public void mousePressed(MouseEvent e) { if (puzzleRect.contains(e.getPoint())) { isDragging = true; } } public void mouseReleased(MouseEvent e) { if (isDragging) { isDragging = false; if (puzzleRect.intersects(new Rectangle(300, 300, 100, 100))) { JOptionPane.showMessageDialog(null, "验证通过!"); } else { JOptionPane.showMessageDialog(null, "拼图不正确,请重新拼图!"); } } } }); addMouseMotionListener(new MouseAdapter() { public void mouseDragged(MouseEvent e) { if (isDragging) { puzzleLoc.translate(e.getX() - puzzleRect.x, e.getY() - puzzleRect.y); puzzleRect.setLocation(puzzleLoc); repaint(); } } }); } public void paintComponent(Graphics g) { super.paintComponent(g); g.drawImage(img, 0, 0, null); g.drawImage(puzzleImg, puzzleLoc.x, puzzleLoc.y, null); } public static void main(String[] args) { JFrame frame = new JFrame("滑动拼图验证"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(600, 600); frame.add(new SlidePuzzle()); frame.setVisible(true); } } ```
评论 26
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值