Movable Type 備忘録

 AjaxによるCAPTCHA認証をやってみる

  • Dec102006
  • Vote:
    http://bizcaz.com/archives/2006/12/10-083804.php
  • Categories: Customize
  • Tags:
  • Social Bookmark

以前、コメント・スパム対策にセキュリティコード設置ではプラグインを使った、CAPTCHA認証によるコメント・スパム対策をご紹介しました。

CAPTCHA認証といったら、グニャグニャした英数字が一般的かと思いますが、どうもわたしあれが嫌いで、実際には読みづらいものが多かったりします。
そのせいか、エラーしちゃったりすると、途中で投稿をやめるなんてことが多々ありました。

中にはわたしと同じ気持ちの人もいるだろう･･･と思って、わたしのサイトではCAPTCHA認証を取り外してたんです。
それに、想像ですけど、わたしのサイトではコメントフォーム自体を外部ファイルにしてAjaxによる読み込みを行ってるせいか、コメント・スパムって最近お目にかかってなかったので。

今回はAjaxの勉強がてら、こちらのHow to Create CAPTCHA Protection using PHP and AJAXを参考に、Ajaxを使ったCAPTCHA認証をやってみました。

ホントなら、誰にでもできるような説明した方がいいのですが、カスタマイズのポイントを掻い摘んでご説明します。

- 2006.12.11 追記 -

その後、JSでフォームに入力されたデータを取得して、POSTする方法を調べたのですが、POSTによるデータ送信って結構ムズいんですね。

カンタンにここで説明というかんじではなかったので、わたしが実際に使っている方法、CAPTCHA認証後、mt-comments.cgiへのデータ受け渡しをAjaxで行う方法を追記しました。

まずはサンプルですね。
わたしのサイトのコメント・フォームをご覧ください。

CAPTCHA認証として'0'～'9'、'a'～'z'の1文字だけのイメージファイルを動的に生成して、Ajaxで表示しています。

1文字くらいの、しかもシンプルな文字入力なら煩わしくないかな…と思って1文字認証にしました（￣∇￣）

ホントは「いろはにほへと」などの平仮名1文字のCAPTCHA認証にしたかったんですけど、まだまだわたしにはそれはムズかしかったです。

ここで紹介するCAPTCHA認証はPHPスクリプトを使用しますので、ブログのPHP化が必須となります。
ブログのPHP化はこちらのMovableTypeをPHP化するでご紹介しています。

▼prototype.js(Version1.4.0)の入手はこちらから▼
http://prototype.conio.net/
▼ajaxcomment.jsの入手はこちらから▼
http://bizcaz.com/archives/shoco/ajax/ajaxcomments.js
▼ajaxcaptcha.jsの入手はこちらから▼
http://bizcaz.com/archives/shoco/ajax/ajaxcaptcha.js

AjaxによるCAPTCHA認証の動作について

Ajax でキャプチャ認証 まず、AjaxによるCAPTCHA認証の動作について説明しますね。

こちらのHow to Create CAPTCHA Protection using PHP and AJAXからオリジナル・コード(ajax_captcha.zip)をダウンロードして、適当なフォルダ(たとえば、ajaxcaptchaという名前で新規作成)に展開して、そのフォルダごと、サーバにアップロードします。
アップロード先はどこでも構いません。

アップロードしたcaptcha_test.htmをブラウザから表示してみてください。
そうすると、カンタンな認証ページが表示されますね。

オリジナルのCAPTCHA認証イメージには、5文字のランダムな英数字が動的に生成されて表示しています。

CAPTCHA認証のイメージはPHP(create_image.php)で作成されています。
作成された認証コードは一時的に保存されて、認証チェック時(captcha.php)に使用されます。

ボタンクリックにより、Ajax(ajax_captcha.js)で認証コードを送信して、認証チェック(captcha.php)を行います。

OKなら正常時のメッセージ(Test successful!)を返します。
NGなら異常メッセージ(Test failed! Try again!)を返して、受信した(ajax_captcha.js)メッセージをページに反映(<div id="result"></div>に表示)しているようです。

ざっくりですが動作について説明してみました。

CAPTCHA認証イメージ表示

まず、各自のテンプレート内にCAPTCHA認証イメージを表示させてみます。
変更するテンプレートはエントリ・アーカイブが対象となります。

上記URLから3つのJSをダウンロードします。
ajaxcomments.jsとajaxcaptcha.jsはわたしが使ってるものです。

CAPTCHA認証イメージ表示するために、コメント・フォームを変更します。
以下に抜粋したコメント・フォームを記します。

  1. <form id="comments_form" name="comments_form">
  2.                   ：
  3.                   ：
  4.                   ：
  5.     <p>
  6.     <label for="comment-url">URL:</label>
  7.     <input id="comment-url" name="url" size="30" value="" />
  8.     </p>
  9.  
  10.     <p>
  11.     <label for="comment-url">SECURE CODE: <img id="imgCaptcha" src="<$MTBlogURL$>create_image.php" /></label>
  12.     <input id="comment-captcha" name="txtCaptcha" size="30" value="" />
  13.     </p>
  14.                   ：
  15.                   ：
  16.                   ：

青い字の部分がCAPTCHA認証用に追加したところになります。
赤い字の部分はCAPTCHA認証イメージを生成／表示するところです。

各自の環境に合わせてURLを変更します。

変更したら保存します。
コメント・プレビューを表示してみて、CAPTCHA認証イメージが正しく表示されることを確認します。

ページの再表示などすると、その都度認証コードが代わるはずなので確認してください。

CAPTCHA認証イメージの変更は、create_image.php内で行えます。
以下にカンタンな説明を記します。

  1. function create_image()
  2. {
  3.     // ランダムな英数字を取得しています
  4.     $md5_hash = md5(rand(0,999));
  5.     // 32文字中の15番目の文字から5文字分を認証コードとしています
  6.     $security_code = substr($md5_hash, 15, 5);
  7.                    ：
  8.                    ：
  9.                    ：
  10.     // CAPTCHA認証イメージのサイズです
  11.     $width = 100;
  12.     $height = 20;
  13.                    ：
  14.                    ：
  15.                    ：
  16.     // CAPTCHA認証イメージの前景色／背景色を設定します
  17.     $white = ImageColorAllocate($image, 255, 255, 255);
  18.     $black = ImageColorAllocate($image, 0, 0, 0);
  19.     $grey = ImageColorAllocate($image, 204, 204, 204);
  20.  
  21.     // 背景を黒で塗りつぶしています
  22.     ImageFill($image, 0, 0, $black);
  23.  
  24.     // 認証コードを描画しています
  25.     // ImageString(画像ID, 文字サイズ, X座標, y座標, 文字列,文字色);です
  26.     ImageString($image, 3, 30, 3, $security_code, $white);
  27.  
  28.     // 外枠、ボーダーラインを描画しています
  29.     ImageRectangle($image,0,0,$width-1,$height-1,$grey);
  30.     imageline($image, 0, $height/2, $width, $height/2, $grey);
  31.     imageline($image, $width/2, 0, $width/2, $height, $grey);
  32.                    ：
  33.                    ：
  34.                    ：
  35. }
  36. ?>

コード認証チェック

次に、実際に入力したコードの認証チェック部を追加します。
先ほど変更したコメント・フォームを、さらに以下のように変更します。

  1. <div id="comment_posted"></div>
  2. <img id="progress" style="display:none;" src="http://●●●.com/image/ajax-loader.gif" alt="Loading..." />
  3.  
  4. <MTIgnore>
  5. <form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form">
  6. </MTIgnore>
  7. <form id="comments_form" name="comments_form">
  8.                   ：
  9.                   ：
  10.                   ：
  11.     <p id="comments-open-footer" class="comments-open-footer">
  12.     <input type="submit" accesskey="v" name="preview" id="comment-preview" value="Preview" onclick="return ajax_comment_preview('comment_posted','progress');" />
  13. <MTIgnore>
  14.     <input type="submit" accesskey="s" name="post" id="comment-post" value="Post" />
  15. </MTIgnore>
  16.     <input type="button" accesskey="s" name="post" id="comment-post" value="Post" onclick="ajax_captcha(document.comments_form,'comment_posted','progress');" />
  17.     </p>
  18. </form>

青い字の部分を追加します。ここに認証結果が表示されます。
赤い字の部分をコメントにして、緑の字のように変更します。
ピンクの字の部分で、投稿ボタンクリックによりajaxcaptcha.js内で定義されている関数を実行するようになっています。

テンプレート内の<head>～</head>の間に以下を追加します。

  1. <script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
  2. <script type="text/javascript" src="<$MTBlogURL$>ajaxcomments.js"></script>
  3. <script type="text/javascript" src="<$MTBlogURL$>ajaxcaptcha.js"></script>

青い字の部分を各自の環境に合わせて変更します。
一通り変更したら保存します。

次に、ajaxcaptcha.jsを変更します。
変更する内容は以下の通りです。

  1. var outputDivId = 'captcha_posted'
  2. var outputProgress = 'progress'
  3.  
  4. // 認証リクエスト処理
  5. function ajax_captcha(formId, divId, divProgress)
  6. {
  7.     outputDivId = divId;
  8.     outputProgress = divProgress;
  9.  
  10.     // Ajaxローダーを表示します
  11.     document.getElementById(outputProgress).style.display = '';
  12.     // capcha.phpを実行して、認証チェックを行います
  13.     var url = 'http://●●●.com/ajaxcaptcha/captcha.php';
  14.     var pars = formId.txtCaptcha.name + "=" + encodeURIComponent(formId.txtCaptcha.value);
  15.     var myAjax = new Ajax.Request(url, {
  16.                                         method: 'post',
  17.                                         parameters: pars,
  18.                                         onComplete: ajax_captcha_complete
  19.                                         });
  20.     return false;
  21. }

青い字の部分を各自の環境に合わせて変更します。
ここでは、<input id="txtCaptcha">タグに入力された認証コードを取得して、Ajaxによる非同期通信でcaptcha.phpへ認証チェックをリクエストしています。

以下は受信時の変更になります。

  1. // リクエスト結果処理
  2. function ajax_captcha_complete(RequestText)
  3. {
  4.     // Ajaxローダーを非表示します
  5.     document.getElementById(outputProgress).style.display = 'none';
  6.     // 認証結果を表示します
  7.     document.getElementById(outputDivId).innerHTML = RequestText.responseText;
  8.  
  9.     if ( RequestText.responseText == "OK" )
  10.     {
  11.         // 認証チェックOKの場合の処理
  12. // ajax_comment_post(outputDivId, outputProgress);
  13.     }
  14.     else
  15.     {
  16.         // 認証チェックNGの場合の処理
  17.  
  18.         // ここに認証エラーの場合に表示するメッセージを記述します
  19. // document.getElementById(outputDivId).innerHTML = 'セキュリティ・コードが不正です。正しいコードを入力してください。';
  20.  
  21.         // 認証エラーしたので、新しいCAPTCHA認証イメージを作成／表示します
  22.         img = document.getElementById('imgCaptcha');
  23.         img.src = 'http://●●●.com/ajaxcaptcha/create_image.php?' + Math.random();
  24.     }
  25. }

青い字の部分を各自の環境に合わせて変更します。
緑の字の部分で認証結果を表示しています。

認証エラーの場合には、赤い字の部分で新しいCAPTCHA認証イメージの生成／表示を行います。
一通り変更したら保存して、サーバにアップロードしてください。

次に、captcha.phpを変更します。
変更内容は以下の通りです。

  1. if ( ($_REQUEST["txtCaptcha"] == $_SESSION["security_code"]) &&
  2.     (!empty($_REQUEST["txtCaptcha"]) && !empty($_SESSION["security_code"])) ) {
  3.  
  4.     // 認証OKの場合
  5. echo "OK";
  6. } else {
  7.     // 認証NGの場合
  8. echo "NG";
  9. }

青い字の部分では認証OKの場合に、"OK"という文字列を返すよう変更しています。
赤い字の部分では認証NGの場合に、"NG"という文字列を返すよう変更します。

変更したら保存してサーバにアップロードします。

アップロード後、コメント・プレビューを表示して、認証コードを入力して認証チェックを行ってみてください。
認証OKであれば、OKと表示され、認証NGであればNGという表示がされます。

MovableTypeのmt-comment.cgiとの連動

最後に、CAPTCHA認証チェック後のMovableType(ムーバブルタイプ)のコメント投稿スクリプトmt-comment.cgiと連動させます。

先ほどのajaxcaptcha.jsを以下のように変更します。

  1. // リクエスト結果処理
  2. function ajax_captcha_complete(RequestText)
  3. {
  4.     // Ajaxローダーを非表示します
  5.     document.getElementById(outputProgress).style.display = 'none';
  6.     // 認証結果を表示します
  7.     document.getElementById(outputDivId).innerHTML = RequestText.responseText;
  8.  
  9.     if ( RequestText.responseText == "OK" )
  10.     {
  11.         // 認証チェックOKの場合の処理
  12.         ajax_comment_post(outputDivId, outputProgress);
  13.     }
  14.     else
  15.     {
  16.         // 認証チェックNGの場合の処理
  17.  
  18.         // ここに認証エラーの場合に表示するメッセージを記述します
  19.         document.getElementById(outputDivId).innerHTML = 'セキュリティ・コードが不正です。正しいコードを入力してください。';
  20.  
  21.         // 認証エラーしたので、新しいCAPTCHA認証イメージを作成／表示します
  22.         img = document.getElementById('imgCaptcha');
  23.         img.src = 'http://●●●.com/ajaxcaptcha/create_image.php?' + Math.random();
  24.     }
  25. }

青い字の部分がコメントにされてたのですが、それを上記のようにコメントを外します。
これにより認証OKだった場合、フォームに入力された各データを取り出して、Ajaxによってmt-comments.cgiを実行するということをやります。
赤い字の部分は不要なので削除しちゃいます。

以下にajaxcomments.jsを記します。

  1. var outputDivId = 'comment_posted'
  2. var outputProgress = 'progress'
  3.  
  4. // コメント投稿処理
  5. function ajax_comment_post(divId, divProgress)
  6. {
  7.     outputDivId = divId;
  8.     outputProgress = divProgress;
  9.  
  10.     // Ajaxローダーを表示します
  11.     document.getElementById(outputProgress).style.display = '';
  12.     // mt-comments.cgiにコメント投稿をリクエストします
  13.     var url = 'http://●●●.com/mt/mt-comments.cgi';
  14.     var pars = Form.serialize('comments_form')+'&post=post';
  15.     var myAjax = new Ajax.Updater(outputDivId, url, {
  16.                                                     method: 'post',
  17.                                                     parameters: pars,
  18.                                                     onComplete: ajax_comment_complete
  19.                                                     });
  20.     return false;
  21. }
  22.  
  23. // コメントプレビュー処理
  24. function ajax_comment_preview(divId, divProgress)
  25. {
  26.     outputDivId = divId;
  27.     outputProgress = divProgress;
  28.  
  29.     // Ajaxローダーを表示します
  30.     document.getElementById(outputProgress).style.display = '';
  31.     // mt-comments.cgiにコメントプレビューをリクエストします
  32.     var url = 'http://●●●.com/mt/mt-comments.cgi';
  33.     var pars = Form.serialize('comments_form')+'&preview=preview';
  34.     var myAjax = new Ajax.Updater(outputDivId, url, {
  35.                                                     method: 'post',
  36.                                                     parameters: pars,
  37.                                                     onComplete: ajax_comment_complete
  38.                                                     });
  39.     return false;
  40. }
  41.  
  42. // リクエスト結果受信処理
  43. function ajax_comment_complete()
  44. {
  45.     // Ajaxローダーを非表示します
  46.     document.getElementById(outputProgress).style.display = 'none';
  47. }

青い字の部分を各自の環境に合わせて変更します。
ここでは、入力されたコメント内容を取得して、Ajaxによるmt-comment.cgiを実行して、その結果が表示されるようなことをやっています。
一通り変更したら保存して、サーバにアップロードします。

最後に、コメント・プレビュー、コメント・エラーとコメント保留のテンプレートを変更します。
わたしが使っている各テンプレートの内容を以下に記します。

各自のサイトのイメージなどに合わせて変更してください。
基本的には、メッセージ表示するためだけの内容を記述するだけです。

  1. コメント・プレビュー用メッセージ
  2.  
  3. <MTIfCommentsActive>
  4.     <div id="comments" class="comments">
  5.         <div class="comments-header">YOUR COMMENT</div>
  6.         <!-- ▼コメント確認▼ -->
  7.         <div id="preview">
  8.             <!-- コメント本文 -->
  9.             <div class="comments-content">
  10.                 <!-- ▼コメント本文▼ -->
  11.                 <dl class="comments-content">
  12.                 <dt>&raquo; <$MTCommentPreviewAuthorLink default_name="Anonymous" spam_protect="1"$> さん</dt>
  13.                 <dd><$MTCommentPreviewBody$></dd>
  14.                 <dd class="comment-footer"><$MTCommentPreviewDate language="en" format="%B %e, %Y"$></dd>
  15.                 </dl>
  16.                 <!-- ▲コメント本文▲ -->
  17.             </div>
  18.         </div><!-- preview -->
  19.         <!-- ▲コメント確認▲ -->
  20.     </div><!-- comments -->
  21. </MTIfCommentsActive>
  1. コメント・エラー用メッセージ
  2.  
  3. <div class="comments">
  4.     <div class="comments-header">COMMENT SUBMISSION ERROR</div>
  5.     <div class="comment-content">
  6.         <p>YOUR COMMENT SUBMISSION FAILED FOR THE FOLLOWING REASONS:</p>
  7.         <fieldset><p><$MTErrorMessage$></p></fieldset>
  8.     </div><!-- /comment-content -->
  9. </div><!-- comments -->
  1. コメント・保留用ペッセージ
  2.  
  3. <div class="comments">
  4.     <div class="comments-header">THANK YOU FOR COMMENTING</div>
  5.     <div class="comment-content">
  6.         <p>YOUR COMMENT HAS BEEN RECEIVED AND HELD FOR APPROVAL BY THE BLOG OWNER.</p>
  7.     </div><!-- comment-content -->
  8. </div><!-- comments -->

一通り変更したら保存します。
以上でAjaxによるCAPTCHA認証と、Ajaxによるコメント投稿の変更は完了です。

正しい認証コード、不正な認証コードを入れるなどして認証チェック、コメント投稿などを確認してください。
AjaxローダーはこちらのAjaxload - Ajax loading gif generatorからお好みで作成してください。

- 2007.06.26 追記 -

コメント・プレビュー時の内容に記述ミスがありました。正しくは以下の通りです。

  1. 変更前
  2. <input type="submit" accesskey="v" name="preview" id="comment-preview" value="Preview" />
  3.  
  4. 変更後
  5. <input type="submit" accesskey="v" name="preview" id="comment-preview" value="Preview" onclick="return ajax_comment_preview('comment_posted','progress');" />

tomo787 さん、ご連絡ありがとうございます (m;_ _)mペコ

  • Related Entries

 Trackback Pings(0)

No trackbacks found.

 Comments(16)

#1: Posted by oscar @ December 13, 2006 [REPLY]
user-pic

渾身のエントリーなのに反応が少ないですね。

試してみるには、やる事が膨大だからかな？
エントリー分割した方が良かったかも。

CAPTCHAは面白そうだけど、導入は躊躇っちゃうんですよね。
でも、なんかで試してみたいと思います。

ブログは結局このコメント廻りが、重要なんですよね。

 
#2: Posted by bzbell @ December 14, 2006 [REPLY]
user-pic

>>1 oscar さん

こんにちわ^^

> 渾身のエントリーなのに反応が少ないですね。

はい。でも、いつもこんなもんです（;￣∇￣A
何かしらコメントしてくれるのって、いつも決まった人だけなので･･･oscarさん含めて♪

それにSCodeプラグインもあるから、導入はそちらの方が楽ですしね。

> 試してみるには、やる事が膨大だからかな？

記事の書き方がまずいんですかね。
わたし的には、まずCAPTCHAイメージの表示をやってぇ･･･などのSTEPを踏んだほうが分かりやすいかなぁと思ったんですの。

まぁ、基本的にわたしのサイトは、わたしの勉強したことをご紹介してるだけなので、必要だったら参考にしてください･･･程度にしか考えてません(￣∇￣)b
だから、oscarさんの記事や他の人の記事みていろいろ試行錯誤した、紹介してないことっていっぱいあるんですの♪

 
#3: Posted by oscar @ December 14, 2006 [REPLY]
user-pic

>oscarさんの記事や他の人の記事みていろいろ試行錯誤した、紹介してないことっていっぱいあるんですの♪

私も一緒ですね。いろんなこと試しながら、下書きのエントリー書いてくんですが、へたすると２か月以上書きかけだったり、削除してしまったりが多数です。

まぁ、この試行錯誤が楽しいんですけど。ぜひどっかで、CAPTCHAも試してみますね。

FireBugで見ると「strongbg is not defined」ってのが、いっぱい表示されてるけど、これは何？

 
#4: Posted by bzbell @ December 14, 2006 [REPLY]
user-pic

>>3 oscar さん

> まぁ、この試行錯誤が楽しいんですけど。

ですね(●￣∇￣●)
oscarさんのサイトにしてもわたしのサイトにしても、人柱サイトだから、そういった意味だとイロイロ抱えてると思います♪
わたしもタイミングを逸したものもあったり、これ説明するの面倒だなぁ・・・というのもあります。

> ぜひどっかで、CAPTCHAも試してみますね。

はい♪
機会があったら試してみてください。

そそ、oscarさんはscriptaculous.jsの使い方なのご存知ですか!?
覚えることたくさんあって、EFFECT系って使いこなせていないんです(;￣∇￣A

> FireBugで見ると「strongbg is not defined」ってのが、いっぱい表示されてるけど、これは何？

それは、以前のテンプレートの名残りですね。
すいません。

訪問者さんのコメントをハイライト表示するためのJSだったんですけど、今は読み込まないようにしちゃってるので、そのエラーだと思います。
記事内容、テンプレ修正しておきます。

ところで、何ですの!? Firebugって!?

 
#5: Posted by oscar @ December 14, 2006 [REPLY]
user-pic

>ところで、何ですの!? Firebugって!?

あれっ、まだ使ってませんでしたか。すごい便利ですよ。
Firefoxの拡張なんですが、Javascriptのエラーの内容を表示してくれて、そのエラーがスクリプト内のどこで発生しているか、教えてくれたりします。CGIやAjaxでのやり取りの内容も表示できます。

テスト的にJavascript組み込んだ時に、発生した問題を追いかけられるので、今ではこれがかかせません。これはbzbellさんも絶対使うべきですよ。

 
#6: Posted by bzbell @ December 14, 2006 [REPLY]
user-pic

>>5 oscar さん

> Firefoxの拡張なんですが、Javascriptのエラーの内容を表示してくれて、そのエラーがスクリプト内のどこで発生しているか、教えてくれたりします。CGIやAjaxでのやり取りの内容も表示できます。

Σ（￣Д￣；）ガーン!!
そんなものがあったんですの!?
Fxってそういった機能ないものかと思って、わたしいつもIEでJSのエラーチェックしてましたっ!!

> これはbzbellさんも絶対使うべきですよ。

はい。さっそく探してインストしてみます♪

 
#7: Posted by tomo787 @ June 26, 2007 [REPLY]
user-pic

こんばんわ！
いつも拝見させていただいてます。

今回、「AjaxによるCAPTCHA認証をやってみる」にトライしてみたんですが、一点だけ問題が発生してしましました。
送信は問題なく行くんですが、プレビューがまったく動作しません。

いろいろと自分と解決しようと試してはみたんですが、完全に行き詰ってしまいました。
bzbellさんの知恵をお借りできれば幸いです。

エントリーページのプレビューボタン部分のソースは下記のとおりです↓
<input type="submit" accesskey="v" name="preview" id="comment-preview" value="Preview" />

お手すきに時によろしくお願いします！

 
#8: Posted by bzbell @ June 26, 2007 [REPLY]
user-pic

>>7 tomo787 さん

こんにちわ^^

あわわ (´Д｀；)
ごめんなさい。今さらながら記事にミスがありました。

正しくは以下の通りです。 

<input type="submit" accesskey="v" name="preview" id="comment-preview" value="Preview" onclick="return ajax_comment_preview('comment_posted','progress');" />

プレビュー時は CAPTCHA 認証せず、普通に Ajax によるコメント・プレビューさせます (￣∇￣)b

ホントにすいませんでした。
記事の方修正しておきます。

 
#9: Posted by tomo787 @ June 26, 2007 [REPLY]
user-pic

>>8 bzbell さん

＞あわわ (´Д｀；)
ごめんなさい。今さらながら記事にミスがありました。

いえいえ。こちらは参考にさせていただいてるんで大感謝なので！
しかもこのサイトのお役にたてるならなおさら！！

で、修正後、試したんですが動かないデス・・・。
他にも、気になる点がありまして、ここで解説されているajaxcaptcha.jsの内容と、ダウンロードさせていただいたajaxcaptcha.jsの内容が違うっぽいかな？って感じです。

送信は動いてるので問題ないんですが、プレビューできない理由として、jsとかのソースに原因があるのかなぁとか思ったりもします。

なにしろ、素人にはＣＡＰＴＣＨＡ認証はハードルが高い！！
でも、気合でやり遂げたいんで、すみませんがまたお手すきのときにレスばお願いいたします。

 
#10: Posted by bzbell @ June 26, 2007 [REPLY]
user-pic

>>9 tomo787 さん

こんにちわ^^

tomo787 さんが言われているのは以下の行のことでしょうか (;￣∇￣A 

document.getElementById(outputDivId).innerHTML = 'セキュリティ・コードが不正です。正しいコードを入力してください。';

この行は CAPTCHA 認証エラー時に出力されるメッセージになります。
ですので、コメント・プレビューとは関連がないので大丈夫ですよ。

でもね、tomo787 さんの一言でコードを見直したら、JavaScript の構文的に NG なところがありましたので、改めてダウンロードしていただけますか (●´∀｀●)

ホント、重ねがさねご迷惑おかけしてすいません。

具体的には 1、2 行目の最後にセミコロン( ; )がなかったので追加してます。
実際にわたしが使用している JavaScript なので動作実績ありです!!

で、本題ですが、ホントなら tomo787 さんのブログを見せていただけると一目瞭然だと思いますが、Post においてもコメントは投稿されるけど、エントリページにメッセージ表示されてなくないですか!?

もしそうだとした場合、以下の 1 行を削除してみてください。 

41行目
new Effect.Appear(outputDivId, { duration:3.0, queue:'end' } );

この 1 行がやってることは、たとえば、わたしのサイトでいうと、コメント投稿後エフェクト効果(ふわぁ～と字が浮かび上がってくる)を付けたい場合のコードになります。
ですので、そんな効果不要という場合には削除してください。

もしエフェクト効果を付けたい場合には、こちらのMovableTypeのコメントをAjaxで投稿するの記事を急遽更新しましたので参考にしてください。
また、エフェクト(視覚的効果)は別になくても CAPTCHA 認証には問題ありません。

 
#11: Posted by tomo787 @ June 27, 2007 [REPLY]
user-pic

>>10 bzbell さん
たびたびすみません。
レスを受けて試してみたんですがだめでした。
いろいろやってたら、プレビュー押すと送信しちゃったり、頭が混乱したのでもう一度はじめからやってみています。

すると、「mt-comment.cgiとの連動」の手前のところですでにつまづいてます、、、。
「ＯＫ」とか「ＮＧ」とかが出てこないんです・・・・・・・・・。

他に気になった点としては、もしかして、ここのCAPTHA認証って「MovableTypeのコメントをAjaxで投稿する」をやっていることが前提だったりします？？？ってことだとか、レスでご指摘いただいた「new Effect.Appear(outputDivId, { duration:3.0, queue:'end' } );」が、どのファイルのどの部分を指しているのか探すことができませんでした。非力ながら・・・・。エフェクトは現段階ではなくてかまわない感じです。


他にも

＞tomo787 さんが言われているのは以下の行のことでしょうか (;￣∇￣A
の部分でご指摘いただいた以外にも下記のような違いがあり、どう変更すれば良いか、、、。

function ajax_captcha_complete(RequestText)　（上の解説）
↓
function ajax_captcha_complete(req)　（ダウンロードファイル）


また、「How to Create CAPTCHA Protection using PHP and AJAX」オリジナル・コードの「ajax_captcha.js」はまったく使わないという認識で良いのでしょうか？？？


質問ばかりでホントにスミマセン、、、。
先生のお手すきのときに、、、何卒お願いいたします。
ちなみに、作りかけの僕のＢＬＯGのＵＲＬをフォームのＵＲＬ内に記入してます。

 
#12: Posted by bzbell @ June 28, 2007 [REPLY]
user-pic

>>11 tomo787 さん

こんばんわ^^

> すると、「mt-comment.cgiとの連動」の手前のところですでにつまづいてます、、、。

悩ませてしまってごめんなさい。
tomo787 さんご指摘のように、以下のように変更してください。 

24行目
変更前
document.getElementById(outputDivId).innerHTML = RequestText.responseText;
変更後
document.getElementById(captcha_id).innerHTML = req.responseText;

これにより OK/NG が表示されるようになります。
実はこの行は最終的には不要なんです。
実際にわたしが使ってるコードをお渡ししてしまったので、この行は削除済みでした（つω-`｡）

> また、「How to Create CAPTCHA Protection using PHP and AJAX」オリジナル・コードの「ajax_captcha.js」はまったく使わないという認識で良いのでしょうか？？？

はい、使いません。
あくまでも CAPTCHA 認証の動作説明のためにオリジナルで説明しただけですの。
紛らわしかったですね (;￣∇￣A

先ほど tomo787 さんのブログ覗かせてもらいました。
個別エントリアーカイブの </body> タグの上辺りに以下を追加してください。 

<script type="text/javascript">
<!--
ajax_comment_url(['http://●●●.com/mt/', 'mt-comments.cgi'].join(''));
//-->
</script>

上記 URL には mt-comment.cgi の URL を指定します。
または、ajaxcomments.js 内の以下の行を変更してもいいです。 

3行目
変更前
var url_comment_cgi = '';
変更後
var url_comment_cgi = 'http://●●●.com/mt/mt-comments.cgi';

先ほどと同様に mt-comments.cgi への URL を指定します。
どちらでもお好みの方法で構いません (￣∇￣)b
いずれかで mt-comments.cgi の URL を指定しないと Preview / Post ができなくなってしまいます。

上記 2 点の変更で正しく Preview / Post ができるようになると思います。
※prototype.js がチョビッと気になりますが、たぶん大丈夫かな (;￣∇￣A

他は見たところ問題なさそうです。

 
#13: Posted by tomo787 @ June 28, 2007 [REPLY]
user-pic

>>12 bzbell さん

ん～～～、やっぱりＯＫ/ＮＧでないですねぇ、、、。
そのまま、comments.cgiとの連動までいってみたんですが、症状は変わらずデス。
進歩したのは、セキュリティコードの認証失敗のときにメッセージが表示されるようになったのと、loading中のgifが表示されたくらいデス・・・。

症状的には、
１．　POSTで送信はできるが、保留テンプレートなどのメッセージが表示されない。
２．　previewボタンでもプレビューされずに送信してしまう。

２に関しては「MovableTypeのコメントをAjaxで投稿する」の冒頭でbzbell さんが触れてらっしゃるので、そこらへんと関係があったりするのかなぁと思いました。
やはり段階を踏んで「MovableTypeのコメントをAjaxで投稿する」から始めた方がいいのでしょうか？

bzbell さんのこのブログのソースなんかも拝見させていただき、勉強させていただいたんですが、にっちもさっちもデスねぇ。悩みで頭がハゲてしまいそう （´д`）

意外と簡単なミスだったりするのかなぁ・・・。
あと２点だけなんですけどねぇ。
先生の見解をお待ちしております！

 
#14: Posted by bzbell @ June 28, 2007 [REPLY]
user-pic

>>13 tomo787 さん

> ん～～～、やっぱりＯＫ/ＮＧでないですねぇ、、、。

>>12 でわたしが記した、24行目の変更を行ってください。
そうすれば、OK/NG は表示されます (;￣∇￣A

JavaScript、PHP Script の URL やその内容は問題なさそうなので、あと考えられることは･･･。

  1. コメント・プレビュー、コメント・エラーとコメント保留のテンプレートを上記記事を参考に差し替えてますでしょうか。

  2. コメントフォーム内の以下の行をコメントにしてください。

    変更前
<input type="hidden" name="static" value="1" />
変更後
<MTIgnore>
<input type="hidden" name="static" value="1" />
</MTIgnore>
    もぅ1つ、気休めだと思いますが。 
    変更前
<input type="submit" accesskey="v" name="preview" id="comment-preview" value="Preview" onclick="return ajax_comment_preview('comment_posted','progress');" />
<input type="button" accesskey="s" name="post" id="comment-post" value="Post" onclick="ajax_captcha(document.comments_form,'comment_posted','progress');" />
変更後
<input type="submit" accesskey="v" id="comment-preview" value="Preview" onclick="return ajax_comment_preview('comment_posted','progress');" />
<input type="button" accesskey="s" id="comment-post" value="Post" onclick="ajax_captcha(document.comments_form,'comment_posted','progress');" />

このくらいかなぁ (´･д･`)

あと、個別エントリ・アーカイブの </body> タグの上辺りに以下を追加してください。
mt-site.js でエラーしてますので。 

<script type="text/javascript">
<!--
individualArchivesOnLoad(commenter_name);
//-->
</script>
 
#15: Posted by tomo787 @ June 29, 2007 [REPLY]
user-pic

>>14 bzbell さん

キ、キターーーー！！！！です。
プレビュー成功、メッセージも表示されるようになりました！！！

bzbell さんにご指摘いただいたところを修正しただけでは、動かなかったので、いろいろとソースを触っていました。

>>10でエフェクトの効果を消すため、
new Effect.Appear(outputDivId, { duration:3.0, queue:'end' } );
を削除したんですが、そのちょっと下にある、

/* - 2007.05.19 -
* 上記エフェクト(Effect.Appear)を使用する場合、セクションを表示してしまうと、
* チラッと一瞬見えてしまうので、意図的にコメントにしています。
*
document.getElementById(outputDivId).style.display = '';
*/

のコメントを削除してみたら動きました。

「ajaxの投票」や「ajaxのメールフォーム」はカンタンに成功していただけに、今回のはホントに大変でした。

とにかく、bzbell さんにご指導いただいたおかげです。
毎回の素早いレスとご指摘、ありがとうございます。

 
#16: Posted by bzbell @ June 29, 2007 [REPLY]
user-pic

>>15 tomo787 さん

こんにちわ^^

> new Effect.Appear(outputDivId, { duration:3.0, queue:'end' } );
> を削除したんですが、そのちょっと下にある、

えぇーーー Σ(￣Д￣；)!!
そうなんですか!?

コメントがコメントとして認識されてなかった･･･ということですか!?
う～ん（つω-`｡）

でも、良かったですね (●＞∀＜●)／
tomo787 さんの努力の賜物ですの♪

 

 Post a Comment

 

コメント用フィード