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

本文主要是介绍通过nginx弄一个滑块加图片的人机验证，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

要通过 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) -- 随机生成一个缺口位置
endlocal function create_captcha()local img = gd.createFromPng("/path/to/your/background.png")local img_width, img_height = img:sizeXY()local gap_size = 50local gap_x = generate_code()local gap_y = img_height / 2 - gap_size / 2local 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
endlocal 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 thenngx.say(cjson.encode({ success = true }))
elsengx.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 wayreturn 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>