网站开发公司成都华硕路由器做网站

网站开发公司成都,华硕路由器做网站,常用的网络营销推广方法有哪些,做网站的一年能挣多少钱滑块验证完整实现教程#xff08;前端后端Nginx集成#xff09; 滑块验证的核心逻辑是#xff1a;前端渲染滑块缺口背景图#xff0c;采集用户滑动轨迹#xff1b;后端校验轨迹是否为真人行为#xff08;非机器匀速滑动#xff09;#xff0c;验证通过后生成时效token…滑块验证完整实现教程前端后端Nginx集成滑块验证的核心逻辑是前端渲染滑块缺口背景图采集用户滑动轨迹后端校验轨迹是否为真人行为非机器匀速滑动验证通过后生成时效tokenNginx拦截业务请求校验token有效性后放行。以下是可直接落地的完整方案包含前端、后端、部署全流程。一、核心原理前端生成随机的背景图缺口监听鼠标/触摸滑动事件采集滑动轨迹时间戳、X/Y坐标、速度、加速度滑动完成后将轨迹和缺口偏移量传给后端。后端校验轨迹特征如滑动时长、速度波动、是否匀速、缺口偏移匹配度真人轨迹会有“先快后慢/轻微抖动”机器轨迹多为“匀速直线”验证通过则生成短期有效token。Nginx拦截业务请求校验请求头/Cookie中的验证token有效则放行无效则重定向到滑块验证页面。二、完整实现步骤步骤1环境准备前端无需框架原生HTMLJS即可也可适配Vue/React后端Python 3.8 Flask Pillow生成验证图 Redis存储token/验证参数Nginx确保包含ngx_http_auth_request_module模块默认编译nginx -V验证依赖安装# 后端依赖pipinstallflask pillow redis requests# Redis本地/云服务器用于存储验证参数和token# 参考安装https://redis.io/docs/getting-started/installation/步骤2前端实现滑块渲染轨迹采集新建slider.html实现滑块渲染、滑动监听、轨迹采集和验证请求!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title滑块验证/titlestyle/* 滑块容器样式 */.slider-container{width:320px;height:160px;margin:50px auto;border:1px solid #e5e5e5;border-radius:8px;padding:10px;box-shadow:0 2px 10pxrgba(0,0,0,0.1);}.slider-bg{width:100%;height:120px;position:relative;border-radius:4px;overflow:hidden;background:#f5f5f5;}.slider-gap{position:absolute;width:40px;height:40px;background:#fff;border:1px solid #e5e5e5;box-shadow:0 0 5pxrgba(0,0,0,0.2);cursor:move;/* 缺口位置由后端返回初始隐藏 */display:none;}.slider-bar{width:100%;height:30px;background:#f8f8f8;margin-top:10px;border-radius:15px;position:relative;cursor:pointer;}.slider-btn{width:40px;height:30px;background:#409eff;border-radius:15px;position:absolute;top:0;left:0;box-shadow:0 0 5pxrgba(64,158,255,0.5);cursor:move;text-align:center;line-height:30px;color:#fff;font-size:12px;}.tips{text-align:center;margin-top:10px;color:#666;font-size:14px;}/style/headbodydivclassslider-containerdivclassslider-bgidsliderBgdivclassslider-gapidsliderGap/div/divdivclassslider-baridsliderBardivclassslider-btnidsliderBtn→/div/divdivclasstipsidtips请拖动滑块完成验证/div/divscript// 核心变量constsliderBtndocument.getElementById(sliderBtn);constsliderBardocument.getElementById(sliderBar);constsliderGapdocument.getElementById(sliderGap);constsliderBgdocument.getElementById(sliderBg);consttipsdocument.getElementById(tips);letstartX0;// 滑动起始X坐标letisDraggingfalse;// 是否正在滑动lettrack[];// 滑动轨迹[{time: 时间戳, x: 坐标, y: 坐标}]letverifyId;// 本次验证的唯一ID后端生成lettargetOffset0;// 目标缺口偏移量后端返回// 1. 初始化从后端获取验证图和缺口参数asyncfunctioninitVerify(){try{constresawaitfetch(/api/slider/init);constdataawaitres.json();if(data.code200){verifyIddata.data.verifyId;targetOffsetdata.data.offset;// 目标偏移量像素// 设置背景图sliderBg.style.backgroundurl(${data.data.bgImg}) no-repeat center/contain;// 设置缺口位置sliderGap.style.left${targetOffset}px;sliderGap.style.top${data.data.top}px;sliderGap.style.displayblock;tips.textContent请拖动滑块完成验证;tips.style.color#666;}}catch(e){tips.textContent初始化失败请刷新重试;tips.style.color#f56c6c;console.error(初始化失败,e);}}// 2. 采集滑动轨迹每10ms记录一次坐标和时间functionrecordTrack(x,y){track.push({time:Date.now(),x:x,y:y});}// 3. 滑动结束提交轨迹到后端验证asyncfunctionsubmitVerify(){if(track.length5){// 轨迹过短判定为机器tips.textContent验证失败滑动轨迹异常;tips.style.color#f56c6c;resetSlider();return;}try{constresawaitfetch(/api/slider/verify,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({verifyId:verifyId,track:track,// 滑动轨迹finalOffset:sliderBtn.offsetLeft// 最终滑块偏移量})});constdataawaitres.json();if(data.code200){// 验证通过设置token到Cookie供Nginx校验document.cookieslider_token${data.data.token}; max-age300; path/;tips.textContent验证通过即将跳转...;tips.style.color#67c23a;// 跳转到业务页面或通知父页面setTimeout((){window.location.href/;// 业务首页},1000);}else{tips.textContent验证失败${data.msg};tips.style.color#f56c6c;resetSlider();// 重新初始化验证setTimeout(initVerify,1000);}}catch(e){tips.textContent验证请求失败请重试;tips.style.color#f56c6c;resetSlider();console.error(验证提交失败,e);}}// 4. 重置滑块和轨迹functionresetSlider(){sliderBtn.style.left0px;isDraggingfalse;track[];}// 5. 绑定滑动事件// 鼠标按下/触摸开始sliderBtn.addEventListener(mousedown,(e){isDraggingtrue;startXe.clientX-sliderBtn.offsetLeft;// 开始记录轨迹recordTrack(sliderBtn.offsetLeft,e.clientY);// 每10ms持续记录轨迹trackTimersetInterval((){if(isDragging){recordTrack(sliderBtn.offsetLeft,e.clientY);}},10);});// 触摸适配移动端sliderBtn.addEventListener(touchstart,(e){isDraggingtrue;startXe.touches[0].clientX-sliderBtn.offsetLeft;recordTrack(sliderBtn.offsetLeft,e.touches[0].clientY);trackTimersetInterval((){if(isDragging){recordTrack(sliderBtn.offsetLeft,e.touches[0].clientY);}},10);});// 鼠标移动/触摸移动document.addEventListener(mousemove,(e){if(!isDragging)return;constnewXe.clientX-startX;// 限制滑块范围0 ~ 滑块条宽度 - 滑块宽度constmaxXsliderBar.offsetWidth-sliderBtn.offsetWidth;constfinalXMath.max(0,Math.min(newX,maxX));sliderBtn.style.left${finalX}px;});document.addEventListener(touchmove,(e){if(!isDragging)return;constnewXe.touches[0].clientX-startX;constmaxXsliderBar.offsetWidth-sliderBtn.offsetWidth;constfinalXMath.max(0,Math.min(newX,maxX));sliderBtn.style.left${finalX}px;});// 鼠标松开/触摸结束document.addEventListener(mouseup,(){if(!isDragging)return;isDraggingfalse;clearInterval(trackTimer);submitVerify();// 提交验证});document.addEventListener(touchend,(){if(!isDragging)return;isDraggingfalse;clearInterval(trackTimer);submitVerify();});// 页面加载时初始化验证window.onloadinitVerify;/script/body/html步骤3后端实现验证图生成轨迹校验新建slider_server.py实现3个核心接口初始化验证生成背景图/缺口、校验轨迹、验证token供Nginx调用importosimportuuidimportrandomimporttimeimportjsonfromPILimportImage,ImageDrawfromflaskimportFlask,jsonify,request,send_file,make_responseimportredisimporthashlib appFlask(__name__)# Redis配置存储验证参数和token过期时间5分钟redis_clientredis.Redis(host127.0.0.1,port6379,db0,decode_responsesTrue,password# 如有密码请填写)# 配置验证图存储路径临时BASE_DIRos.path.dirname(os.path.abspath(__file__))IMG_DIRos.path.join(BASE_DIR,slider_imgs)ifnotos.path.exists(IMG_DIR):os.makedirs(IMG_DIR)# -------------------------- 核心工具函数 --------------------------# 1. 生成随机验证图带缺口defgenerate_slider_img():# 生成背景图随机颜色随机线条模拟真实图片width,height300,100# 背景图尺寸bg_imgImage.new(RGB,(width,height),(random.randint(230,255),random.randint(230,255),random.randint(230,255)))drawImageDraw.Draw(bg_img)# 画随机线条增加干扰for_inrange(5):x1random.randint(0,width)y1random.randint(0,height)x2random.randint(0,width)y2random.randint(0,height)draw.line((x1,y1,x2,y2),fill(random.randint(100,200),random.randint(100,200),random.randint(100,200)),width2)# 生成缺口随机位置X轴 80~220Y轴 30~70gap_width,gap_height40,40gap_xrandom.randint(80,220)# 缺口X偏移目标偏移量gap_yrandom.randint(30,70)# 缺口Y偏移# 画缺口白色矩形模拟缺失draw.rectangle((gap_x,gap_y,gap_xgap_width,gap_ygap_height),fill(255,255,255))# 保存背景图img_namef{uuid.uuid4()}.pngimg_pathos.path.join(IMG_DIR,img_name)bg_img.save(img_path)return{img_path:img_path,img_name:img_name,offset:gap_x,# 缺口X偏移量目标值top:gap_y# 缺口Y偏移量}# 2. 校验滑动轨迹核心区分真人/机器defcheck_track(track,final_offset,target_offset): :param track: 滑动轨迹列表 [{time, x, y}] :param final_offset: 用户最终滑动的偏移量 :param target_offset: 目标缺口偏移量 :return: (是否通过, 失败原因) # 1. 偏移量校验误差±5像素内offset_errorabs(final_offset-target_offset)ifoffset_error5:returnFalse,f偏移量错误目标{target_offset}实际{final_offset}# 2. 轨迹长度校验至少5个点避免瞬间滑动iflen(track)5:returnFalse,轨迹过短# 3. 滑动时长校验0.5~3秒真人滑动不会太快/太慢total_timetrack[-1][time]-track[0][time]total_time_stotal_time/1000iftotal_time_s0.5ortotal_time_s3:returnFalse,f滑动时长异常{total_time_s:.2f}秒# 4. 速度波动校验真人速度有波动机器多匀速speeds[]foriinrange(1,len(track)):time_difftrack[i][time]-track[i-1][time]x_difftrack[i][x]-track[i-1][x]iftime_diff0:continuespeedx_diff/time_diff# 像素/毫秒speeds.append(speed)# 计算速度标准差波动值0.01 判定为匀速机器iflen(speeds)3:returnFalse,轨迹点数不足avg_speedsum(speeds)/len(speeds)std_speed(sum([(s-avg_speed)**2forsinspeeds])/len(speeds))**0.5ifstd_speed0.01:returnFalse,滑动速度匀速疑似机器# 5. 轨迹Y轴校验真人滑动Y轴有轻微波动机器Y轴固定y_values[p[y]forpintrack]y_maxmax(y_values)y_minmin(y_values)ify_max-y_min2:returnFalse,Y轴无波动疑似机器returnTrue,验证通过# 3. 生成验证token供Nginx校验defgenerate_token(verify_id):tokenhashlib.md5(f{verify_id}_{int(time.time())}_slider_secret.encode()).hexdigest()# 存储token到Redis过期5分钟redis_client.setex(fslider_token:{token},300,valid)returntoken# -------------------------- 接口实现 --------------------------# 1. 初始化验证接口生成背景图缺口参数app.route(/api/slider/init,methods[GET])definit_slider():try:# 生成验证图img_infogenerate_slider_img()# 生成唯一验证IDverify_idstr(uuid.uuid4())# 存储验证参数到Redis过期5分钟redis_client.setex(fslider_verify:{verify_id},300,json.dumps({offset:img_info[offset],top:img_info[top],img_name:img_info[img_name]}))# 返回结果图片路径为访问路径returnjsonify({code:200,msg:初始化成功,data:{verifyId:verify_id,offset:img_info[offset],top:img_info[top],bgImg:f/api/slider/img/{img_info[img_name]}# 图片访问接口}})exceptExceptionase:returnjsonify({code:500,msg:f初始化失败{str(e)}}),500# 2. 验证图片访问接口app.route(/api/slider/img/img_name,methods[GET])defget_slider_img(img_name):img_pathos.path.join(IMG_DIR,img_name)ifnotos.path.exists(img_path):returnjsonify({code:404,msg:图片不存在}),404# 返回图片并设置缓存短期responsemake_response(send_file(img_path,mimetypeimage/png))response.headers[Cache-Control]max-age300returnresponse# 3. 滑块验证接口校验轨迹app.route(/api/slider/verify,methods[POST])defverify_slider():try:datarequest.get_json()verify_iddata.get(verifyId)trackdata.get(track,[])final_offsetdata.get(finalOffset,0)# 1. 校验参数ifnotverify_idornottrackorfinal_offsetisNone:returnjsonify({code:400,msg:参数缺失}),400# 2. 获取Redis中的验证参数verify_info_strredis_client.get(fslider_verify:{verify_id})ifnotverify_info_str:returnjsonify({code:400,msg:验证已过期请刷新}),400verify_infojson.loads(verify_info_str)target_offsetverify_info[offset]# 3. 校验轨迹is_pass,msgcheck_track(track,final_offset,target_offset)ifnotis_pass:returnjsonify({code:403,msg:msg}),403# 4. 验证通过生成token删除验证参数防止复用tokengenerate_token(verify_id)redis_client.delete(fslider_verify:{verify_id})returnjsonify({code:200,msg:验证通过,data:{token:token}})exceptExceptionase:returnjsonify({code:500,msg:f验证失败{str(e)}}),500# 4. Nginx校验token接口内部调用app.route(/api/slider/check_token,methods[GET])defcheck_token():# 从Cookie获取tokentokenrequest.cookies.get(slider_token)ifnottoken:return,401# 无token验证失败# 校验token是否有效is_validredis_client.get(fslider_token:{token})ifis_validvalid:# 验证通过删除token防止复用redis_client.delete(fslider_token:{token})return,200else:return,401# token无效if__name____main__:app.run(host0.0.0.0,port5001,debugFalse)步骤4Nginx配置拦截请求校验token修改nginx.conf实现“拦截业务请求→校验滑块token→放行/重定向”http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; # 后端滑块验证服务 upstream slider_server { server 127.0.0.1:5001; } server { listen 80; server_name localhost; # 业务根路径需要验证的路径 location / { # 1. 校验滑块token内部子请求 auth_request /api/slider/check_token; # 2. token无效/缺失 → 重定向到滑块验证页面 error_page 401 redirect_slider; # 3. token有效 → 放行到业务服务替换为你的实际业务地址 proxy_pass http://127.0.0.1:8080; # 你的业务服务地址 } # 重定向到滑块验证页面 location redirect_slider { rewrite ^/(.*)$ /slider.html permanent; } # 滑块验证相关接口 → 转发到后端服务 location /api/slider/ { proxy_pass http://slider_server; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # 滑块验证页面静态文件 location /slider.html { root /path/to/your/static/files; # 替换为slider.html所在目录 expires 0; # 禁止缓存 } # Nginx内部调用的token校验接口禁止外部访问 location /api/slider/check_token { internal; proxy_pass http://slider_server; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } }步骤5启动与测试启动Redisredis-server确保端口6379启动后端服务python slider_server.py放置前端文件将slider.html放到Nginx配置的静态文件目录重启Nginxnginx -s reload测试访问http://localhost→ 自动重定向到滑块验证页面 → 拖动滑块完成验证 → 验证通过后跳转到业务页面。三、防破解优化关键避免被机器破解1. 前端优化轨迹加密将轨迹数据用AES加密后传输避免抓包篡改混淆JS对滑动事件的JS代码进行混淆防止逆向分析禁用模拟检测是否为模拟器/自动化工具如检测webdriver标识动态样式滑块样式随机变化颜色、大小、形状避免固定模板。2. 后端优化动态阈值根据IP/设备调整校验阈值如高频验证的IP提高校验严格度防重放验证ID仅能使用一次校验后立即删除图片增强验证图加入随机水印、扭曲、噪点防止图像识别破解风控结合结合IP黑名单、设备指纹如浏览器指纹、访问频率限制。3. 部署优化频率限制Nginx配置limit_req_module限制验证接口请求频率如每秒1次limit_req_zone $binary_remote_addr zoneslider:10m rate1r/s; location /api/slider/ { limit_req zoneslider burst2 nodelay; proxy_pass http://slider_server; }分布式部署Redis使用集群支持多实例后端服务日志监控记录验证失败日志分析异常IP/设备及时调整策略。四、扩展适配1. 移动端适配前端已兼容touch事件只需调整样式适配移动端屏幕优化滑块大小如宽度280px适配手机屏幕。2. 集成第三方滑块简化开发如果不想自研可直接集成成熟的第三方滑块极验GEETESThttps://www.geetest.com/ 文档完善支持私有化部署顶象https://www.dingxiang-inc.com/ 风控能力强适合高安全场景集成方式替换前端滑块代码为第三方SDK后端调用第三方校验接口即可。五、常见问题排查验证图无法显示检查IMG_DIR路径是否正确Nginx是否有权限访问图片目录轨迹校验失败调整check_track函数的阈值如速度标准差、滑动时长Redis连接失败检查Redis地址、端口、密码是否正确确保Redis服务运行Nginx重定向循环确保/api/slider/接口不被auth_request拦截Nginx配置中排除。总结滑块验证的核心是轨迹特征校验区分真人/机器而非单纯的偏移量匹配。自研方案适合中小场景若追求更高安全性/更低开发成本建议集成极验、顶象等第三方滑块服务。实际部署时需结合风控策略IP、设备、频率构建多层防御体系平衡安全与用户体验。