captcha 驗證碼

securimage

建立 html 的使用者輸入表
<form>
<fieldset><legend>留言</legend>
<ol>
<li><label for="subject">主題:</label><input type="text" id="subject" name="subject" placeholder="主題" maxlength="30"></li>
<li><label for="nick">發表人:</label><input type="text" id="nick" name="nick" placeholder="您的稱呼" maxlength="30"></li>
<li><label for="msg">内容:</label><textarea col="40" row="6" id="msg" name="msg" placeholder="想想說說…"></textarea></li>
<li><button type="submit">送出</button></li>
</ol>
</fieldset>
</form>
html 表增加驗證圖碼
<form>
<fieldset><legend>留言</legend>
<ol>
<li><label for="subject">主題:</label><input type="text" id="subject" name="subject" placeholder="發表的主題" maxlength="30"></li>
<li><label for="nick">發表人:</label><input type="text" id="nick" name="nick" placeholder="您的稱呼" maxlength="30"></li>
<li><label for="captcha_code">驗證碼:</label><input type="text" id="captcha_code" name="captcha_code" placeholder="輸入提示的文字" maxlength="7"><img src="captcha/securimage/securimage_show.php" id="captcha" alt="驗證圖碼"></li>
<li><label for="msg">内容:</label><textarea col="40" row="6" id="msg" name="msg" placeholder="想想說說…"></textarea></li>
<li><button type="submit">送出</button></li>
</ol>
</fieldset>
</form>
檢驗認證碼輸入是否正確
<?php
session_start();
include_once "captcha/securimage/securimage.php";
$simg=new Securimage();
if(filter_has_var(INPUT_POST,'sending')){
 if($simg->check($_POST['captcha_code'])){
  $isPassed=true;
 }
 else{
  $codeFailed=true;
 }
}
?>
<form method="post" action="<?php echo basename(__FILE__); ?>">
<fieldset><legend>留言</legend>
<ol>
<li><label for="subject">主題:</label><input type="text" id="subject" name="subject" placeholder="發表的主題" maxlength="30"></li>
<li><label for="nick">發表人:</label><input type="text" id="nick" name="nick" placeholder="您的稱呼" maxlength="30"></li>
<li><label for="captcha_code">驗證碼:</label><input type="text" id="captcha_code" name="captcha_code" placeholder="輸入提示的文字" maxlength="7"><img src="captcha/securimage/securimage_show.php" id="captcha" alt="驗證圖碼"><?php
if(!empty($codeFailed)) echo '<label for="captcha_code">輸入有誤,請重新輸入。</label>';
if(!empty($isPassed)) echo '正確';
?></li>
<li><label for="msg">内容:</label><textarea col="40" row="6" id="msg" name="msg" placeholder="想想說說…"></textarea></li>
<li><button type="submit" name="sending" value="1">送出</button></li>
</ol>
</fieldset>
</form>
加入可更換驗證圖碼的 javascript
<script src="scripts/jquery.js"></script>
<script>
/*latest:2013/4/26 ©webchain(不惑仔)*/
jQuery(document).ready(function($) {
var captcha={};
captcha.codeImg=$('*#captcha');
captcha.reloadCode=function(e){
 e.preventDefault();
 captcha.codeImg.prop({src:'captcha/securimage/securimage_show.php?fake='+Math.random()});
};
$('<button type="button">更換提示碼</button>').insertAfter(captcha.codeImg).on('click.boo',captcha.reloadCode);
});
</script>

html 會自動變更為 (不需再自行加入)

<form method="post" action="<?php echo basename(__FILE__); ?>">
<fieldset><legend>留言</legend>
<ol>
<li><label for="subject">主題:</label><input type="text" id="subject" name="subject" placeholder="發表的主題" maxlength="30"></li>
<li><label for="nick">發表人:</label><input type="text" id="nick" name="nick" placeholder="您的稱呼" maxlength="30"></li>
<li><label for="captcha_code">驗證碼:</label><input type="text" id="captcha_code" name="captcha_code" placeholder="輸入提示的文字" maxlength="7"><img src="captcha/securimage/securimage_show.php" id="captcha" alt="驗證圖碼"><button type="button">更換提示碼</button><?php
if(!empty($codeFailed)) echo '<label for="captcha_code">輸入有誤,請重新輸入。</label>';
if(!empty($isPassed)) echo '正確';
?></li>
<li><label for="msg">内容:</label><textarea col="40" row="6" id="msg" name="msg" placeholder="想想說說…"></textarea></li>
<li><button type="submit" name="sending" value="1">送出</button></li>
</ol>
</fieldset>
</form>
html 表增加發音程式
<form method="post" action="<?php echo basename(__FILE__); ?>">
<fieldset><legend>留言</legend>
<ol>
<li><label for="subject">主題:</label><input type="text" id="subject" name="subject" placeholder="發表的主題" maxlength="30"></li>
<li><label for="nick">發表人:</label><input type="text" id="nick" name="nick" placeholder="您的稱呼" maxlength="30"></li>
<li><label for="captcha_code">驗證碼:</label><input type="text" id="captcha_code" name="captcha_code" placeholder="輸入提示的文字" maxlength="7"><img src="captcha/securimage/securimage_show.php" id="captcha" alt="驗證圖碼"><object title="聼驗證碼" tabindex="9" type="application/x-shockwave-flash" data="captcha/securimage/securimage_play.swf?audio_file=captcha/securimage/securimage_play.php&amp;icon_file=captcha/securimage/images/audio_icon.png" height="24" width="24"><!--[if lt IE 9]>
<param name="movie" value="captcha/securimage/securimage_play.swf?audio_file=captcha/securimage/securimage_play.php&amp;icon_file=captcha/securimage/images/audio_icon.png"><![endif]-->
</object><?php
if(!empty($codeFailed)) echo '<label for="captcha_code">輸入有誤,請重新輸入。</label>';
if(!empty($isPassed)) echo '正確';
?></li>
<li><label for="msg">内容:</label><textarea col="40" row="6" id="msg" name="msg" placeholder="想想說說…"></textarea></li>
<li><button type="submit" name="sending" value="1">送出</button></li>
</ol>
</fieldset>
</form>
設定圖碼呈現的型式 Securimage class
屬性
  1. image_height

    指定圖的高度,正整數;預定值 80 。

  2. image_width

    指定圖的寬度,正整數;預定值 215 。或以高度的倍數處理,如,

    $securimage->image_width = $securimage->image_height * M_E
  3. num_lines

    指定干擾缐的數量,正整數;預定值 5 。

  4. noise_level

    指定雜點的複雜程度, 0 到 10 整數,愈大雜點愈多;預定值 2 。

  5. perturbation

    指定字的扭曲程度,愈大扭曲程度愈重;預定值 0.85 。

  6. text_transparency_percentage

    指定字的透明程度, 0 到 100 整數,愈小愈透明;預定值 20 。

  7. captcha_type

    指定為 Securimage::SI_CAPTCHA_MATHEMATIC ,表示驗證碼改為回答數學計算式結果;預定值 Securimage::SI_CAPTCHA_STRING

  8. image_bg_color

    指定圖的背景顔色,以内建的 Securimage_Color class 物件處理,參數可以是 (r,g,b) 數值或 16 進位顔色表示法;預定值 '#ffffff' 。如,

    $securimage->image_bg_color = New Securimage_Color(180,180,180);
    $securimage->image_bg_color = New Securimage_Color('#aabbff');
  9. text_color

    指定字的顔色,以内建的 Securimage_Color class 物件處理,參數可以是 (r,g,b) 數值或 16 進位顔色表示法;預定值 '#707070' 。如,

    $securimage->text_color = New Securimage_Color(0,0,0);
    $securimage->text_color = New Securimage_Color('#666666');
  10. line_color

    指定干擾缐的顔色,以内建的 Securimage_Color class 物件處理,參數可以是 (r,g,b) 數值或 16 進位顔色表示法;預定值 '#707070' 。如,

    $securimage->line_color = New Securimage_Color(110,110,110);
    $securimage->line_color = New Securimage_Color('#666666');
  11. noise_color

    指定雜點的顔色,以内建的 Securimage_Color class 物件處理,參數可以是 (r,g,b) 數值或 16 進位顔色表示法;預定值 '#707070' 。如,

    $securimage->noise_color = New Securimage_Color(110,110,110);
    $securimage->noise_color = New Securimage_Color('#666666');
  12. code_length

    指定驗證碼的字元數,正整數;預定值 6 。在某個範圍内每次產生不等 (隨機) 的字元數,如,

    $securimage->code_length = mt_rand(5,7);
  13. expiry_time

    指定驗證的有效期限 (秒數) ;預定值 900 。

方法
  1. check($code)

    檢驗 $code 是否與驗證碼相符。

  2. outputAudioFile()

    轉出成 wav 格式發音檔。

  3. show($background_image = '')

    轉出成圖檔。$background_image 參數為背景圖的目錄路徑。

參考資源

更新日期:

google 論壇

App javascript (groups.google.com/group/app-javascript/)