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

屬性

image_height

指定圖的高度，正整數；預定值 80 。
image_width
指定圖的寬度，正整數；預定值 215 。或以高度的倍數處理，如，
```
$securimage->image_width = $securimage->image_height * M_E
```
num_lines

指定干擾缐的數量，正整數；預定值 5 。
noise_level

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

指定字的扭曲程度，愈大扭曲程度愈重；預定值 0.85 。
text_transparency_percentage

指定字的透明程度， 0 到 100 整數，愈小愈透明；預定值 20 。
captcha_type

指定為 Securimage::SI_CAPTCHA_MATHEMATIC ，表示驗證碼改為回答數學計算式結果；預定值 Securimage::SI_CAPTCHA_STRING 。
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');
```
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');
```
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');
```
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');
```
code_length
指定驗證碼的字元數，正整數；預定值 6 。在某個範圍内每次產生不等 (隨機) 的字元數，如，
```
$securimage->code_length = mt_rand(5,7);
```
expiry_time

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

方法

check($code)

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

轉出成 wav 格式發音檔。
show($background_image = '')

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

參考資源

更新日期： 2013-4-28

captcha 驗證碼

securimage

google 論壇

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

captcha 驗證碼

securimage

google 論壇

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

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