MovableTypeでGoogleのInvisible reCAPTCHAを使う:「私はロボットではありません」

概要

reCaptcha.png 最近よく見かける文字列を入力しないで良いCAPTCHAをMovableTypeでも使えるようにしてみた。

調査

調べてみると、あれは無料で提供されているGoogleのサービスらしい。 以下を実施すると使えるようになるとのこと。

キーの取得

GoogleのreCaptchaのサイトに登録して、「Site key」と「Secret key」を取得する。

htmlの修正

  • <head>~</head>の中に「<script src='https://www.google.com/recaptcha/api.js'></script>」を追加する。
  • <form>~</form>の中に「<div class="g-recaptcha" data-sitekey="<Site key>"></div>」を追記する。(挿入したところにCAPTCHAが表示される)

Submit処理の修正

以下の値を URL: https://www.google.com/recaptcha/api/siteverify にPOSTで送信し、返り値をチェックする。

キー
secret reCaptchaのサイトで取得したSecret key
response formで送られてきたキー'g-recaptcha-response'の値
remoteip クライアントのIPアドレス

MovableTypeに実装する

文字列を入力するタイプのreCaptchaのプラグインがあったので、それを参考にプラグインを作成した。 使い方は以下の通り。

1.以下のファイルをダウンロードし、pluginsディレクトリの中のMTreCaptchaを、中身ごとMovableTypeのpluginsディレクトリにコピーする。 MTreCaptcha.zip

2.MovableTypeでプラグインを設定する。

  • 「ツール」→「プラグイン」の「MTreCaptcha」の設定で、「Site key」と「Secret key」を設定する。
  • 「設定」→「コミュニケーション」の「コメント表示設定」で「CAPTCHAプロバイダ」を「MTreCaptcha」に設定する。

3.HTMLヘッダのテンプレートに以下を追記する。

<script src='https://www.google.com/recaptcha/api.js'></script>
  • 対象のテンプレートは、当環境ではテンプレートモジュールの「HTMLヘッダー」だった。

4.コメントのテンプレートに以下を追記する。

<mt:If tag="MTCaptchaFields">
    <$MTCaptchaFields$>
</mt:If>
  • 対象のテンプレートは、当環境ではテンプレートモジュールの「コメント」とシステムテンプレートの「コメントプリビュー」だった。
  • MovableType標準のCAPTCHAを利用していて環境では、「<div id="comments-open-captcha"></div>」が既に存在すると思うので、そこを書き換える。
  • 無い場合は「<div id="comments-open-text">~</div>」と「<div id="comments-open-footer">~</div>」の間あたりが良いかも。

まとめ

素人作成のプラグインなので、設定したらきちんと試してください。もしうまく機能せずにスパムコメントだらけになっても、当方は関知いたしかねます。

トラックバック(0)

トラックバックURL: https://blog.fairy-land.jp/MT/mt-tb.cgi/71

コメント(3)

test
テスト投稿

コメントする

このブログ記事について

このページは、鋼のインフラ担当が2017年1月30日 12:34に書いたブログ記事です。

ひとつ前のブログ記事は「トナー転写でプリント基板作成」です。

次のブログ記事は「「(1)MAX10(2)ライタ(3)DVD付き! FPGA電子工作スーパーキット (トライアルシリーズ)」を買ってみた」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

カテゴリ

ウェブページ

Powerd By

Powered by Movable Type 6.3.2

Google Adsense