Long Live The King
ข้าพเจ้าไม่ได้มีพรสวรรค์พิเศษอะไร ข้าพเจ้าเพียงแต่มีความกระหายใคร่รู้อยู่เสมอ ทุ่มเทให้กับสิ่งที่อยากรู้ พากเพียรอย่างทรหด และสำรวจวิจารณ์ความรู้ของตัวเองเป็นประจำ ปัจจัยเหล่านี้คือที่มาของแนวคิดต่างๆ ของข้าพเจ้า .... อัลเบิร์ต ไอน์สไตน์

วันจันทร์ที่ 7 มกราคม พ.ศ. 2556

Chaptcha ตัวหนังสือรูปภาพยืนยันการ Login หรือโพส Webboard + Refresh



เรามักจะเห็นตัวหนังสือภาพที่เขียนด้วยภาษา PHP มาคอย Random เวลาที่เราล็อคอิน หรือโพสตาม เว็บบอร์ด เพื่อป้องกันการสแปมเว็บ หรือ การถูกก่อกวนจากผู้ไม่ประสงค์ดี อันนี้ว่ากันตามที่เขาพูดต่อๆกันมานะครับ หรือ ทำให้ผู้ไม่ประสงค์ดี เหนื่อยอ่อนใจกับการที่ต้องมาคอย กรอกโค้ด chaptcha ความจริงมันก็เหนื่อยทั้งผู้ประสงค์ดี และผู้ไม่ประสงค์ดี นั้นแหละ..555+... เอากันจริงๆก็คือ การป้องกันการ spam เว็บจาก bot ของผู้ไม่ประสงค์ดีนั่นเอง....

สิ่งที่ต้องมี
1. captcha.php
2. text_captcha.php
3. captcha_result.php
4. jquery.js
5. 40240.TTF (font ตัวหนังสือที่ต้องการ)
6. bg.png (ภาพ background)
7. refresh.jpg (ภาพ)

เริ่ม.. สร้าง form กันก่อน
ไฟล์ captcha.php

<div id="container">
<form name="form1" method="post" action="captcha_result.php">
<table>

<tr valign="top">
<td>Emailaddress ::</td>
<td>
<div><input type="text" name="email" id="email"></div>
</td>
</tr>

<tr>
<td></td>
<td>
<div><img src="text_captcha.php?str=<?=$ran_str?>" id="captcha"/></div>
</td>
<td><div id="refresh"><img height="30" src="refresh.jpg"/></div></td>
</tr>

<tr>
<td>Code ::</td>
<td><input name="code_input" type="text"></td>
</tr>

<tr>
<td></td>
<td><input type="submit" name="Submit" value="Submit"></td>
</tr>

</table>
</form>
</div>

จบแล้วในส่วนของ form ตามมาด้วยการสร้างข้อความรูปภาพ เริ่มที่การ สร้าง function random text ออกมา 6ตัว หรือตามที่ต้องการ ดังนี้
ไฟล์ text_captcha.php

<?

function ranDomStr($length){
    $str2ran = 'abcdefghijklmnopqrstuvwxyz123456789';
    $str_result = "";
    while(strlen($str_result)<$length){
            $str_result .= substr($str2ran,(rand()%strlen($str2ran)),1);
    }
    return($str_result);
}
$ran_str = randomstr(6);

?>

จากนั้นก็มาสร้าง text ให้เป็นรูปภาพ ดังนี้

ไฟล์ text_captcha.php

<?php

$font = "40240.TTF";//กำหนด font ตัวหนังสือ
$image = imagecreatefrompng('bg.png'); //สร้าง background จาก .png
$bg = imagecolorallocate($image,200,220,220); //พื้นหลังสีขาว
$color = imagecolorallocate($image, rand(200, 300),rand(1, 200),
        rand(100, 300)); //ตรงนี้ ผมใส่ rand เพื่อให้ตัวหนังสือเปลี่ยนสี
imagettftext($image,25,0,12,30,$color,$font,$ran_str);
header("Content-type:image/png");//ส่งออกรูปภาพ
imagepng($image);
imagedestroy($image);
$_SESSION['security_code'] = $ran_str;
//เอาค่าที่ random ได้มาฝากไว้กับตัวแปร session เพราะฉนั้นท่านก็ต้อง state session ก่อน

?>

กำหนดการเปิดใช้งาน session ไว้ด้านบนสุดของเพจ ดังนี้
ไฟล์ text_captcha.php

<?php session_start();?>

จบแล้วในส่วนของ ข้อความรูปภาพ

ที่นี้ก็มาถึงในส่วนของการเช็คความถูกต้องของ ข้อความที่ส่งมา วิธีการคือ
เก็บตัวแปร session มาเช็คกับ code ที่กรอก input มานั่นเอง
ถ้า $_SESSION['security_code']ตรงกับ $_POST['code_input']
และ $_SESSION['security_code'] จะต้องไม่ใช่ค่าว่าง ถ้าเป็นตามเงื่อนไขนี้ก็ผ่าน

ไฟล์ captcha_result.php

<?php

if( $_SESSION['security_code'] == $_POST['code_input']
        && !empty($_SESSION['security_code'] ) ) {
        echo 'ขอบคุณ สำหรับการทดสอบของท่าน';
        unset($_SESSION['security_code']);
} else {
        echo 'เสียใจด้วย รหัสภาพของท่านไม่ถูกต้อง';
}
echo "<br/><br/><a href='captcha.php'>Back</a>"

?>

บทความนี้ก็จบลงเพียงเท่านี้ครับ.....


1 ความคิดเห็น:

  1. แล้วข้อนี้ต้องหามาจากไหนล่ะ
    4. jquery.js
    5. 40240.TTF (font ตัวหนังสือที่ต้องการ)
    6. bg.png (ภาพ background)
    7. refresh.jpg (ภาพ)

    ตอบลบ

© Bookneo, AllRightsReserved.

ขับเคลื่อนโดย Blogger Designed by Nikhorn Thongchuay