Movable Type CMSプラットフォーム Movable Type
ドキュメントサイト

Blogブログ

Movable Type 4 で reCAPTCHA を利用する

Movable Type 4 に追加された CAPTCHA 認証機能を利用するには、Movable Type 4 をインストールするサーバに Image::Magick がインストールされている必要があります。

Image::Magick のインストールされていない環境でも CAPTCHA 認証機能を利用したい場合のひとつの方法として、外部サービスを利用するというものがあります。今回は、reCAPTCHA という無償で利用できる CAPTCHA 認証提供サービスを Movable Type 4 のコメント部分に導入する方法をご紹介します。

プラグインのインストール

Movable Type 4 Beta には extras フォルダが同梱されています。中には OpenID 関係のプラグインやサンプルプラグインなどがあり、編集しやすくなった Movable Type 4 のテンプレート管理・編集画面 でご紹介した Snippet プラグインのサンプルも用意しています。今回はこのサンプルプラグインの中から、reCAPTCHA を Movable Type 4 で利用する為のプラグイン。つまり、CAPTCHA プロバイダを追加するプラグインのサンプルを利用して、紹介します。

さっそくプラグインをインストールしてみましょう。ここでは、mt.cgi のあるアプリケーションディレクトリを [MT] と表記します。

  1. [MT]/extras/examples/plugins/reCaptcha/plugins にある、reCaptcha ディレクトリを [MT]/plugins に移動 (もしくはコピー)

以上でインストールは完了です。

reCAPTCHA のアカウントを作成する

reCAPTCHA のトップページ。真ん中あたりにメニューがあります。

  1. reCAPTCHA のトップページに移動し、メニューから GET reCAPTCHA をクリックします
  2. 簡単な reCAPTCHA の紹介ページに Sign up Now! というボタンのあるページに移動しますので、Sign up Now! をクリックします
  3. ログインフォームに移動しますので、New to reCAPTCHA? となっている部分より、アカウントを作成します
  4. ユーザ名やパスワード、メールアドレスなどを入力した後、Are you a human? という問いかけとともに CAPTCHA 認証を行ってアカウントを作成します

アカウント作成後、アカウントメニューから + Add a New Site ボタンをクリックし、reCAPTCHA を導入したい Movable Type 4 がインストールされているサーバのドメインを入力します。

recaptcha-create.jpg [451px*99px]

すると、public key と pribate key という2種類のキーが発行されます。キーは2種類とも利用します (キーは reCAPTCHA にログインすれば、いつでも確認できます)

recaptcha-getkey.jpg [451px*147px]

Movable Type 4 の設定を行う

reCAPTCHA の設定を行い public, pribate 両方のキーを取得したら、先ほど reCAPTCHA プラグインをインストールした Movable Type 4 の管理画面に移動します。

操作メニュー (ブログ・モード) より、 プラグインを選択し、プラグインリストの中から reCAPTCHA プラグインの項目へ移動します。利用可能になっていることを確認し、設定の表示をクリックすると、public key と pribate key を入力するフォームが現れますので、両方のキーを入力し、変更を保存ボタンをクリックします。

同じく操作メニュー (ブログ・モード) から設定を選択し、コメントの設定に移動します。CAPTCHA プロバイダ設定のセレクトメニューに reCaptcha という項目があるのを確認し、選択します。

続いて、登録 / 認証の設定に移動し、認証無しコメントを受け付けるように設定します。メールアドレスの入力を必須にしたい場合は、該当の項目もチェックしてください。

最後にテンプレートの変更を行います。テンプレート・モジュール コメント入力フォーム テンプレートの以下の部分を修正します。

<MTIfNonEmpty tag="MTCaptchaFields">
<MTIfCommentsAccepted><MTIfRegistrationAllowed><MTElse><$MTCaptchaFields$></MTIfRegistrationAllowed></MTIfCommentsAccepted>
<div id="comments-open-captcha">
</div>
</MTIfNonEmpty>

となっている部分を

<MTIfNonEmpty tag="MTCaptchaFields">
<div id="comments-open-captcha">
<$MTCaptchaFields$>
</div>
</MTIfNonEmpty>

のように変更します。さらに Javascript テンプレートの以下の部分を削除します。

<MTIfNonEmpty tag="MTCaptchaFields">
captcha_timer = setInterval('delayShowCaptcha()', 1000);
</MTIfNonEmpty>

変更後、静的生成の場合は再構築して確認します。全てもしくはエントリーアーカイブのみをダイナミックパブリッシング (動的生成) するように設定している場合は、再構築の必要はありません。

設定完了後、コメントを許可しているブログ記事をチェックしてみてください。コメントフォームに reCAPTCHA が表示されているはずです。

recaptcha-in-mt4.jpg [450px*200px]
  • このエントリーをはてなブックマークに追加