php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】

吾爱主题阅读：190 2021-10-15 14:47:00 评论：0

本文实例讲述了php+js实现的拖动滑块验证码验证表单操作。分享给大家供大家参考，具体如下：

现在很多网站，比如淘宝，京东等都改用使用极验拖动验证码实现登录，这种方式比传统的验证码方式有更好的体验，减少用户输入的错误，也同样能起到防盗刷的功能。现在很多极验都是第三方的，也很多都是收费的。今天在这里给大家分享自己用原生php实现的一个极验的代码。用原生php的好处就是以后你要嵌套到什么框架，可以直接用核心代码，改一改就好了。

极验拖动动画图

代码文件截图

代码实现

html文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html lang= "" > <head> <meta charset= "utf-8" > <meta http-equiv= "x-ua-compatible" content= "ie=edge" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <title>极验滑块拖动验证码-码农社区-web视频分享网</title> <script type= "text/javascript" src= "tn_code.js?v=35" ></script> <link rel= "stylesheet" type= "text/css" href= "style.css?v=27" rel= "external nofollow" /> <style type= "text/css" ></style> </head> <body style= "text-align:center;" > <div class= "tncode" style= "text-align: center;margin: 100px auto;" ></div> <script type= "text/javascript" > $TN.onsuccess( function (){ //验证通过 }); </script>

php文件：check.php

1 2 3 4 5 6 7 8 9 10 11 12 <?php require_once dirname( __FILE__ ). '/TnCode.class.php' ; $tn = new TnCode(); if ( $tn ->check()){ $_SESSION [ 'tncode_check' ] = 'ok' ; echo "ok" ; } else { $_SESSION [ 'tncode_check' ] = 'error' ; echo "error" ; } ?>

主要核心文件：TnCode.class.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 <?php class TnCode { var $im = null; var $im_fullbg = null; var $im_bg = null; var $im_slide = null; var $bg_width = 240; var $bg_height = 150; var $mark_width = 50; var $mark_height = 50; var $bg_num = 6; var $_x = 0; var $_y = 0; //容错象素越大体验越好，越小破解难道越高 var $_fault = 3; function __construct(){ //ini_set('display_errors','On'); // error_reporting (0); if (!isset( $_SESSION )){ session_start(); } } function make(){ $this ->_init(); $this ->_createSlide(); $this ->_createBg(); $this ->_merge(); $this ->_imgout(); $this ->_destroy(); } function check( $offset = '' ){ if (! $_SESSION [ 'tncode_r' ]){ return false; } if (! $offset ){ $offset = $_REQUEST [ 'tn_r' ]; } $ret = abs ( $_SESSION [ 'tncode_r' ]- $offset )<= $this ->_fault; if ( $ret ){ unset( $_SESSION [ 'tncode_r' ]); } else { $_SESSION [ 'tncode_err' ]++; if ( $_SESSION [ 'tncode_err' ]>10){ //错误10次必须刷新 unset( $_SESSION [ 'tncode_r' ]); } } return $ret ; } private function _init(){ $bg = mt_rand(1, $this ->bg_num); $file_bg = dirname( __FILE__ ). '/bg/' . $bg . '.png' ; $this ->im_fullbg = imagecreatefrompng( $file_bg ); $this ->im_bg = imagecreatetruecolor( $this ->bg_width, $this ->bg_height); imagecopy( $this ->im_bg, $this ->im_fullbg,0,0,0,0, $this ->bg_width, $this ->bg_height); $this ->im_slide = imagecreatetruecolor( $this ->mark_width, $this ->bg_height); $_SESSION [ 'tncode_r' ] = $this ->_x = mt_rand(50, $this ->bg_width- $this ->mark_width-1); $_SESSION [ 'tncode_err' ] = 0; $this ->_y = mt_rand(0, $this ->bg_height- $this ->mark_height-1); } private function _destroy(){ imagedestroy( $this ->im); imagedestroy( $this ->im_fullbg); imagedestroy( $this ->im_bg); imagedestroy( $this ->im_slide); } private function _imgout(){ if (! $_GET [ 'nowebp' ]&&function_exists( 'imagewebp' )){ //优先webp格式，超高压缩率 $type = 'webp' ; $quality = 40; //图片质量 0-100 } else { $type = 'png' ; $quality = 7; //图片质量 0-9 } header( 'Content-Type: image/' . $type ); $func = "image" . $type ; $func ( $this ->im,null, $quality ); } private function _merge(){ $this ->im = imagecreatetruecolor( $this ->bg_width, $this ->bg_height*3); imagecopy( $this ->im, $this ->im_bg,0, 0 , 0, 0, $this ->bg_width, $this ->bg_height); imagecopy( $this ->im, $this ->im_slide,0, $this ->bg_height , 0, 0, $this ->mark_width, $this ->bg_height); imagecopy( $this ->im, $this ->im_fullbg,0, $this ->bg_height*2 , 0, 0, $this ->bg_width, $this ->bg_height); imagecolortransparent( $this ->im,0); //16777215 } private function _createBg(){ $file_mark = dirname( __FILE__ ). '/img/mark.png' ; $im = imagecreatefrompng( $file_mark ); header( 'Content-Type: image/png' ); //imagealphablending( $im, true); imagecolortransparent( $im ,0); //16777215 //imagepng($im);exit; imagecopy( $this ->im_bg, $im , $this ->_x, $this ->_y , 0 , 0 , $this ->mark_width, $this ->mark_height); imagedestroy( $im ); } private function _createSlide(){ $file_mark = dirname( __FILE__ ). '/img/mark2.png' ; $img_mark = imagecreatefrompng( $file_mark ); imagecopy( $this ->im_slide, $this ->im_fullbg,0, $this ->_y , $this ->_x, $this ->_y, $this ->mark_width, $this ->mark_height); imagecopy( $this ->im_slide, $img_mark ,0, $this ->_y , 0, 0, $this ->mark_width, $this ->mark_height); imagecolortransparent( $this ->im_slide,0); //16777215 //header('Content-Type: image/png'); //imagepng($this->im_slide);exit; imagedestroy( $img_mark ); } } ?>

附：完整实例代码点击此处本站下载。

希望本文所述对大家PHP程序设计有所帮助。

原文链接：https://www.cnblogs.com/zxf100/archive/2019/07/16/11192781.html

可以去百度分享获取分享代码输入这里。

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。