上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




会員登録機能などでよく使われている画像認証機能(Captcha)をFlexで作成した画面に埋め込んでみました。
詳細は下記サイトをご覧ください。
http://www.flexer.info/2007/10/30/captcha-in-flex-main-class/


Captchaライブラリのダウンロード


下記サイトの中段にある「captcha」よりダウンロードしてください。
http://www.flexer.info/2007/11/09/captcha-in-flex-using-to-check-the-user/

Captchaサンプルソース


上記でダウンロードしたファイル中の「com/Captcha.as」を任意なディレクトリに保存します。
(※comパッケージ配下と違う場所に変えた場合、パッケージを変更してください。)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application width="300" height="200" xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();">

<mx:Canvas width="220" height="40" id="captchCanvas"/>
<mx:TextInput id="text1" text="" />
<mx:Button label="文字列チェック" click="check()" />
<mx:Button label="画像更新" click="refresh()" />

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import com.Captcha;

public var captchaObj:Captcha;
public var captchaCode:String;

public function init() :void {
if (captchaObj && this.getChildIndex(captchaObj)) this.removeChild(captchaObj);
captchaObj = new Captcha("simple",8,220,40);
captchaCode = captchaObj.securitycode;
this.captchCanvas.addChild(captchaObj);

}
public function refresh() :void{
this.captchCanvas.removeChild(captchaObj);
captchaObj = null;
init();
}
public function check():void{
if (captchaCode == text1.text) {
Alert.show("認証OKです");
} else {
Alert.show("認証NGです");
}
}
]]>
</mx:Script>
</mx:Application>


captchaObj = new Captcha("alphaCharsnum",8,220,40);

上記の1番目の引数に表示する文字列の種類を設定できます。
下記の4種類が用意されています。

simple="0123456789"
alphaChars="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
alphaCharsnum="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
secure="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@$%&*-_=+?~"


Captchaサンプル


上記ソースを実行したサンプルです。
「文字列チェック」ボタン押下時、入力した文字列と画像文字列のチェックを行います。
「画像更新」ボタン押下時、画像文字列を更新し、違う文字列を表示します。

少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。