php cliquez sur la classe de code de vérification captcha

Exigences :

La plupart des codes de vérification de formulaire couramment utilisés nécessitent désormais une saisie de l'utilisateur, mais cela sera gênant pour les utilisateurs mobiles.

Si les utilisateurs mobiles visitent, ils n'ont pas besoin de le saisir, ils peuvent plutôt cliquer sur un certain emplacement pour confirmer le code de vérification, ce qui sera beaucoup plus pratique.

Principe :

1. Utilisez PHP imagecreate pour créer une image PNG et dessiner N dans le fichier. image Arcs, dont l'un est un cercle complet (pour vérification), enregistrez les coordonnées du centre et le rayon dans la session.

2. Dans le navigateur, lorsque l'utilisateur clique sur l'image du code de vérification, enregistrez l'emplacement du clic.

3. Comparez les coordonnées cliquées par l'utilisateur avec les coordonnées du centre et le rayon enregistrés dans la session pour déterminer s'il se trouve dans le cercle. Si tel est le cas, la vérification est réussie.

ClickCaptcha.class.php

<?php
/** Click Captcha 验证码类
*   Date:   2013-05-04
*   Author: fdipzone
*   Ver:    1.0
*/

class ClickCaptcha { // class start

    public $sess_name = &#39;m_captcha&#39;;
    public $width = 500;
    public $height = 200;
    public $icon = 5;
    public $iconColor = array(255, 255, 0);
    public $backgroundColor = array(0, 0, 0);
    public $iconSize = 56;

    private $_img_res = null;


    public function __construct($sess_name=&#39;&#39;){
        if(session_id() == &#39;&#39;){
            session_start();
        }

        if($sess_name!=&#39;&#39;){
            $this->sess_name = $sess_name; // 设置session name
        }
    }


    /** 创建验证码 */
    public function create(){

        // 创建图象
        $this->_img_res = imagecreate($this->width, $this->height);
        
        // 填充背景
        ImageColorAllocate($this->_img_res, $this->backgroundColor[0], $this->backgroundColor[1], $this->backgroundColor[2]);

        // 分配颜色
        $col_ellipse = imagecolorallocate($this->_img_res, $this->iconColor[0], $this->iconColor[1], $this->iconColor[2]);

        $minArea = $this->iconSize/2+3;

        // 混淆用图象,不完整的圆
        for($i=0; $i<$this->icon; $i++){
            $x = mt_rand($minArea, $this->width-$minArea);
            $y = mt_rand($minArea, $this->height-$minArea);
            $s = mt_rand(0, 360);
            $e = $s + 330;
            imagearc($this->_img_res, $x, $y, $this->iconSize, $this->iconSize, $s, $e, $col_ellipse);            
        }

        // 验证用图象,完整的圆
        $x = mt_rand($minArea, $this->width-$minArea);
        $y = mt_rand($minArea, $this->height-$minArea);
        $r = $this->iconSize/2;
        imagearc($this->_img_res, $x, $y, $this->iconSize, $this->iconSize, 0, 360, $col_ellipse);        

        // 记录圆心坐标及半径
        $this->captcha_session($this->sess_name, array($x, $y, $r));

        // 生成图象
        Header("Content-type: image/PNG");
        ImagePNG($this->_img_res);
        ImageDestroy($this->_img_res);

        exit();
    }


    /** 检查验证码
    * @param String $captcha  验证码
    * @param int    $flag     验证成功后 0:不清除session 1:清除session
    * @return boolean
    */
    public function check($captcha, $flag=1){
        if(trim($captcha)==&#39;&#39;){
            return false;
        }
        
        if(!is_array($this->captcha_session($this->sess_name))){
            return false;
        }

        list($px, $py) = explode(&#39;,&#39;, $captcha);
        list($cx, $cy, $cr) = $this->captcha_session($this->sess_name);

        if(isset($px) && is_numeric($px) && isset($py) && is_numeric($py) && 
            isset($cx) && is_numeric($cx) && isset($cy) && is_numeric($cy) && isset($cr) && is_numeric($cr)){
            if($this->pointInArea($px,$py,$cx,$cy,$cr)){
                if($flag==1){
                    $this->captcha_session($this->sess_name,&#39;&#39;);
                }
                return true;
            }
        }
        return false;
    }


    /** 判断点是否在圆中
    * @param int $px  点x
    * @param int $py  点y
    * @param int $cx  圆心x
    * @param int $cy  圆心y
    * @param int $cr  圆半径
    * sqrt(x^2+y^2)<r
    */
    private function pointInArea($px, $py, $cx, $cy, $cr){
        $x = $cx-$px;
        $y = $cy-$py;
        return round(sqrt($x*$x + $y*$y))<$cr;
    }


    /** 验证码session处理方法
    * @param   String   $name    captcha session name
    * @param   String   $value
    * @return  String
    */
    private function captcha_session($name,$value=null){
        if(isset($value)){
            if($value!==&#39;&#39;){
                $_SESSION[$name] = $value;
            }else{
                unset($_SESSION[$name]);
            }
        }else{
            return isset($_SESSION[$name])? $_SESSION[$name] : &#39;&#39;;
        }
    }

} // class end

?>

demo.php

<?php
session_start();
require(&#39;ClickCaptcha.class.php&#39;);

if(isset($_GET[&#39;get_captcha&#39;])){ // get captcha
    $obj = new ClickCaptcha();
    $obj->create();
    exit();
}

if(isset($_POST[&#39;send&#39;]) && $_POST[&#39;send&#39;]==&#39;true&#39;){ // submit
    $name = isset($_POST[&#39;name&#39;])? trim($_POST[&#39;name&#39;]) : &#39;&#39;;
    $captcha = isset($_POST[&#39;captcha&#39;])? trim($_POST[&#39;captcha&#39;]) : &#39;&#39;;

    $obj = new ClickCaptcha();

    if($obj->check($captcha)){
        echo &#39;your name is:&#39;.$name;
    }else{
        echo &#39;captcha not match&#39;;
    }
    echo &#39; <a href="demo.php">back</a>&#39;;

}else{ // html
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> Click Captcha Demo </title>
  <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
  <script type="text/javascript">
    $(function(){
        $(&#39;#captcha_img&#39;).click(function(e){
            var x = e.pageX - $(this).offset().left;
            var y = e.pageY - $(this).offset().top;
            $(&#39;#captcha&#39;).val(x+&#39;,&#39;+y);
        })

        $(&#39;#btn&#39;).click(function(e){
            if($.trim($(&#39;#name&#39;).val())==&#39;&#39;){
                alert(&#39;Please input name!&#39;);
                return false;
            }

            if($.trim($(&#39;#captcha&#39;).val())==&#39;&#39;){
                alert(&#39;Please click captcha!&#39;);
                return false;
            }
            $(&#39;#form1&#39;)[0].submit();
        })
    })
  </script>
 </head>

 <body>
    <form name="form1" id="form1" method="post" action="demo.php" onsubmit="return false">
    <p>name:<input type="text" name="name" id="name"></p>
    <p>Captcha:Please click full circle<br><img id="captcha_img" src="demo.php?get_captcha=1&t=<?=time() ?>" style="cursor:pointer"></p>
    <p><input type="submit" id="btn" value="submit"></p>
    <input type="hidden" name="send" value="true">
    <input type="hidden" name="captcha" id="captcha">
    </form>
 </body>
</html>
<?php } ?>

Ce qui précède est le contenu de la catégorie de code de vérification php click captcha. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !