通过nginx弄一个滑块加图片的人机验证

2024-06-06 13:54:02
开发
33

要通过 Nginx 实现滑块加图片的人机验证，你可以利用 OpenResty 和 Lua 脚本来生成并处理滑块验证码。滑块验证码的基本流程包括以下步骤：

生成带有缺口的图片。
生成缺口图片。
前端展示图片和滑块。
用户滑动滑块到正确位置。
服务器验证滑块位置。

以下是一个示例的实现步骤：

1. 安装 OpenResty 和 Lua 库

首先，安装 OpenResty 和必要的 Lua 库。

# For Debian/Ubuntu
sudo apt-get install openresty

# For CentOS/RHEL
sudo yum install openresty

# Install LuaRocks
sudo apt-get install luarocks
sudo luarocks install lua-resty-string
sudo luarocks install lua-resty-random
sudo luarocks install gd

2. 配置 Nginx

编辑你的 nginx.conf 文件，添加以下配置：

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    server {
        listen       8080;
        server_name  localhost;

        location /captcha {
            content_by_lua_file /path/to/your/captcha.lua;
        }

        location /validate {
            content_by_lua_file /path/to/your/validate.lua;
        }
    }
}

3. 编写 Lua 脚本

captcha.lua：生成带有缺口的图片和缺口图片

local gd = require "resty.gd"
local random = require "resty.random"
local str = require "resty.string"

local function generate_code()
    return math.random(100, 300) -- 随机生成一个缺口位置
end

local function create_captcha()
    local img = gd.createFromPng("/path/to/your/background.png")
    local img_width, img_height = img:sizeXY()
    local gap_size = 50

    local gap_x = generate_code()
    local gap_y = img_height / 2 - gap_size / 2

    local gap_img = gd.createTrueColor(gap_size, gap_size)
    gap_img:copy(img, 0, 0, gap_x, gap_y, gap_size, gap_size)

    local white = img:colorAllocate(255, 255, 255)
    img:filledRectangle(gap_x, gap_y, gap_x + gap_size, gap_y + gap_size, white)

    local img_str = img:pngStr()
    local gap_img_str = gap_img:pngStr()

    return img_str, gap_img_str, gap_x
end

local img_str, gap_img_str, gap_x = create_captcha()

ngx.header.content_type = "application/json"
ngx.say('{"background":"'.. ngx.encode_base64(img_str) ..'", "gap":"'.. ngx.encode_base64(gap_img_str) ..'", "gap_x":'.. gap_x ..'}')

validate.lua：验证用户滑动的位置是否正确

local cjson = require "cjson"

ngx.req.read_body()
local args = ngx.req.get_post_args()
local user_gap_x = tonumber(args.gap_x)

-- 从 Redis 或其他存储中获取正确的 gap_x
local correct_gap_x = 150 -- 示例值，实际应从存储中获取

if math.abs(user_gap_x - correct_gap_x) < 5 then
    ngx.say(cjson.encode({ success = true }))
else
    ngx.say(cjson.encode({ success = false }))
end

4. 前端代码

前端使用 JavaScript 实现滑块和图片展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑块验证码</title>
    <style>
        .captcha-container {
            position: relative;
            width: 300px;
            height: 150px;
        }
        .captcha-image {
            width: 100%;
            height: 100%;
        }
        .slider {
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: #fff;
            border: 1px solid #ccc;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="captcha-container" id="captcha-container">
        <img src="" id="captcha-image" class="captcha-image">
        <div id="slider" class="slider"></div>
    </div>

    <script>
        async function loadCaptcha() {
            const response = await fetch('/captcha');
            const data = await response.json();
            const bgImage = 'data:image/png;base64,' + data.background;
            const gapImage = 'data:image/png;base64,' + data.gap;

            document.getElementById('captcha-image').src = bgImage;
            // Render the gap image in a canvas or any other way

            return data.gap_x;
        }

        document.addEventListener('DOMContentLoaded', async () => {
            const correctGapX = await loadCaptcha();
            const slider = document.getElementById('slider');
            let isDragging = false;
            let startX;

            slider.addEventListener('mousedown', (event) => {
                isDragging = true;
                startX = event.clientX;
            });

            document.addEventListener('mousemove', (event) => {
                if (isDragging) {
                    const moveX = event.clientX - startX;
                    slider.style.transform = `translateX(${moveX}px)`;
                }
            });

            document.addEventListener('mouseup', async (event) => {
                if (isDragging) {
                    isDragging = false;
                    const moveX = event.clientX - startX;

                    const response = await fetch('/validate', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ gap_x: moveX })
                    });

                    const result = await response.json();
                    if (result.success) {
                        alert('验证成功');
                    } else {
                        alert('验证失败');
                    }
                }
            });
        });
    </script>
</body>
</html>

5. 注意事项

路径配置：确保图片路径和 Lua 文件路径正确。
前端滑块：实际使用时可能需要更复杂的前端代码来处理滑块移动和验证逻辑。
存储机制：为了简单起见，示例代码没有实现存储机制。在实际应用中，可以使用 Redis 或其他存储系统来存储和验证 gap_x 值。
安全性：确保传输过程中数据的安全，防止恶意攻击和绕过验证。

通过这些步骤，你可以实现一个基本的滑块验证码系统。如果需要更复杂和高效的验证码系统，可以考虑使用现有的解决方案或服务。

原文地址:https://blog.csdn.net/xuanyuanjiaqi/article/details/139474737 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1798594173042036736.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

通过nginx弄一个滑块加图片的人机验证

1. 安装 OpenResty 和 Lua 库

2. 配置 Nginx

3. 编写 Lua 脚本

4. 前端代码

5. 注意事项

相关推荐

最近更新

热门阅读