Khi tìm hiểu về phần Image Processing and GD, tôi nhận thấy việc tạo một ứng ụng captcha từ những phương thức của PHP rất đơn giản. Trong bài viết này, tôi chỉ vận dụng một số hàm cơ bản để tạo nên captcha cùng với cách hoạt động của nó.
Tạo chuỗi captcha
Việc đầu tiên là phải được nội dung captcha ngẫu nhiên, sử dụng rand() để tạo ra từng kí tự à? Không cần thiết, bởi vì PHP cung cấp hàm md5() để tạo ra mã hash cho chuỗi. Ta sẽ tạo ra một chuỗi ngẫu nhiên bằng cách dùng dùng hàm md5() với tham số là một giá trị lấy từ hàm rand().
Ngoài ra, việc tạo chuỗi captcha này còn cho phép xác định độ dài chuỗi bằng cách truyền query string (tôi đặt tên tham số này là “len”), giá trị mặc định của độ dài chuỗi là 5:
1
2
3
4
| $length =5; if (isset( $_GET [ "len" ])) $length = $_GET [ "len" ]; $md5 = md5(rand()); $text = substr ( $md5 ,0, $length ); |
Tạo captcha từ ảnh nền có sẵn
Tôi sẽ tạo một đối tượng ảnh từ tập tin captcha.png có sẵn với hàm imagecreatefrompng(). Lưu ý rằng tập tin captcha.png này chỉ là ảnh nền. Sau đó sẽ dùng hàm như imageline() để “trang điểm” thêm cho ảnh nền bằng các đường thẳng ngẫu nhiên, và cuối cùng là hàm imagestring() để vẽ văn bản lên ảnh.
Để captcha được cân đối, tôi bổ sung phần tính toán vị trí của văn bản sẽ vẽ từ các thông tin về kích thước của ảnh và font.
1
2
3
4
5
6
7
8
9
| $captcha = imagecreatefrompng( "images/captcha.png" ); $font =4; for ( $i =0; $i <20; $i ++) imageline ( $captcha , rand(0,100) , rand(0,100) , rand(0,100),rand(0,100),rand(0,100000)); $image_width =imagesx( $captcha ); $image_height =imagesy( $captcha ); $text_width =imagefontwidth( $font )* $length ; $text_height =imagefontheight( $font ); imagestring( $captcha , $font , ( $image_width - $text_width )/2 , ( $image_height - $text_height )/2, $text , 0); |
Xuất captcha
Trước khi làm điều này, tôi sẽ lưu lại mã để nhận diện captcha vào trong session. Để đảm bảo an toàn, tôi sẽ mã hóa md5 lần nữa cho nội dung captcha.
Khi trang web này được truy xuất đến, tôi xác định rằng nó sẽ trả về một luồng dữ liệu dạng image/png bằng cách đặt header cho nó với hàm header(), sau đó chỉ việc xuất ảnh ra với hàm imagepng(). Tức là thay vì trả về cho trình duyệt là nội dung html như thông thường, trang này sẽ trả về một hình ảnh với định dạng png. Hãy thử truy xuất tới tập tin này khi bạn làm ví dụ để thấy rõ điều này.
1
2
3
4
| $_SESSION [ 'captcha' ] = md5( $text ); header( "Content-type: image/png" ); imagepng( $captcha ); imagedestroy( $captcha ); |
$_SESSION['captcha'] = md5($text);
Mã nguồn hoàn chỉnh
genCaptcha.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
| <!--?php $length =5; if (isset( $_GET ["len"])) $length = $_GET ["len"]; session_start(); $md5 = md5(rand()); $text = substr ( $md5 ,0, $length ); $captcha = imagecreatefrompng("images/captcha.png"); $font =4; for ( $i =0; $i <20; $i ++) imageline ( $captcha , rand(0,100) , rand(0,100) , rand(0,100),rand(0,100),rand(0,100000)); $image_width =imagesx( $captcha ); $image_height =imagesy( $captcha ); $text_width =imagefontwidth( $font )* $length ; $text_height =imagefontheight( $font ); imagestring( $captcha , $font , ( $image_width - $text_width )/2 , ( $image_height - $text_height )/2, $text , 0); $_SESSION [ 'captcha' ] = md5( $text ); header("Content-type: image/png"); imagepng( $captcha ); imagedestroy( $captcha ); </pre--> <p> </p> <p>test.php:</p> <p> </p> <pre class = "brush: xml;" > <script type= ""text/javascript"" > function changeCaptcha() { document.getElementById("captchaImage").src="genCaptcha.php?len="+(Math.random()*4+4); } </script> <img id= ""captchaImage"" src= ""genCaptcha.php"" width= ""150px"" height= ""50px"" > <br> <button id= ""newCaptcha"" onclick= ""changeCaptcha()"" > new captcha</button> </pre> <p> </p> <p>Bạn có thể thấy bằng cách thay đổi thuộc tính src của thẻ <img>, trang web của chúng ta làm việc tương tự như ajax mặc dù không sử dụng bất kì phương thức ajax nào.</p> <div class = "clear" > |
Comments[ 0 ]
Đăng nhận xét