July 19, 2009
Captcha導入
categorized in 
長い間放置しておいたTypeKeyをなんとかしようと思い立ったんだけど、やっぱなんかよくわからんので、いろんなフォームで見かけるぐにゃっと曲がった文字列を入力することで認証するシステムを導入しようとがんばってみた。
MT4ならデフォルトでCaptchaが使えるらしいんだけど、このblogは3.33だし、バージョンUPもめんどくさいので、プラグインがないかなと、とりあえず調べてみたら以下が参考になった。
Movable Type 3.33-ja に Captcha プラグインを導入 / Bowz::Notebook
http://bowz.info/815
Cpatcha Pluginをレンタルサーバーで使ってみる / hide-k.net#blog
http://blog.hide-k.net/archives/2006/07/cpatcha_plugin.php
Authen::Captcha をインストールして Captcha Plugin を利用する（CPAN による perl モジュールのインストール） / 小粋空間
http://www.koikikukan.com/archives/2006/06/14-015017.php
MT復旧 - Captcha導入編(part5,最終回) / nni's blog
http://www.nnistar.com/archives/200707020315.php
http://bowz.info/815
Cpatcha Pluginをレンタルサーバーで使ってみる / hide-k.net#blog
http://blog.hide-k.net/archives/2006/07/cpatcha_plugin.php
Authen::Captcha をインストールして Captcha Plugin を利用する（CPAN による perl モジュールのインストール） / 小粋空間
http://www.koikikukan.com/archives/2006/06/14-015017.php
MT復旧 - Captcha導入編(part5,最終回) / nni's blog
http://www.nnistar.com/archives/200707020315.php
まずはGDとDigest::MD5というPerlのモジュールがインストールされているかどうかが大きな分かれ目らしいので、その確認から始めた。
んでそのためにまずはXREAのサーバにtelnet接続しないといかん。
XREA/Perlモジュールの確認 / Walrus,Digit.
http://digit.que.ne.jp/work/wiki.cgi?XREA%2fPerl%e3%83%a2%e3%82%b8%e3%83%a5%e3%83%bc%e3%83%ab%e3%81%ae%e7%a2%ba%e8%aa%8d
http://digit.que.ne.jp/work/wiki.cgi?XREA%2fPerl%e3%83%a2%e3%82%b8%e3%83%a5%e3%83%bc%e3%83%ab%e3%81%ae%e7%a2%ba%e8%aa%8d
でもtelnetできずSSHならできることを発見しいきなりなえたけど、配布されてたcgiみたいなものの設置もちょっと大変そうだったので、がんばってやってみた。
レンタルサーバー(XREA)はTelnet接続できない？ / OK web
http://okwave.jp/qa1704054.html
http://okwave.jp/qa1704054.html
XREAの管理画面にある「ホスト情報登録」でSSH接続許可ホストとして登録。んで、SSHクライアントの「TeraTerm」でアクセス(プレインテキストを使うを選択)し、次のコマンドを実行。
/usr/bin/find `/usr/local/bin/perl -e 'print join(" ", @INC)'` -type f -name "*.pm" > mod.txt
とすると、hostの一番上の階層に「mod.txt」が作成されたのでFTPでDLして確認。どうやらGDとDigest::MD5はインストールされている模様。
…
/usr/local/lib/perl5/site_perl/5.8.8/i686-linux/GD.pm
/usr/local/lib/perl5/site_perl/5.8.8/MD5.pm
…
/usr/local/lib/perl5/site_perl/5.8.8/i686-linux/GD.pm
/usr/local/lib/perl5/site_perl/5.8.8/MD5.pm
…
で、ようやくCaptchaプラグインの導入と思いきや、ここまでの確認はCaptchaプラグインが利用するPerlモジュールの「Authen::Captcha」をどうやってインストールするかの確認。GDとDigest::MD5があるので、telnetでのインストールではなく、FFFTPでインストールできるってこと。
モジュール「Authen::Captcha」を以下よりDL。
ローカルで解凍してmt/extlib/AuthenにCaptcha.pmとCaptchaディレクトリをアップロード。
で、今度こそCaptchaプラグインをインストール
まずは以下よりDL
Captcha_Plugin / ogawa
http://code.google.com/p/ogawa/wiki/Captcha_Plugin
http://code.google.com/p/ogawa/wiki/Captcha_Plugin
解凍してmt/pluginsにcaptchaフォルダをアップロード。但し、captcha_js.cgiとcaptcha.plの「use Authen::Captcha;」の直前に以下の1行を追加。
use lib 'virtual/riemagu/public_html/mt/extlib';
パーミッションは、captcha_js.cgiとimageフォルダ、dataフォルダを755に設定。
GoodBye コメントスパム プラグイン for Movable Type / skuare.net
http://www.skuare.net/2007/06/goodbye_for_movable_type.html
http://www.skuare.net/2007/06/goodbye_for_movable_type.html
そしていよいよMTの管理画面からCaptchaプラグインの設定。「設定」→「プラグイン」にCaptchaが表示されているのでどうやらモジュールとプラグインのインストールはうまくいった模様。
Movable Typeのスパム対策（コメント編・その2） / サラリーマン白書
http://weblog.2-d.jp/movable_type/customize/000019.php
http://weblog.2-d.jp/movable_type/customize/000019.php
Captchaプラグインの設定画面で、"Enable Captcha"にチェックを入れ、"Images URL"と"Images PATH"が正しいことを確認。
Templateをデザイン上、以下のように変更
---------------------------
<div id="comment-captcha-block">
<input type="hidden" name="captcha_md5" value="[captcha_md5]" />
<label for="comment-captcha">CAPTCHA™ Code:</label>
<img src="[captcha_img]" width="[captcha_img_width]" height="[captcha_img_height]" alt="CAPTCHA Image" />
<input type="text" id="comment-captcha" name="captcha_code" value="" length="[captcha_length]" maxlength="[captcha_length]" />
</div>
---------------------------
↓
---------------------------
<div id="comment-captcha-block">
<input type="hidden" name="captcha_md5" value="[captcha_md5]" />
<label for="comment-captcha">スパム対策認証</label><br />
<img src="[captcha_img]" width="[captcha_img_width]" height="[captcha_img_height]" alt="CAPTCHA Image" /> :CAPTCHA™ Code<br /><br />
上の文字列↑を下のテキストボックス↓に入力してくださいm(_ _)m<br />
<input type="text" id="comment-captcha" name="captcha_code" value="" length="[captcha_length]" maxlength="[captcha_length]" />
</div>
---------------------------
<div id="comment-captcha-block">
<input type="hidden" name="captcha_md5" value="[captcha_md5]" />
<label for="comment-captcha">CAPTCHA™ Code:</label>
<img src="[captcha_img]" width="[captcha_img_width]" height="[captcha_img_height]" alt="CAPTCHA Image" />
<input type="text" id="comment-captcha" name="captcha_code" value="" length="[captcha_length]" maxlength="[captcha_length]" />
</div>
---------------------------
↓
---------------------------
<div id="comment-captcha-block">
<input type="hidden" name="captcha_md5" value="[captcha_md5]" />
<label for="comment-captcha">スパム対策認証</label><br />
<img src="[captcha_img]" width="[captcha_img_width]" height="[captcha_img_height]" alt="CAPTCHA Image" /> :CAPTCHA™ Code<br /><br />
上の文字列↑を下のテキストボックス↓に入力してくださいm(_ _)m<br />
<input type="text" id="comment-captcha" name="captcha_code" value="" length="[captcha_length]" maxlength="[captcha_length]" />
</div>
---------------------------
「変更を保存」でプラグインの設定完了。
続いて、コメント投稿フォームがあるテンプレート全てで、<form>〜</form>内でcaptchaを表示したい箇所へ、以下を追加。
<script type="text/javascript" src="<$MTCaptchaJsURL$>">
【テンプレート】エントリー・アーカイブ
「確認」の場合はCaptchaは関係ないので、表示する位置関係やテキストなどを以下のように微修正。
---------------------------
<input type="submit" name="preview" value=" 確認 " />
<input style="font-weight: bold;" type="submit" name="post" value=" 投稿 " /><br />
<font size="1">※コメントは管理者の承認後に公開されますので、<br /> 投稿後しばらくおまちくださいm(_ _)m</font><br />
---------------------------
↓
---------------------------
<input type="submit" name="preview" value=" 確認 " /><br />
※確認する場合は下記のスパム対策認証は入力しなくても大丈夫です。<br /><br />
<script type="text/javascript" src="<$MTCaptchaJsURL$>"></script><br />
<input style="font-weight: bold;" type="submit" name="post" value=" 投稿 " /><br />
<br />
---------------------------
<input type="submit" name="preview" value=" 確認 " />
<input style="font-weight: bold;" type="submit" name="post" value=" 投稿 " /><br />
<font size="1">※コメントは管理者の承認後に公開されますので、<br /> 投稿後しばらくおまちくださいm(_ _)m</font><br />
---------------------------
↓
---------------------------
<input type="submit" name="preview" value=" 確認 " /><br />
※確認する場合は下記のスパム対策認証は入力しなくても大丈夫です。<br /><br />
<script type="text/javascript" src="<$MTCaptchaJsURL$>"></script><br />
<input style="font-weight: bold;" type="submit" name="post" value=" 投稿 " /><br />
<br />
---------------------------
全エントリーの再構築。
しかし、うまく表示されない(T_T)
これはかなり深みにはまるかも〜と思いながらググって見たら、スバラシイ記事発見。
Captcha Plugin / ESCAPE WHILE YOU CAN
http://www.j-love.info/ino/archives/20070114_captcha_plugin.html
http://www.j-love.info/ino/archives/20070114_captcha_plugin.html
どうやらあきらめたTypeKeyが原因だったみたい(怒、但逆恨み)。
captcha_js.cgiのTypeKey対応部分を削除。
---------------------------
print $q->header('text/javascript');
print "if (!commenter_name) {\n";
print "\tdocument.writeln('$_');\n" foreach split(/\r?\n/, $tmpl);
print "}\n";
---------------------------
↓
---------------------------
print $q->header('text/javascript');
print "\tdocument.writeln('$_');\n" foreach split(/\r?\n/, $tmpl);
---------------------------
print $q->header('text/javascript');
print "if (!commenter_name) {\n";
print "\tdocument.writeln('$_');\n" foreach split(/\r?\n/, $tmpl);
print "}\n";
---------------------------
↓
---------------------------
print $q->header('text/javascript');
print "\tdocument.writeln('$_');\n" foreach split(/\r?\n/, $tmpl);
---------------------------
再度全エントリーの再構築を行い無事表示された。
【テンプレート】コメント・プレビュー
エントリーのテンプレートと同じように修正。
---------------------------
<input type="submit" name="preview" value=" 確認 " /> <input style="font-weight: bold;" type="submit" name="post" value=" 投稿 " /><br />
<font size="1">※TypeKey認証サービスを利用している方で、このblogに登録されたコメント登録者以外からのコメントは、管理者の手動による承認後に公開されますので、投稿後しばらくおまちくださいm(_ _)m</font><br /><br />
<br />
---------------------------
↓
---------------------------
<input type="submit" name="preview" value=" 確認 " /><br />
※確認する場合は下記のスパム対策認証は入力しなくても大丈夫です。<br /><br />
<script type="text/javascript" src="<$MTCaptchaJsURL$>"></script><br />
<input style="font-weight: bold;" type="submit" name="post" value=" 投稿 " /><br />
<br />
---------------------------
<input type="submit" name="preview" value=" 確認 " /> <input style="font-weight: bold;" type="submit" name="post" value=" 投稿 " /><br />
<font size="1">※TypeKey認証サービスを利用している方で、このblogに登録されたコメント登録者以外からのコメントは、管理者の手動による承認後に公開されますので、投稿後しばらくおまちくださいm(_ _)m</font><br /><br />
<br />
---------------------------
↓
---------------------------
<input type="submit" name="preview" value=" 確認 " /><br />
※確認する場合は下記のスパム対策認証は入力しなくても大丈夫です。<br /><br />
<script type="text/javascript" src="<$MTCaptchaJsURL$>"></script><br />
<input style="font-weight: bold;" type="submit" name="post" value=" 投稿 " /><br />
<br />
---------------------------
【テンプレート】コメント・エラー修正
プレビューのテンプレートを大幅に流用し、かなり修正。
---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="<$MTProductName version="1"$>" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<title><$MTBlogName encode_html="1"$>: コメントの登録エラー</title>
</head>
<body class="layout-one-column comment-error">
<div id="container">
<div id="container-inner" class="pkg">
<div id="banner">
<div id="banner-inner" class="pkg">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
</div>
<div id="pagebody">
<div id="pagebody-inner" class="pkg">
<div id="alpha">
<div id="alpha-inner" class="pkg">
<h3>コメントの登録エラー</h3>
<p>次のエラーでコメントを投稿できませんでした: </p>
<blockquote><strong><$MTErrorMessage$></strong></blockquote>
<p><a href="<MTEntryLink>">エントリーのページに戻る</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
---------------------------
↓
---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="<$MTProductName version="1"$>" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<title><$MTBlogName encode_html="1"$>: コメントの投稿エラー</title>
</head>
<body>
<div id="banner-commentspop">
<$MTBlogName$>
</div>
<div class="blog">
<div class="comments-head">コメントの投稿エラー</div>
<div class="comments-body">
次のエラーでコメントを投稿できませんでした:
<blockquote><strong><$MTErrorMessage$><br>
もじくはスパム対策認証のcaptchaコードが違いますので、再度確認して入力してください。</strong></blockquote> </div>
<div class="comments-body">
<MTEntryIfCommentsOpen>
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>"> <input type="hidden" name="entry_id"
value="<$MTEntryID$>" /> <input type="hidden" name="static"
value="<$MTCommentPreviewIsStatic$>" />
<label for="author">名前:</label><br />
<input id="author" name="author" value="<$MTCommentPreviewAuthor encode_html="1"$>" /><br /><br />
<label for="email">メールアドレス</label><br />
<input id="email" name="email" value="<$MTCommentPreviewEmail encode_html="1"$>" /><br />
<font size="1">※必須項目です。公開されることはありませんのでご安心ください。</font><br /><br />
<label for="url">URL:</label><br />
<input id="url" name="url" value="<$MTCommentPreviewURL encode_html="1"$>" /><br /><br />
<label for="text">コメント:</label><br />
<textarea id="text" name="text" rows="10" cols="50"><$MTCommentPreviewBody convert_breaks="0" encode_html="1"$></textarea><br /><br />
<input type="submit" name="preview" value=" 確認 " /><br />
※確認する場合は下記のスパム対策認証は入力しなくても大丈夫です。<br /><br />
<script type="text/javascript" src="<$MTCaptchaJsURL$>"></script><br />
<input style="font-weight: bold;" type="submit" name="post" value=" 投稿 " /><br /> <br />
</form>
</MTEntryIfCommentsOpen>
</div>
<div class="comments-head">以前のコメント</div>
<MTComments>
<div class="comments-body">
<$MTCommentBody$>
<span class="comments-post">投稿者 <$MTCommentAuthorLink spam_protect="1"$> : <$MTCommentDate$></span>
</div>
</MTComments>
</div>
</body>
</html>
---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="<$MTProductName version="1"$>" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<title><$MTBlogName encode_html="1"$>: コメントの登録エラー</title>
</head>
<body class="layout-one-column comment-error">
<div id="container">
<div id="container-inner" class="pkg">
<div id="banner">
<div id="banner-inner" class="pkg">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
</div>
<div id="pagebody">
<div id="pagebody-inner" class="pkg">
<div id="alpha">
<div id="alpha-inner" class="pkg">
<h3>コメントの登録エラー</h3>
<p>次のエラーでコメントを投稿できませんでした: </p>
<blockquote><strong><$MTErrorMessage$></strong></blockquote>
<p><a href="<MTEntryLink>">エントリーのページに戻る</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
---------------------------
↓
---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="<$MTProductName version="1"$>" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<title><$MTBlogName encode_html="1"$>: コメントの投稿エラー</title>
</head>
<body>
<div id="banner-commentspop">
<$MTBlogName$>
</div>
<div class="blog">
<div class="comments-head">コメントの投稿エラー</div>
<div class="comments-body">
次のエラーでコメントを投稿できませんでした:
<blockquote><strong><$MTErrorMessage$><br>
もじくはスパム対策認証のcaptchaコードが違いますので、再度確認して入力してください。</strong></blockquote> </div>
<div class="comments-body">
<MTEntryIfCommentsOpen>
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>"> <input type="hidden" name="entry_id"
value="<$MTEntryID$>" /> <input type="hidden" name="static"
value="<$MTCommentPreviewIsStatic$>" />
<label for="author">名前:</label><br />
<input id="author" name="author" value="<$MTCommentPreviewAuthor encode_html="1"$>" /><br /><br />
<label for="email">メールアドレス</label><br />
<input id="email" name="email" value="<$MTCommentPreviewEmail encode_html="1"$>" /><br />
<font size="1">※必須項目です。公開されることはありませんのでご安心ください。</font><br /><br />
<label for="url">URL:</label><br />
<input id="url" name="url" value="<$MTCommentPreviewURL encode_html="1"$>" /><br /><br />
<label for="text">コメント:</label><br />
<textarea id="text" name="text" rows="10" cols="50"><$MTCommentPreviewBody convert_breaks="0" encode_html="1"$></textarea><br /><br />
<input type="submit" name="preview" value=" 確認 " /><br />
※確認する場合は下記のスパム対策認証は入力しなくても大丈夫です。<br /><br />
<script type="text/javascript" src="<$MTCaptchaJsURL$>"></script><br />
<input style="font-weight: bold;" type="submit" name="post" value=" 投稿 " /><br /> <br />
</form>
</MTEntryIfCommentsOpen>
</div>
<div class="comments-head">以前のコメント</div>
<MTComments>
<div class="comments-body">
<$MTCommentBody$>
<span class="comments-post">投稿者 <$MTCommentAuthorLink spam_protect="1"$> : <$MTCommentDate$></span>
</div>
</MTComments>
</div>
</body>
</html>
---------------------------
【テンプレート】コメント・保留修正
にっくきTypeKeyを見越して作っておいたテンプレートを、すがすがしく修正♪
---------------------------
コメントいただきありがとうございました♪全てのコメントは管理者の承認後に公開されますので、しばらくお待ちくださいm(_ _)m<br>
---------------------------
↓
---------------------------
コメントいただきありがとうございました♪<br />
このコメントは管理者の承認後に公開されますので、しばらくお待ちくださいm(_ _)m<br />
---------------------------
コメントいただきありがとうございました♪全てのコメントは管理者の承認後に公開されますので、しばらくお待ちくださいm(_ _)m<br>
---------------------------
↓
---------------------------
コメントいただきありがとうございました♪<br />
このコメントは管理者の承認後に公開されますので、しばらくお待ちくださいm(_ _)m<br />
---------------------------
最後に、blogの「設定」-「コメント・トラックバック」で、投稿を受け付ける条件：すべて、認証サービスの設定：削除！、即時に公開するコメント：すべて としてCaptchaを通過したら即公開というちょっとたよりすぎかもしれない設定に。
あーすっきり！！！
これでスパムがこなけりゃカンペキだけどなぁ〜
この記事にいただいたコメント →コメントはこちらからどうぞ
この記事にいただいたトラックバック →この記事のトラックバックURLはこちら
この記事のトラックバックURL:
http://riemagu.jp/mt/mt-tb.cgi/2538
http://riemagu.jp/mt/mt-tb.cgi/2538