滑块验证码实现，自己也可以手搓，灵活多变

已于 2024-08-08 11:16:05 修改
阅读量382 收藏 4
点赞数 11
文章标签： python django flask javascript css ajax html
于 2024-07-23 16:17:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66727779/article/details/140638164
版权

众所周知，在网络爬虫横行的今天，网站为了保护自己的权益，不得不增加保护网站数据得安全措施。

源码：Q_Q 1690361973

好了，进入主题QAQ

一.首先就是如何生成缺口图跟带有缺口的背景图

     逻辑：利用PIL库将一张图片设置成自己想要的大小，然后根据random随机在图片上裁剪出缺口，然后保存缺口图片跟被裁剪过的带缺口的背景图。同时返回缺口的坐标，方便后面跟前端返回的坐标进行比较。

from PIL import Image, ImageDraw, ImageFilter
import random

def create_slider_captcha(image_path, output_dir, block_size=40, target_size=(260, 130)):
    # 打开图像并转换为 RGBA 格式
    image = Image.open(image_path).convert("RGBA")
    # 调整图像大小到目标尺寸
    image = image.resize(target_size, Image.Resampling.LANCZOS)
    width, height = target_size

    # 随机选择缺口的位置
    gap_left = random.randint(block_size, width - block_size * 2)
    gap_top = random.randint(0, height - block_size)

    # 创建图像的副本以绘制缺口
    background_with_gap = image.copy()
    draw = ImageDraw.Draw(background_with_gap)
    # 绘制一个透明的矩形以创建缺口
    draw.rectangle((gap_left, gap_top, gap_left + block_size, gap_top + block_size), fill=(255, 255, 255, 0))

    # 从原始图像中裁剪出滑块
    slider_block = image.crop((gap_left, gap_top, gap_left + block_size, gap_top + block_size))

    # 创建一个新的黑白遮罩图像
    mask = Image.new("L", (block_size, block_size), 0)
    draw_mask = ImageDraw.Draw(mask)
    # 在遮罩图像上绘制白色矩形
    draw_mask.rectangle((0, 0, block_size, block_size), fill=255)
    # 对遮罩图像应用高斯模糊
    mask = mask.filter(ImageFilter.GaussianBlur(3))
    
    # 将遮罩应用于滑块图像
    slider_block.putalpha(mask)

    # 保存带缺口的背景图像
    background_with_gap.save(f"{output_dir}/background_with_gap.png")
    # 保存滑块图像
    slider_block.save(f"{output_dir}/slider_block.png")

    # 返回缺口的坐标
    return ('gap_left:', gap_left, 'gap_top:', gap_top)

# 示例调用
gap_coordinates = create_slider_captcha("1.jpg", r"F:\Python_files\webhtml\output\/")
print(f"缺口坐标: {gap_coordinates}")

二.将图片加载到前端，这里的逻辑应该是将图片跟x坐标从服务器加载到前端的，但是重点是实现滑块，这里就改成本地加载了

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>滑块验证码</title>
    <style>
        /*滑块验证的css样式*/
        .captcha-container {
            position: relative;
            width: 260px;
            height: 130px;
            border: 1px solid #ccc;
            margin-bottom: 1px;
        }

        .captcha-image {
            width: 100%;
            height: 130px;
        }

        .slider-block {
            position: absolute;
            top: 0;
            width: 40px;
            height: 40px;
            z-index: 2;
        }

        .slider-container {
            width: 260px;
            height: 20px;
            background-color: #eee;
            border-top: 1px solid #ccc;
            display: flex;
            align-items: center;
            position: relative;
        }

        .slider-container::before {
            content: '向右滑动完成验证';
            position: absolute;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 14px;
            color: #0c0c0c;
        }

        .slider {
            width: 40px;
            height: 100%;
            background-color: #0dddec;
            cursor: pointer;
            position: absolute;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #000;
        }

        .slider::before {
            content: '>';
        }
    </style>
</head>

<body>
    <div class="captcha-container">
        <img src="output/background_with_gap.png" class="captcha-image" id="captcha-image">
        <img src="output/slider_block.png" class="slider-block" id="slider-block" style="left: 0;">
    </div>
    <div class="slider-container">
        <div class="slider" id="slider" style="left: 0;"></div>
    </div>

    <script>
        const slider = document.getElementById('slider');
        const sliderBlock = document.getElementById('slider-block');
        let isDragging = false;
        let startX = 0;

        const gapLeft = 176; // 将此值替换为你的缺口的实际横坐标
        const gapTop = 64; // 将此值替换为你的缺口的实际纵坐标
        sliderBlock.style.top = gapTop + 'px';

        slider.addEventListener('mousedown', function (e) {
            isDragging = true;
            startX = e.clientX - parseInt(slider.style.left, 10); // 记录鼠标按下时的初始位置
        });

        document.addEventListener('mouseup', function () {
            if (isDragging) {
                isDragging = false;
                const currentLeft = parseInt(slider.style.left, 10);
                if (Math.abs(currentLeft - gapLeft) < 5) {
                    alert('验证通过');
                } else {
                    alert('验证失败');
                    slider.style.left = '0px';
                    sliderBlock.style.left = '0px';
                }
            }
        });

        document.addEventListener('mousemove', function (e) {
            if (isDragging) {
                const moveX = e.clientX - startX;
                if (moveX >= 0 && moveX <= (260 - 40)) {
                    slider.style.left = moveX + 'px';
                    sliderBlock.style.left = moveX + 'px';
                }
            }
        });
    </script>
</body>

</html>

本地实现，将下面这两行的背景图跟滑块图路劲改成你自己的

<img src="output/background_with_gap.png" class="captcha-image" id="captcha-image">
<img src="output/slider_block.png" class="slider-block" id="slider-block" style="left: 0;">

 将这里的坐标替换成你自己生成的实际的坐标

const gapLeft = 176; // 将此值替换为你的缺口的实际横坐标
const gapTop = 64; // 将此值替换为你的缺口的实际纵坐标

如果要实现服务器验证也是一样的，创建个服务，然后从服务器获取图片跟x值，加载到上面的网页中即可，例如下面创建一个Ajax

// 滑块验证
let gapTop = 0;

function initializeCaptcha() {
    // 使用 Ajax 请求从后端获取 Base64 编码的图片和缺口坐标
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/Slide_verification/', true); // 替换为你的后端 API 端点
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText)
            const response = JSON.parse(xhr.responseText);
            const backgroundBase64 = response.backgroundImage;
            const sliderBlockBase64 = response.sliderBlockImage;
            gapTop = response.gapTop; // 后端返回的缺口纵坐标

            const captchaImage = document.getElementById('captcha-image');
            const sliderBlock = document.getElementById('slider-block');

            captchaImage.src = `data:image/png;base64,${backgroundBase64}`;
            sliderBlock.src = `data:image/png;base64,${sliderBlockBase64}`;
            sliderBlock.style.top = gapTop + 'px';

            resetSlider();
        }
    };
    xhr.send();
}

const slider = document.getElementById('slider');
const sliderBlock = document.getElementById('slider-block');
let isDragging = false;
let startX = 0;

function resetSlider() {
    slider.style.left = '0px';
    sliderBlock.style.left = '0px';
}

slider.addEventListener('mousedown', function (e) {
    isDragging = true;
    startX = e.clientX - parseInt(slider.style.left, 10); // 记录鼠标按下时的初始位置
});

document.addEventListener('mouseup', function () {
    if (isDragging) {
        isDragging = false;
        const currentLeft = parseInt(slider.style.left, 10);
        // 发送验证请求到后端
        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/Slide_verification/', true); // 替换为你的后端 API 端点
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const response = JSON.parse(xhr.responseText);
                if (response.success) {
                    alert('验证通过');
                    // 处理返回的token，比如存储在localStorage或sessionStorage
                    localStorage.setItem('sliderToken', response.token);
                    document.getElementById('error-message-1').textContent = response.message ;
                } else {
                    alert('验证失败');
                    document.getElementById('error-message-1').textContent = response.message ;
                    initializeCaptcha(); // 重新加载图像和初始化
                }
            }
        };
        xhr.send('gapLeft=' + currentLeft);
    }
});

document.addEventListener('mousemove', function (e) {
    if (isDragging) {
        const moveX = e.clientX - startX;
        if (moveX >= 0 && moveX <= (260 - 40)) {
            slider.style.left = moveX + 'px';
            sliderBlock.style.left = moveX + 'px';
        }
    }
});
// 初始化验证码
initializeCaptcha();

演示地址：皮卡熊

下期我将讲解文字点选验证

Memory of the blue ocean
关注
  • 11
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
滑块验证码前端实现
05-30
仿支付宝滑块验证码前端实现,造福人类，大家拿去玩吧。
滑块验证码实现及原理
想搞全栈的前端
06-17 1万+
前言 滑块验证码也是生活中常见的，本文会介绍如何实现以及原理。如果对图片验证码感兴趣的话可以查看这篇文章：图片验证码的实现方法 实现 滑块验证码主要用到几个属性:clientX,screenX,pageX,offsetX,如果对此有疑惑可以查看这篇文章：clientX,screenX,pageX,offsetX的区别 代码的解释在注释中已经写的很清楚了，还不了解的欢迎留言。 <!DOCTY...
Java实现滑块拼图验证码校验（亲测有效）
weixin_46991199的博客
06-24 828
这里使用 以小图的四边为最终边界，上凹下凸，左无由凸，左边框高亮阴暗简单处理。返回滑块拼图验证码信息：两个Base64字符串图片信息和(X,Y)坐标。通过token，获取 Redis中的 (X,Y)坐标值，注意有效期。返回前端，两个Base64字符串图片信息，Y坐标值和 token。在阈值误差范围内，返回前端验证通过，否则返回前端验证不通过。在若干原图中随机一张原图，生成滑块拼图验证码信息。滑动拼图结束后，调用校验滑块拼图验证码接口。调用获取滑块拼图验证码接口，展示图片信息。
滑块验证码实现
星海IT学习之路
07-03 4473
前言 滑块验证码也是生活中常见的，本文会介绍如何实现以及原理。 如果对验证码实现感兴趣的可以看这篇文章：验证码实现 - html页面版 如果对验证码实现感兴趣的可以看这篇文章：验证码实现 - 工具类调用版 代码实现 滑块验证码主要用到几个属性:clientX,screenX,pageX,offsetX。 代码的解释在注释中已经写的很清楚了，如有更好的实现方式欢迎留言。 <%@ page contentType="text/html;charset=UTF-8" language="java" %&g
SpringBoot项目实现滑块验证码功能
liuxiangheguoyan的博客
03-17 1380
SpringBoot项目实现滑块验证码功能
登录校验之滑块验证码完整实现（vue + springboot）
热门推荐
Java升级之路的博客
09-08 1万+
嗨，大家好，我是希留。验证码一直是各类网站登录和注册的一种校验方式，是用来防止有人恶意使用脚本批量进行操作从而设置的一种安全保护方式。随着近几年技术的发展，人们对于系统安全性和用户体验的要求越来越高，大多数网站系统都逐渐采用行为验证码来代替传统的图片验证码。今天这篇文章就来记录一下，我是如何实现从前端、到后端校验的整个流程的。
SpringBoot实现滑块验证码.zip
01-15
springboot实现滑块验证码，后端随机生成抠图和带有抠图阴影的背景图片，后台保存随机抠图位置坐标，前端实现滑动交互，将抠图拼在抠图阴影之上，获取到用户滑动距离值。前端将用户滑动距离值传入后端，后端校验误差...
OpenCV搞定腾讯滑块验证码的实现代码
09-19
### OpenCV搞定腾讯滑块验证码实现详解 #### 前言 随着网络安全意识的提高以及自动化工具的发展，网站为了防止恶意爬虫或机器人攻击，往往会采用各种形式的验证码技术。其中，滑块验证码因其较高的安全性与用户体验...
php 滑块验证码实现流程
最新发布
07-10
php 滑块验证码实现流程
javascript实现支付宝滑块验证码效果
10-15
这种验证码方式提供了良好的用户体验，同时也保持了一定的安全性。 首先，我们需要了解HTML部分，它是整个滑块验证码的结构基础。在这个示例中，`<div id="wrapper">` 包含了一个拖动元素`<div id="drag">`，其中...
实现滑动验证码
lingyuncelia的博客
02-13 995
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实现滑动验证码</title> <style> .tracks{ /*滑轨样式*/ width:390px; height:40px; background: #d0c4fe; overflow: hidden; ..
仿支付宝滑块验证码前端实现
03-16
本实例实现了 仿支付宝 滑块验证码前端效果，博客参考：http://blog.csdn.net/shuai_wy/article/details/62419257
Java实现滑块拼图验证码校验
Charge8的博客
06-03 5415
Java实现滑块拼图验证码校验
爽，我终于实现了selenium图片滑块验证码【附代码】
03-08 1534
因为种种原因没能实现愿景的目标，在这里记录一下中间结果，也算是一个收场吧。这篇文章主要是用selenium解决滑块验证码的个别案列。
【JS】滑动验证实现
weixin_56286359的博客
03-21 1236
基于 Javascript 实现动态滑动验证效果
揭秘前端滑块验证技术
菜菜程序员
09-27 1556
滑块验证作为一种反机器人的工具，也会不断发展和演进，以适应不断变化的威胁。前端验证可以提供用户友好的反馈，但最终的验证应该由后端来完成，防止攻击者绕过前端验证，采用后端验证可以确保只有经过验证的请求才能被处理。业内有一些常用的方案和最佳实践，以下是一些业内常用的方案，我在后续的文章中详细讨论，可以关注我及时了解后续。为了增加滑块验证的难度，滑块的位置和缺口的位置应该是随机的，不能是固定的。下面我们实现一个简单的滑块验证示例，通过简单的HTML、CSS和JavaScript来实现一个完整的拼图验证码。
滑块验证码的一种实现方法
qq_35172441的博客
10-26 97
# 开发日期 2023/5/27 # 专业 计算机科学与技术import base64 import re import time import numpy as np import cv2 from PIL import Image from selenium import webdriver from selenium.webdriver.common.by import By from matplotlib import pyplot as plt import random from se
【JavaScript】使用js实现滑块验证、成语拆解验证功能；浏览器打印功能
weixin_52479803的博客
08-18 1895
【JavaScript】使用js实现滑块验证、成语拆解验证功能；浏览器打印功能
实现javaweb滑块验证码
04-25
好的，关于实现javaweb滑块验证码，一般步骤如下： 1. 前端页面展示滑块验证码组件。可以使用第三方库或自己实现。 2. 前端生成随机的验证码图片，并在滑块上设置缺口，以此来验证用户行为。 3. 当用户拖动滑块时，前端程序将滑块位置信息和随机验证码图片信息一并发往后端，以便进行验证码的验证。 4. 后端程序接受到请求后，需要对用户的行为进行验证，确定用户是否是正常操作，不是机器行为。 5. 验证通过后，后端程序将结果告诉前端程序，并根据需要返回可访问的页面或数据。 以上是一般实现方法，具体实现细节可能会根据具体的需求而有所不同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值