PHP-Klick-Captcha-Bestätigungscode-Klasse

Anforderungen:

Die meisten häufig verwendeten Formularbestätigungscodes erfordern jetzt eine Benutzereingabe, was jedoch für mobile Benutzer unpraktisch ist.

Wenn mobile Benutzer vorbeikommen, müssen sie diesen nicht eingeben. Stattdessen können sie auf eine bestimmte Stelle klicken, um den Bestätigungscode zu bestätigen, was viel praktischer ist.

Prinzip:

1. Verwenden Sie PHP imagecreate, um ein PNG-Bild zu erstellen und N in das zu zeichnen Bildbögen, von denen einer ein vollständiger Kreis ist (zur Überprüfung), zeichnen die Mittelpunktkoordinaten und den Radius in der Sitzung auf.

2. Wenn der Benutzer im Browser auf das Bestätigungscodebild klickt, notieren Sie die Klickposition.

3. Vergleichen Sie die vom Benutzer angeklickten Koordinaten mit den in der Sitzung aufgezeichneten Mittelpunktskoordinaten und dem Radius, um festzustellen, ob sie im Kreis liegen. Wenn ja, ist die Überprüfung bestanden.

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  src="/static/imghwm/default1.png"  data-src="demo.php?get_captcha=1&t=<?=time() ? alt="PHP-Klick-Captcha-Bestätigungscode-Klasse" >"  class="lazy"  id="captcha_img"    style="max-width:90%"></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 } ?>

Das Obige ist der Inhalt der Kategorie PHP-Click-Captcha-Bestätigungscode. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).