SimpleMvcCaptcha、または私の最初のオープンソース体験

免責事項！

決して理想的なキャプチャの開発者であり、何か新しいものの発明者であるふりをすることはありません。 ここに書かれているものはすべて、教育目的とオープンソースのために私が作成したものです。 そして、はい、あなたのキャプチャを書くことは自転車を発明することであるとわかります。

それがすべて始まった方法

最近では、ASP.NET MVC 3で独自の小さなプロジェクトを開発し始めました。その本質は、訪問者がメッセージを追加して、パブリックドメインに表示されることです（この混乱する説明の背後にあるものに興味がある人-リンクは最後に）。



これはサーバーにコンテンツを投稿する可能性がある公開プロジェクトであるため、スパマーやその他の不快な人格からの保護に注意する必要があることは明らかです。 つまり、キャプチャが必要です。



最初に思いついたのは、GoogleのReCaptchaです。 しばらくインストールし、それを利用して、私はこのモンスターが私にとっても、ほとんどの適切な人々、特にロシア語を話す人にとってもまったくないことに最終的に気付きました（一部の画像の出力は機械で読めないだけでなく、人々が読むことができません）。 他のソリューションを探していたのですが、残念ながら、MVC 3の通常の何かを見つけることができませんでした。シンプルで控えめな使い方です。 これを行う方法についてはさまざまなマニュアルがありましたが、どういうわけか、「取って使用した」既成のソリューションに出会えませんでした。 したがって決定 自転車を発明する あなたのキャプチャを書きます。

アイデア

既製のソリューションを検索しても最終的な結果は得られませんでしたが、これらすべてを実装する方法についてのアイデアが得られました。 CAPTCHAは、いつものように、私たちはそれを見ると決めました（写真の中の単純な文字認識）。その機械分析の単純さを考慮して、品質を上げることはまずありません。 この場合、私は再び読むのが難しいか弱い防御のどちらかを選ばなければなりません。 したがって、キャプチャを少し非標準にすること、つまりユーザーが結果をカウントして特別なフィールドに入力できるように画像に算術演算を表示することにしました。 ほとんどの場合、標準のCAPTCHAアナライザーは、合計と差の代わりに認識されたテキストを置き換えますが、これは誤った結果になります。 まあ、彼らがこのキャプチャの下でボットを書いたら、何もそれを保存しません。

実装

すぐに言ってやった。 考え直すことなく、スタジオで新しいアセンブリプロジェクトを作成しました（1つのプロジェクトに対してcaptchaを個別のdllとして発行するために、良い形の感覚が私を促し、結局は無駄ではありませんでした）。 その中で、HtmlHelperクラスの通常の拡張メソッドを使用してクラスを作成しました。 その後、プロジェクト全体がSimpleMvcCaptchaと呼ばれました。



実装の本質は次のとおりです。 ヘルパーは、2つのオペランド番号と1つの操作をランダムに生成します（これまでのところ、+または-のみ）。 これらのパラメーターに基づいて、結果が計算されます。 その後、耳のある2つのフェイントが発生します。 まず、キャプチャ式を使用して画像を作成する必要があります。 ただし、これはヘルパー内では実行できません。 したがって、imgタグを作成する必要があります。imgタグのイメージのソースは、特別なコントローラーの特別に準備されたアクションになります。 耳を傾ける2番目のフェイント-結果に関する情報を何らかの方法で保存する必要があります。これにより、サーバーに結果をポストする際に、独自のキャプチャを認識する必要がなくなります。



最初は、豊富な経験の不足を考慮して、少し標準的でない道を進みたかった。 実際、私が読んだほとんどのキャプチャは、キャッシュまたはセッションを介して値を渡しました。 私はこのアイデアがあまり好きではなかったので、非表示フィールドにキャプチャを使用して、操作の結果をページ自体のhtml内に保存することにしました。 しかし、アナライザーの寿命を単純化しないために、AESを使用してこの文字列を暗号化することにしました。 しかし、この場合、ボットは画像のハッシュとその結果の両方を置き換える必要がないため、すぐに耐久性が失われることに気付きました。 したがって、それでも私は多数派の道をたどった。



セッションは、写真の表現のテキストと結果のテキストを含む小さなオブジェクトを保存します。 次に、このオブジェクトは、画像生成中とユーザー入力検証中の2つの場合に抽出されます。

/// <summary> /// Captcha object /// </summary> internal class Captcha { /// <summary> /// Result of captcha's expression /// </summary> public string Result { get; internal set; } /// <summary> /// Captcha's expression /// </summary> public string Expresion { get; internal set; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次にコントローラーについて。 私が見つけた例では、イメージ生成は.axd、.ashxなどの特別なプロセッサーに任されていました。 通常のコントローラーとアクションにこれをさせることにしました。 ここで、私は決定の正確性に疑問を抱いているので、この問題に対する批判と建設的なコメントを楽しみにしています。

  public class CaptchaController : Controller { public FileContentResult GetImage(string id) { return File(CaptchaUtils.GetImage(id), "image/gif"); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

検証も非常に簡単です。

  /// <summary> /// Validates input /// </summary> /// <returns>true - validation succeeded \nfalse - validation failed</returns> public static bool Validate() { var ctx = HttpContext.Current; var captchaAnswer = ctx.Request.Form["captchaAnswer"]; var captchaHidden = ctx.Request.Form["captchaId"]; // If input is not empty if(!String.IsNullOrEmpty(captchaAnswer) && !String.IsNullOrEmpty(captchaHidden)) { var captcha = ctx.Session[captchaHidden] as Captcha; ctx.Session.Remove(captchaHidden); return captcha != null && captchaAnswer == captcha.Result; } return false; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

どうした

これがcaptchaの例の外観です。 ご覧のとおり、ヘルパーは算術式のテキスト（ランダムな色）を使用して画像を生成し、+および-演算子をテキスト（パラメーターで指定可能）にランダムに置き換え、答えを入力するフィールドも提供します。 すべてが他の人と同じなので、「そのまま」使用するのが便利です。



クライアントコードは次のようになります。

 <div class="smc-captcha"> <img src='/Captcha/GetImage/08a75516-f1ed-41ca-a926-724a268f171e' alt='captcha' class='smc-img-captcha' ><br/> <input type='hidden' name='captchaId' value='08a75516-f1ed-41ca-a926-724a268f171e' /> <input type='text' name='captchaAnswer' class='smc-input-result' /> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

カスタマイズ

captchaの生成プロセスで使用されるほとんどのパラメーターは、ASP.NET MVCプロジェクトのweb.configを使用してオーバーライドできます。 これらのパラメーターのうち、画像の幅と高さ、フォントのサイズと種類、+と-の置換テキスト（上の図では3番目のフレームです）、式で使用する最大数、コントローラーの名前、および画像を表示するアクションを選択できます。 対応するクラスをオーバーライドすることにより、div、img、およびimput要素のCSSプロパティをカスタマイズすることもできます。

オープンソース

今、私はHabrで書くことに決めた理由です。 この記事のタイトルでは、オープンソースについて言及しています。 はい、このキャプチャを自分で実装した後、他のコミュニティと共有するのがいいと判断しました。 これは私の最初のオープンソース開発の経験なので、私にとっては二重に興味深いものになりました。 すべてのコード、説明、およびドキュメントは、GPLv2ライセンスに基づいて、 http： //simplemvccaptcha.codeplex.com/のCodePlexで入手できます。 入って、ダウンロードして、使ってください。

結論として

この小さなプロジェクトがASP.NET MVC 3に基づいたサイトの作成に役立つことを本当に願っています。ASP.NETMVC 3では、簡単なキャプチャの機能が必要です。



PSそして、それが最初に書かれ、最初に話したプロジェクトは、 「プログラミングに関する事実」と呼ばれます。 まだ多くの事実はありませんが、あなたのサポートを含め、プロジェクトが積極的に発展することを願っています！

captchaの使用例は、あなた自身の事実を追加するためのページにあります 。 キャプチャまたはウェブサイトのバグに気付いた場合、すぐにそれを壊そうとしないでください。 お知らせください。修正します。 建設的にしましょう。