輕輕鬆鬆使用圖形安全碼認証

第一節

引言

本章要教您如何在CakePHP中加入安全碼認証。 何謂安全碼認証？安全碼認証可以讓你要求的使用者輸入圖中的文字，輸入不對時就不允許執行動作。

本章所使用的程式碼改寫自 Edward Eliot 所寫的 Toughen Forms' Security with an Image ，如果有版權上的問題，請來信告知，謝謝。

第二節

下載

範例程式： SecurityImage.zip

使用方式：

  1. 把當案解開至安裝目錄 (請確認 app 放在安裝目錄中，如果沒有，請自行移動)
  2. 在瀏覽器中輸入 '[address]/SecurityImages/test'
  3. 如果順利，會看到這個結果 => CLICK

第三節

目標

本章直接討論如何將下載自Edward Eliot原範例的SecurityImage類別使用於CakePHP中。我們會做以下幾件事：

  1. 將類別檔放到第三方函式庫目錄(/vendors)
  2. 加入新的controller
  3. 加入測試用的view
  4. 測試

第四節

將類別檔放到第三方函式庫目錄(/vendors)

首先，將解開的目錄內/vendors/SecurityImage.php這個檔案放到/vendors目錄內。 關於此類別內容在此不討論，有興趣可到 Toughen Forms' Security with an Image 閱讀。 放進去後，我們才可以在controller裡使用這個類別。

建立controller

接著，我們要建立一個名為SecurityImagesController的類別。依CakePHP命名規則，controller必須是複數。檔名則為 security_images_controller.php ，相關的view會放在 /views/security_images/目錄內。 這個controller中使用了Session元件操作session變數，並且指明不自動連結任何model。 SecurityImagesController程式碼如下：

<?php
class SecurityImagesController extends AppController{
    var $name = 'SecurityImages'; //類別名稱
    var $uses = null; //不使用任何的model
    var $components = array('Session'); //使用Session 元件
}
?>

加上預設action index()

我們要直接透過類似'/SecurityImages/'這樣的URL呼叫安全碼影像的action，所以必須加入index()涵式。 index()裡是整個controller最重要的邏輯，首先它會由vendor目錄把SecurityImage類別引入，建立物件， 並將產生的亂碼放到session中。 值得注意的是，這個action並不使用任何layout，也不會自動輸出結果。 如果不這麼做，會造成圖片中傳回預設的layout內容，可能有安全上的問題。 index()程式碼如下：

//預設action , 可透過'/SecurityImages'呼叫
function index(){
    $this->layout = ''; //不使用layout
    $this->autoRender = false; //不輸出結果
    vendor('securityimage'); //使用 /vendors/securityimage.php
    //建立新物件
    $oSecurityImage = new SecurityImage(150, 30);
    //建立圖片
    if ($oSecurityImage->Create()) {
        $this->Session->write('sc', $oSecurityImage->GetCode());//把安全碼記在session裡
    }
}

加入測試action test()

接下來加上測試用的action。 action內先確認是否有資料，沒有的話就輸出view的內容，否則檢查安全碼是否正確，依結果做想做的事。 程式碼如下：

//測試用action
function test(){
    $this->layout = ''; //不使用layout
    //判斷是否有輸入安全碼
    if( isset($this->data['security']['usc'])) {
        //比對輸入的安全碼是否正確
        if($this->Session->read('sc') == $this->data['security']['usc']){
            $this->flash('okay, you are allowed to enter.','/');
        }else{
            $this->flash('please check again.','/SecurityImages/test');
        }
        $this->Session->delete('sc');
        exit;
    }
}

加入測試action的view

test() action使用的view依CakePHP命名規則，我們將它放在/views/security_images/action.thtml中。 view裡我們要產生一個表單，上頭顯示連結到'/SecurityImages'的影像，並讓使用者輸入安全碼，輸入完按下summit後， 在controller裡可以透過$this->data[security][usc]取得該值。程式碼如下：

<form method="post" action="<?php echo $html->url('/SecurityImages/test/');?>">
<p>
請輸入圖片上的文字<br>
<img src="/SecurityImages" alt = "no image" /><br>
<?php echo $html->input('security/usc', array('size' => '20')) ?>
</p>
<p>
<?php echo $html->submit('Submmit') ?>
</p>

</form>

連結測試

到最後一步，讓人最興奮也最害怕的一步：測試！試著在瀏覽器中輸入'[address]/SecurityImages/test'。恭喜成功！

第五節

結論

恭喜您可以在自己的CakePHP專案中加入目前最流行的圖形安全碼認証。這只是個開始，想學更多可到 CakePHP手冊(繁體中文）仔細看看中文操作手冊。也可到 CakePHP官方網站看看英文資料。


附錄：讀者筆記