CodeIgniter 圖形驗證碼完整實作：類別封裝、控制器調用與前端整合

本文提供一個可直接用於 CodeIgniter 3.x 專案的驗證碼類別，支援自訂寬高、位數、字元集、干擾線/點，並示範控制器調用、Session 儲存、前端 HTML/JS 整合與「換一張」功能。

一、驗證碼類別 Lib_captcha.php

放置於 application/libraries/Lib_captcha.php：

<?php
class Lib_captcha {
    var $width  = '60';
    var $num    = '4';
    var $height = '20';
    var $name   = 'randcode';

    public function __construct($conf = "") {
        if ($conf != "") {
            foreach ($conf as $key => $value) {
                $this->$key = $value;
            }
        }
    }

    function show() {
        header("Content-type: image/gif");

        $border    = 0;           // 1=顯示邊框
        $how       = $this->num;  // 驗證碼位數
        $w         = $this->width;
        $h         = $this->height;
        $fontsize  = 5;           // GD 內建字體 1~5
        $alpha     = "abcdefghijkmnopqrstuvwxyz"; // 排除 l, o 避免混淆
        $number    = "023456789"; // 排除 1
        $randcode  = "";

        srand((double)microtime() * 1000000);
        $im = imagecreate($w, $h);

        // 背景
        $bgcolor = imagecolorallocate($im, 255, 255, 255);
        imagefill($im, 0, 0, $bgcolor);
        if ($border) {
            $black = imagecolorallocate($im, 0, 0, 0);
            imagerectangle($im, 0, 0, $w-1, $h-1, $black);
        }

        // 逐字繪製
        for ($i = 0; $i < $how; $i++) {
            $alpha_or_number = mt_rand(0, 1);
            $str = $alpha_or_number ? $alpha : $number;
            $which = mt_rand(0, strlen($str)-1);
            $code = substr($str, $which, 1);
            $j = !$i ? 4 : $j + 15; // 字元水平間距
            $color = imagecolorallocate($im, mt_rand(0,100), mt_rand(0,100), mt_rand(0,100));
            imagechar($im, $fontsize, $j, 3, $code, $color);
            $randcode .= $code;
        }

        // 干擾線
        for ($i = 0; $i < 5; $i++) {
            $color = imagecolorallocate($im, mt_rand(0,255), mt_rand(0,255), mt_rand(0,255));
            imagearc($im, mt_rand(-5,$w), mt_rand(-5,$h), mt_rand(20,300), mt_rand(20,200), 55, 44, $color);
        }
        // 干擾點
        for ($i = 0; $i < $how * 15; $i++) {
            $color = imagecolorallocate($im, mt_rand(0,255), mt_rand(0,255), mt_rand(0,255));
            imagesetpixel($im, mt_rand(0,$w), mt_rand(0,$h), $color);
        }

        // 存入 Session
        $_SESSION[$this->name] = $randcode;

        imagegif($im);
        imagedestroy($im);
    }
}
?>

二、控制器調用 User.php

<?php
class User extends CI_Controller {
    public function verify_image() {
        $conf['name'] = 'verify_code'; // Session 鍵名
        $this->load->library('lib_captcha', $conf);
        $this->lib_captcha->show();

        // 除錯用：顯示 Session 值（正式環境請移除）
        // $yzm = $this->session->userdata('verify_code');
        // echo $yzm;
    }
}
?>

三、前端視圖

<dl>
    <dt>驗證碼：</dt>
    <dd>
        <input type="text" name="verify_text" id="verify_text" class="yzma" value="">
        <img src="/user/verify_image" alt="驗證碼" id="verify_code" class="yz_img" />
        <a href="javascript:changeCode();" class="change_yz">換一張</a>
    </dd>
    <dd class="tips_wrong"><b>驗證碼不正確</b></dd>
    <dd class="tips_correct"></dd>
</dl>

四、JavaScript 換圖功能

<script type="text/javascript">
function changeCode() {
    // 加入隨機參數防止瀏覽器快取
    document.getElementById("verify_code").src = "/user/verify_image?r=" + Math.random();
}
</script>

五、表單驗證範例（控制器）

<?php
public function login() {
    $input_code = $this->input->post('verify_text');
    $sess_code  = $this->session->userdata('verify_code');

    if (strtolower($input_code) !== strtolower($sess_code)) {
        $this->form_validation->set_message('verify_check', '驗證碼錯誤');
        return false;
    }
    return true;
}
?>

六、進階建議與安全強化

• 使用 TTF 字體：將 imagechar 改為 imagettftext，載入自訂字體檔，提升辨識難度。
• 加入扭曲/旋轉：對每個字元套用隨機旋轉角度、Y 軸位移。
• Session 前綴：避免多表單衝突，建議 $this->name = 'captcha_' . $form_id。
• 限制請求頻率：同一 IP 短時間大量請求驗證碼圖片時，回傳 429 或延遲回應。
• 考慮第三方服務：高安全性需求（登入、註冊、支付）建議接入 Google reCAPTCHA v3、hCaptcha 或 Geetest 行為驗證。

七、常見問題排查