[MS Captcha] ASP.NET Webフォームで MS Captcha コントロールを使用してみる

handcraft 8/30/2014 9222 2 AspDotNet

フリーのキャプチャ 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.まとめ

説明は以上です。簡単なサンプルを掲載してみました。

// Net planet-es V2