RSS 2.0
フリーのキャプチャ ASP.NET サーバーコントロール を使用する機会があったので、簡単な使い方のメモを記載します。
検証環境は次の通り
- Visual Studio 2013 Premium
- ASP.NET Web Forms アプリケーション
MS Captcha コントロールのダウンロードや、公式のサイトで公開されているサンプルのダウンロードは次のリンクを参照してください。
ASP.NET CAPTCHA
http://kirsanov.net/page/ASPNET-CAPTCHA.aspx
CAPTCHA sample project
http://kirsanov.net/post/2011/10/28/CAPTCHA-sample-project.aspx
1. キャプチャコントロールのダウンロード
冒頭で紹介したリンクから MS Captcha コントロールをダウンロードしてください。
2.サンプルプロジェクトの作成
Visual Studio を起動して新しくプロジェクトを作成します。テンプレートで ASP.NET Web アプリケーションを選択します。.NET Framework のバージョンは 4.5.1 を選択しました。
新規 ASP.NET プロジェクト ダイアログで テンプレートの選択で Empty を選択します。Web Forms にチェックをしてプロジェクトを作成します。
ソリューションエクスプローラー上で、 プロジェクトの参照設定を右クリック > 参照の追加 をクリックします。参照マネージャーダイアログで参照ボタンをクリックして、 MSCaptchar.dll の参照を追加します。
Web.config を MSCaptcha のサンプルページからダウンロードできる サンプルの Web.config を参考にして編集します。Web.config にはすでに system.web タグや compilation タグが存在するので、それらを上書きしないようにマージしてください。記事作成時点では空のWebサイトからMSCaptchaのハンドラ―の設定を追加した後はこのようになります。
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.5.1" />
<httpRuntime targetFramework="4.5.1" />
<!--<httpHandlers>
<add verb="GET" path="CaptchaImage.axd" type="MSCaptcha.captchaImageHandler, MSCaptcha" />
</httpHandlers>-->
</system.web>
<!-- The following section is only needed for IIS7 and up -->
<system.webServer>
<handlers>
<add name="MSCaptcha.captchaImageHandler" verb="GET" path="CaptchaImage.axd" type="MSCaptcha.captchaImageHandler, MSCaptcha" resourceType="Unspecified" />
</handlers>
</system.webServer>
</configuration>
あとは キャプチャコントロールを使用するように、簡単なサンプル Web フォームを作成します。デフォルトで作成あsれる Default.aspx ファイルを次のように編集します。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MSCaptcharSample.Default" %>
<%@ Register Assembly="MSCaptcha" Namespace="MSCaptcha" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
キャプチャ画像
<cc1:CaptchaControl ID="CaptchaControl1" runat="server" Height="50px"
Width="180px" CaptchaLength="5" BackColor="White"
EnableViewState="False" />
<br /><br />
</div>
<div>
<asp:TextBox runat="server" ID="txtAnswer"></asp:TextBox>
<asp:Button runat="server" ID="btnValidate" Text="確認" OnClick="btnValidate_Click" />
</div>
<div>
<asp:Label runat="server" ID="lblResult"></asp:Label>
</div>
</form>
</body>
</html>
引き続き コードビハインドファイル (Default.aspx.cs) を次のように編集します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MSCaptcharSample
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
CaptchaControl1.CaptchaWidth = 200;
CaptchaControl1.CaptchaHeight = 70;
CaptchaControl1.CaptchaLength = 4;
}
protected void btnValidate_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(txtAnswer.Text))
{
lblResult.Text = "Please Input the Text in Captcha Image";
}
CaptchaControl1.ValidateCaptcha(txtAnswer.Text);
if (CaptchaControl1.UserValidated)
{
lblResult.Text = "正解です";
}
else
{
lblResult.Text = "キャプチャのテキストと異なっています";
}
}
}
}
ビルドしてエラーが発生しないことを確認します。
これで準備完了です。
F5ボタンでデバッグ実行して動作確認します。下図のようにキャプチャ画像が表示されるので、 画像に表示されたテキストを入力して 確認 ボタンをクリックします。
画像と一致するテキストを入力すると "正解です" メッセージが表示されます。
ロードバランスされた環境でMS Captcha コントロールを 使用する場合は CaptchaControl.CacheStrategy を 既定の httpRuntime ではなくて Session(サーバー間で共有されることが前提)やClientSideに設定する必要があると思われます。ClientSide にした場合は EnableViewState は true にしてください。
3.まとめ
説明は以上です。簡単なサンプルを掲載してみました。