2009
03.12

在Flex專案中搞了個驗證碼功能

Category: Flex / Tag:  / Add Comment / [2,392 人次]

感謝網路的發達與與IT的進步，為了防止網站系統被機器人瘋狂註冊或是留言，因此就發展出了一個叫做"驗證碼"的機制出來了，說穿了就是在網頁上會提供一張圖片，這張圖片有一段文字內容，而當"人"看到這段文字，就可以將該文字輸入在驗證框中，只要內容相符，就算是驗證通過，不過魔高一尺道高一丈，現在又開始流行用程式去decode圖面內容。

網頁驗證碼

不巧在專案中的要求書中，需要製作一個驗證碼的功能，好吧，既來之則安之，兵來將擋水來土淹，網路上沒找到適合Flex使用的驗證碼機制，只好自己花了一些時間做了一個Flex的驗證碼的元件來使用，本來是把他搞的很複雜，不過考慮到辨識率的問題(第一個版本搞到連人都看不太懂了)，所以後來把他簡單化了，還蠻有意思的，有興趣的人可以玩看看。

你只需要點選[產生驗證碼]的按鈕，就可以不停的產生新的圖示出來，上方是用Label顯示的清晰內容，下方是驗證碼元件輸出的結果。(我個人覺得像是1,l,h.n,9,g…這些文字，經過驗證後有時候還真的不好辨識哩)


試用網址請點選下方圖示：

驗證碼功能


相關文章:
  • Adobe Flex 4.1現身
  • Flash Builder4 文字提示功能
  • Flash Player 10.1正式版釋出
  • Facebook 的ActionScript API 更新到 3.3版
  • 用ActionScript讀取相片中的exif資訊
    • 本文引用：
    文章內容由宋志峰[ANISTAR]撰寫，引用分享請以鏈結形式註明出處與原始作者。

    7 comments so far

    Add Your Comment
    1. 回覆
      Teddu said: 2010.02.11 23:33

      呵, 這好東西未來會放到新書中嗎?
      期待大作

    2. 回覆
      withman said: 2009.03.15 17:24

      Anistar，看到你這個範例，我真的很著迷。

      請問你的這些圖檔是預先Embed 的嗎？
      （還是其實那些不是圖檔啊？my god…）

      還有你文章中提到可以依據客戶要求設定不同的混亂程度，

      這是運用Effect做出來的嗎？

      我想了一陣子，拜託老師提示一下吧？

      • anistar said: 2009.03.16 17:59

        當然不是Embed圖案，這樣就失去意義了，這個示範其實跟Flex倒是沒直接的關係(也不沒用到Effect)，我是用ActionScript 3.0刻出來的，所以只要你熟練ActionScript就可以做的出來了.

    3. 回覆
      Ausir said: 2009.03.15 04:36

      還沒玩過動態產生圖片的效果 >"<

      • anistar said: 2009.03.16 18:00

        之前我也沒做過，客戶說要就只好乖乖刻出來了 Orz

    4. 回覆
      lanma said: 2009.03.13 23:32

      再插入一些隨機線條與文字數字交叉，就更難辨識了~

      • anistar said: 2009.03.13 23:57

        拿出來玩玩的所以乾脆弄清爽一點 :p
        我在設計這個元件的時候有加上混亂的因子，只要加大混亂因子的數值，恐怕連人都很難辨識，到時候就看客戶要哪一種效果就塞哪一種給他就對了 XD

    Your Comment