Home »

Hướng dẫn tạo form bảo mật hơn với captcha trong PHP và jQuery

12 thg 9, 2013

Captcha, một từ mà mình nghĩ đa số các bạn đều biết đến nó rồi nhỉ? Captcha giúp cho web mình xác định người truy cập có phải là con người hay là 1 cổ máy, từ đó chống SPAM cho web chúng ta. Như tiêu đề của bài viết hôm nay 2Cwebvn xin giới thiệu đến các bạn cách làm 1 captcha đơn giản bằng PHP và jQuery, từ đó áp dụng vào form để giúp mình bảo mật hơn.


 
Captcha, một từ mà mình nghĩ đa số các bạn đều biết đến nó rồi nhỉ? Captcha giúp cho web mình xác định người truy cập có phải là con người hay là 1 cổ máy, từ đó chống SPAM cho web chúng ta. Như tiêu đề của bài viết hôm nay 2Cwebvn xin giới thiệu đến các bạn cách làm 1 captcha đơn giản bằng PHP và jQuery, từ đó áp dụng vào form để giúp mình bảo mật hơn.
 
Bài viết hôm nay cũng đơn giản thôi gồm có 2 phần, phần đầu thì mình sẽ tạo 1 captcha, sau đó sang phần thứ 2 mình sẽ tạo 1 form áp dụng captcha vào, có kèm theo bắt lỗi đơn giản bằng Javascript và jQuery.
 
Demo Download
1. TẠO CAPTCHA
Phần này mình tạo 1 file captcha_code.php, trong file này mình sẽ viết code để tạo ra 1 captcha, file này có nội dung như sau:
?
1
2
3
4
5
6
7
8
9
session_start(); // Khởi tạo session
$ranStr = md5(microtime()); // Lấy chuỗi rồi mã hóa md5
$ranStr = substr($ranStr, 0, 6);    // Cắt chuỗi lấy 6 ký tự
$_SESSION['cap_code'] = $ranStr; // Lưu giá trị vào session
$newImage = imagecreatefromjpeg("bg_captcha.jpg"); // Tạo hình ảnh từ bg_captcha.jpg
$txtColor = imagecolorallocate($newImage, 0, 0, 0); // Thêm màu sắc cho hình ảnh
imagestring($newImage, 5, 5, 5, $ranStr, $txtColor); // Vẽ ra chuỗi string
header("Content-type: image/jpeg"); // Xuất định dạng là hình ảnh
imagejpeg($newImage); // Xuất hình ảnh ra trình như 1 file
2. ÁP DỤNG CAPTCHA VÀO FORM
2.1 Phần HTML
Mình sẽ tạo file chạy chính index.php
?
1
2
3
4
5
6
7
8
9
10
11
12
session_start();
$mes = 'notOk';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($_POST['captcha'] == $_SESSION['cap_code']) {
// Nhập Captcha chính xác, bạn có thể làm điều gì đó ở đây
// ex: lưu xuống DB, send email,..
$mes = 'Ok';
} else {
// Nhập Captcha sai
$mes = '';
}
}
Tiếp theo thì mình sẽ tạo form đơn giản với 3 thuộc tính là họ tên, nội dung và captcha. Thêm vào đó là 1 thẻ div có class = "captcha_status" để hiện thị thông báo lỗi, phần html của form như sau:
 
?
source code
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
<div id="wrapper">
<center><h1>Bảo mật form với captcha trong Php và jQuery - 2Cwebvn</h1></center>
<div class="captcha_status"></div>
<form action="index.php" method="post">
<div id="form">
<table border="0" width="100%">
<tbody><tr>
<td colspan="2"><label>Họ tên:</label><label class="require"> *</label><br>
<input type="text" name="hoten" id="hoten"></td>
</tr>
<tr>
<td colspan="2"><label>Nội dung:</label><label class="require"> *</label><br>
<textarea name="noidung" id="noidung"></textarea></td>
</tr>
<tr>
<td colspan="2"><label>Mã bảo mật</label><label class="require"> *</label></td>
</tr>
<tr>
<td width="60px">                          
<input type="text" name="captcha" id="captcha" maxlength="6" size="6"></td>
<td><img src="captcha_code.php"></td>
</tr>
<tr>
<td><input type="submit" value="Submit" id="submit"></td>
<td></td>
</tr>
</tbody></table>
</div>
</form>
</div>

 
2.2 Phần CSS
 
Trước tiên thì mình phải reset style mặc định của trình duyệt và định dạng cho trang.
?
1
2
3
4
5
6
7
8
9
10
11
/*========= RESET STYLE TRÌNH DUYỆT ========*/
*{
margin:0px;          
padding:0px; 
}
/*========= NỘI DUNG ========*/
body{
background:url(bg_2cwebvn.png) repeat;
}
#wrapper{ margin:0 auto;}
h1{margin:50px 0px; width: 450px; color:#DB2E66;}
 
và đây là phần css định dạng cho form.
?
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
/*========= ĐỊNH DẠNG FORM ========*/
#form{
margin:100px;
width: 350px;
outline: 5px solid #ccc;
border: 1px solid #ccc;
padding: 10px;
margin:0 auto;
}
#form label{
font:bold 11px arial;
color: #565656;
padding-left: 1px;
}
#form label.require{color: #f00;}
#form input[type="text"]{
height: 30px;
margin-bottom: 8px;
padding: 5px;
font: 12px arial;
color: #0060a3;
}
#form textarea{
width: 340px;
height: 80px;
resize: none;
margin: 0 0 8px 1px;
padding: 5px;
font: 12px arial;
color: #0060a3;
}
#form img{
margin-bottom: 8px;
}
#form input[type="submit"]{
background-color: #0064aa;
border: none;
color: #fff;
padding: 5px 8px;
cursor: pointer;
font:bold 12px arial;
}
 
Phần cuối cùng là phần css thông báo lỗi.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*========= THÔNG BÁO ========*/
.error{
border: 2px solid #DB2E66;
}
.captcha_status{
width: 370px;
padding: 10px; margin:10px auto;
font: 14px arial;
color: #87022e;
text-align:center;
display: none;
border:2px solid #DB2E66;
}
.captcha_status_error{
color: #87022e;               
}
 
2.3 Phần Javascript & jQuery
Phần này thì mình kiểm tra từng field, nếu 3 field đều hợp lệ thì submit form rồi hiện thông báo cho người dùng, còn nếu không thì cũng hiện thông báo cho người dùng biết là sai.
 
Phần này thì mình chỉ đơn giản là dùng javascript để kiểm tra, và dùng jQuery để hiện thông báo. Nếu các bạn không muốn dùng javascript để kiểm tra thì bạn có thể xem lại bài viết "jQuery Validate" của mình để xem lại, bài viết rất chi tiết và dễ hiểu.
?
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
$(document).ready(function(){
$('#submit').click(function(){
// Tạo các biến lấy các giá trị nhập của người dùng
var hoten = $('#hoten').val();
var noidung = $('#noidung').val();
var captcha = $('#captcha').val();
// Kiểm tra field hoten
if( hoten.length == 0){
$('#hoten').addClass('error');
}else{
$('#hoten').removeClass('error');
}
// Kiểm tra field noidung
if( noidung.length == 0){
$('#noidung').addClass('error');
}else{
$('#noidung').removeClass('error');
}
// Kiểm tra field captcha
if( captcha.length == 0){
$('#captcha').addClass('error');
}else{
$('#captcha').removeClass('error');
}
// Kiểm tra 3 field, nếu thỏa điều kiện thì nó sẽ submit
if(hoten.length != 0 && noidung.length != 0 && captcha.length != 0){
return true;
}
// Nếu ko thỏa thì ko submit form
return false;
});
// Lấy kết quả kiểm tra captcha
var capch = '';
// Kiểm tra captcha có đúng hay không rồi hiện thông báo phù hợp
if(capch != 'notOk'){
if(capch == 'Ok'){
$('.captcha_status').html("Thành công: Thông tin của bạn đã được gởi đi!!!").fadeIn('slow').delay(4000).fadeOut('slow');
}else{
$('.captcha_status').html("Lỗi: Bạn là 1 con Robot SPAM!").addClass('captcha_status_error').fadeIn('slow');
}
}
});
Và điều cuối cùng các bạn nhớ phải thêm thư viện jquery vào nhé :)
 
?
source code
1
<script type="text/javascript" src="images/jquery.min.js"></script>
 
Và đây là một số hình ảnh thành quả mà mình đã làm đây.
 



NOTE : Mỗi bài viết này mình đều có chú thích rõ ràng hết cho các bạn, viết rất chi tiết, hy vọng sẽ giúp ích cho các bạn trên con đường lập trình mình đã chọn.!
 
Kết luận
Bạn có thích bài hướng dẫn này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, 2Cwebvn xin cảm ơn!
 
Mọi ý kiến thắc mắc hay đóng góp xin gởi về cho chúng tôi bằng form bình luận bên dưới, xin chúc các bạn thành công!
Tags:

Comments[ 0 ]


Đăng nhận xét