コーディングメソドロジー

第67回 フォームにキャプチャ認証を実装する

サイトのお問い合わせフォームやコメントを書き込むフォーム等で見かけるキャプチャ認証。今回はこのキャプチャ認証についてご紹介したいと思います。

キャプチャ認証とは

キャプチャ認証は、画像に記されている文字を読み取ることができるかどうかで人間による入力かを判断しています。機械では、歪んでいたり一部が隠された無作為な文字列を自動的に読み取ることが難しい為、ボットによるスパムメールの送信を防ぐのに用いられます(図01)。

01 キャプチャ認証 イメージ

01 キャプチャ認証 イメージ

キャプチャ認証実装例

WordPressやMovableTypeにもプラグインがありますが、今回はCMSを使用せず、カスタマイズしやすいPHPプラグイン「Securimage(http://www.phpcaptcha.org/)」をご紹介します。

まず、サイトよりダウンロードしたプラグインにあるsecurimageというファイルを任意のディレクトリに配置します。次に、キャプチャ認証を設置したいPHPファイルに(図02)のタグを記述。これでキャプチャ認証の画像が出力されます。

02 キャプチャ認証表示タグ

02 キャプチャ認証表示タグ

次にカスタマイズについてですが、securimageディレクトリの中にある、securimage_show.phpを開きます。

基本的には(図03)の、変更したい項目のコメントアウトを解除し、値を変えるだけです。

例えば、$img->perturbation = 0.9; は歪み度数を指定しており、数値が高い程文字が歪んで表示さます。

$img->text_color は文字の色、$img->num_lines は画像に表示する線の本数、$img->show('背景画像のパス') で背景画像を設定、というような指定できます。

また、securimage_show_example.phpというファイルには具体的なカスタマイズの例が記述されています。

03 カスタマイズするコード

03 カスタマイズするコード

カスタマイズの設定が完了したら、認証チェックの設定をします。

認証方法は、テキストボックスより入力された値とプラグインで保持されたSESSIONの値を比較をします。

SESSIONを使用する為、キャプチャ認証の画像を出力する前に <?php session_start(); ?> を記述しておく必要があります。

図04)のように送られた値とSESSIONの値を比較し、一致すれば「OK」、一致しなければ「NG」が出力されれば、最低限のキャプチャ認証の設置が完了です。

04 キャプチャ認証のバリデートサンプルコード

04 キャプチャ認証のバリデートサンプルコード

その他のキャプチャ認証

今回ご紹介したSecurimage以外にも様々な種類のキャプチャ認証があり、最近ではパズル型のキャプチャ認証も登場しました(図05)。

このパズル型キャプチャ認証「Capy CAPTCHA」(http://www.capy.me/)は、空いている箇所にピースをはめるというものですが、スマホやタブレットにも対応しており、ピースをスワイプして認証を行えます。読みにくい文字を入力するより簡単で、遊び心もあります。(カスタマイズのオプションは有料)

05 その他のキャプチャ認証

05 その他のキャプチャ認証

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム