眾所周知,驗證碼能防止惡意登錄注冊,它由服務端生成,發送給客戶端,并最終以圖像格式顯示。復雜的驗證碼能提升網站的安全性,但過于復雜的驗證碼也會使得文字的肉眼識別變得異常困難,用戶體驗大大降低。
本文以最新thinkphp6.0
的think-captcha
擴展為修改對象,來詳細講解如何簡化驗證碼的顯示,提高文字辨識度,讓老年人也能看得清!
think-captcha驗證碼
控制器測試代碼:
<?php namespace appcontroller; use appBaseController; use thinkfacadeView; class Index extends BaseController { public function index() { return View::fetch(); } }
視圖測試代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="{:captcha_src()}" alt=""> </body> </html>
默認情況下渲染的驗證碼如下:
可能有的小伙伴覺得這很清晰呀,但是對于年齡較大的人來說還是比較困難,另外通過修改驗證碼文件,也可以提高自己的動手能力、增長知識。
優化think-captcha驗證碼
找到configcaptcha.php
配置文件,修改如下部分:
//驗證碼位數 'length' => 4, //簡潔的4字符驗證碼 // 驗證碼字符集合 'codeSet' => '0123456789', //這里我去掉英文了,只留下數字部分 // 是否使用混淆曲線 'useCurve' => false, //是否添加雜點 'useNoise' => false, // 驗證碼字體 不設置則隨機 'fontttf' => '4.ttf', //經測試,該字體很順眼
修改后刷新看看,是不是更簡潔了?
這樣其實已經比較可以了,正常情況下不建議再修改框架,但既以學習為目的,那我們就再深入優化下。
打開vendortopthinkthink-captchasrcCaptcha.php
修改第277行,去掉字體斜移度
imagettftext($this->im, $this->fontSize, 0, $x, $y, $this->color, $fontttf, $char);
最后看看效果,是不是已經很滿意了
本文通過簡單的修改配置文件、去掉傾斜度的方式簡化了驗證碼的顯示,提高了文字辨識度,小伙伴兒們多多動手,印象才會更深刻喲!