SP用メニューボタン
ソレゾレブログ

技術的な事だったり日常の気になる事だったり

reCAPTCHA(リキャプチャ)の概要とそれを使って悪意のある行為からWebサイトを守る方法

スポンサーリンク

CAPTCHAとは何か

reCAPTCHAを説明する前に、その元となったCAPTCHAについて説明します。

CAPTCHAは、「Completely Automated Public Turing test to tell Computers and Humans Apart」の略で、意味は「コンピューターと人間を区別するための完全に自動化された公開チューリングテスト」という意味です。不正行為、スパム、悪用からサイトを保護してくれます。

CAPTCHAがどのようにWebサイトを保護してくれるかと言いますと、ログインやお問い合わせ送信欄に、下記画像のように文字が歪んでいたり、文字に影などが覆いかぶさっている画像をランダムに表示し、文字をユーザーに識別入力させ、ボットと人間を判別します。このような画像は人間には簡単に認識できますが、ボットにとっては認識しにくいものとなっています。これまで実際に運用されてきた歴史の中で証明されています。ただ、可能性が限りなく低くなるということですので、100%ではないという点に注意してください。

文字を判別するCAPTCHA
CAPTCHA

CAPTCHAは、1997年にAltaVista(アメリカの検索エンジン会社)のアンドレイ・ブローダーとその同僚たちによって開発され、その用語は、カーネギーメロン大学とIBMのメンバーによって2000年に造られました。

※AltaVista社の検索エンジンは2013年7月8日に閉鎖されています。

「チューリングテスト」の意味は、ボットが「知的(人間的)」か「人工知能」かを判定するためのテストの事で、イギリスの暗号解読者アランチューリングが提唱ました。映画「イミテーション・ゲーム」で暗号解読に奔走していたあの人ですね。

「公開チューリングテスト」ですが、これはアクセス者が「人間」か「ボット」かを判定するテストを意味するそうです。

スポンサーリンク

reCAPTCHAとは何か

本題のreCAPTCHAですが、reCAPTCHAは2007年にカーネギーメロン大学ルイス・フォン・アーン助教授とそのチームで開発されました。reCAPTCHAのreはreverseの意味です。

この技術は、不正対策の時に判別しにくい文字の画像を読ませて入力させるなら、それを何か他の用途にも使えないかというものです。それが何かといいますと、本や新聞のデジタル化時にOCRでも判別不可能だった文字の判読です。

本や新聞をデジタル化するときは、OCR装置(手書きの文字を読み取ってデジタル化してくれる装置)で読み取ってデジタル化しますが、インクが薄い、文字が擦れている、文字が褪せている、などの理由でOCRが判別できないものがあります。その判別出来なかった文字の画像を認証文字の画像として出して、ユーザーに正しい文字を入力させて、本や新聞のデジタル化に役立てようというものです。

ただこれでけでは、入力した文字が正しいのかどうなのかわからず認証にならないので、実際は下記画像のように「OCRが判読出来た文字の画像」と「OCRが判読できなかった文字の画像」二つを表示してユーザーに入力させます。

reCAPTCHAv1
reCAPTCHAv1

また、OCRで判読できなかった文字の読み取りという点では、一人の人間が入力した結果だけを信じるとなると、その人が入力した答えが正しいか疑わしいです。ですので、判読不能だった同じ文字画像をたくさんの人に表示させ、統計的に多かった答えを取り入れるという形となっています。

こうすれば、reCAPTCHAの認証を利用する膨大なユーザーが、認証と同時に判読不能文字の解読者となるので、本や新聞のデジタル化が凄まじく早く終えられるというものです。

これを考え出したルイス・フォン・アーンは素晴らしいですね。

reCAPTCHAのバージョンと概要

reCAPTCHAですが、2009年にGoogleに買収され、現在はGoogleが認証機能としてサービス提供しています。Googleが提供するreCAPTCHAには現在v2、v3、Enterpriseがありまして、v1については現在は提供されておりません。

因みにreCAPTCHA認証が実装されているサイトでは、お問い合わせフォームやログイン画面などで下記の矢印がくるっとしている画像が表示されます。

reCAPTCHAv2ロボット
reCAPTCHAv2 チェックボックス方式
reCAPTCHAv3
reCAPTCHAv2 invisible方式 及び reCAPTCHAv3

v2 v3 Enterpriseのざっくりした機能差

v2は、ユーザーによる操作を元にボットであるかチェックされます。v3は、ユーザーの操作は不要で、ユーザーの挙動をチェックしスコアを算出してボットかどうかチェックされます。Enterpriseは、v2とv3の機能に合わせて多彩な追加機能が提供されています。一部機能を使うには課金が必要です。詳しくは下記を参照してください。

reCAPTCHAv1(提供終了)

reCAPTCHAv1は2018年3月に提供終了しておりますが、参考までに触れておきます。

先述のreCAPTCHAとは何かで説明しましたが、reCAPTCHAv1は本や新聞のデジタル化でOCRが認識できなかった文字の画像を認証情報をとして表示し、ユーザーに正しい文字列を入力させるという方式です。この方式が廃れた理由ですが、ボットの文字認識性能が向上してちょっとくらい見づらい文字だったら解読できるようになってしまったからです。最終的には人間でも判別できないような文字画像を出さざるを得なくなってきて、認証にならなくなってきてしまったので提供されなくなったようです。

reCAPTCHAv2

reCAPTCHAv2は、ユーザーに操作してもらうことによって認証する点はv1と同じですが、読みにくい画像の文字を判別して入力させるのではなく、チェックボックスやSubmit(送信)ボタンをマウスカーソルで押すときの挙動を監視して人間かボットか判断する認証方法です。人間がマウスを操作すると、カーソルが止まったりブレたり特有の動きをします。それで判断しているようです。これもまたすごい技術ですね。

v2には2つの設置方法があります。このほかAndroidアプリに設定することも可能ですが、これはこの記事の趣旨から外れる為除外します。

reCAPTCHAv2 チェックボックス方式

reCAPTCHAv2 チェックボックスでは、第一段階としてユーザーに「私はロボットではありません」のチェックボックスを押させます。この時のマウスカーソルの挙動を監視しています。

reCAPTCHAv2 チェックボックス方式 認証第一段階
reCAPTCHAv2 チェックボックス方式 認証第一段階

このテストの結果ボットであると判断された場合は、二つ目のテストである「画像試験」を受けることになります。複数の画像が升目上に配置してあって、その中から指定のものを選択しなさいというあれです。ボットには荒い画像から指定のものを選ぶことは困難だという事実の元、第二段階のテストを受けさせられます。

 reCAPTCHAv2 チェックボックス方式 認証第二段階
reCAPTCHAv2 チェックボックス方式 認証第二段階

これでユーザーが正しい画像を選択できなかったら認証NGとなります。

reCAPTCHAv2 invisible方式

v2のinvisible方式は、「私はロボットではありません」のチェックボックスは表示されず下記のバッジが表示されます。

  reCAPTCHAv2 invisible方式  第一段階
reCAPTCHAv2 invisible方式 第一段階

第一段階では、Submit(送信)ボタンを押すときのマウスカーソルの挙動を見ています。これで認証がNGだった場合は、第二段階の認証を受けることになりますが、これはチェックボックス方式と同じで、画像から正しい指定されたものを選択する方式です。

 reCAPTCHAv2 invisible方式 認証第二段階
reCAPTCHAv2 invisible方式 認証第二段階

視覚障害者用の認証

上記画像の下部にヘッドホンのアイコンがありますが、これをクリックすることにより音声による認証を受けることが出来ます。音声を再生し聴こえた文字を入力するという方式のようです。

reCAPTCHA視覚障害者用の認証

画像試験の突破

第二段階の画像試験ですが、これを突破する攻撃者も現れました。荒い画像はボットに認識が難しいと先述しましたが、画像を認識するボットを開発したのではなく、視覚障害者の為の音声試験を利用して、音声認識ボットを開発して突破されてしまったようです。その後対応策が考えられ改善したようですが、セキュリティはイタチごっこですね。

スポンサーリンク

reCAPTCHAv3

reCAPTCHAv3は、ユーザーの操作によるチェックは一切ありません。ユーザーがマウスカーソルでSubmit(送信)ボタンをクリックするときの挙動(リクエスト)を監視していて、リクエストに対して0.0から1.0の間でスコアを算出します。0.0寄りだとボットに近く、1.0寄りだと人間に近いということになります。v3ではユーザーの操作を必要としないので、ユーザーへのストレスが軽減できます。

スコアがどのようなパターンで算出されるか

v3では、コンテンツの種類によって相応しいチェックが裏で勝手に?働きスコアに反映してくれるようです。そのチェックは4つのパターンに分かれるようです。reCAPTCHAの公式ページの情報が少なすぎてこれらのチェックパターンがどのように紐づきどうチェック判定されるかはわかりませんでした。初めはこのチェックパターンを設定で紐づけて使うのかと思いましたがマニュアルに方法が載っていないので、自動的に判定されるのだと思っています。詳しい方がいたら是非教えてくただい。

チェックパターン内容
ホームページスクレーパーをフィルタリングします。管理コンソールで統計が確認できます。スクレーパーとはWebページから情報を収集する行為で、ここでは悪意のあるユーザーのこと。
ログインスコアが低い場合は、資格情報の詰め込み攻撃を防ぐために、2要素認証または電子メール検証が必要。
ソーシャル悪意のあるユーザーからの友達リクエストを制限し、危険なコメントと判断された場合は承認が無ければ表示できないようにします。
イーコマース実際の売上をボットよりも優先し、リスクの高いトランザクションを特定します。

アクション名

v3にはアクション名というものがあります。アクション名を設定することで、reCAPTCHAの管理コンソールでアクションごとの統計とリスク分析が表示されます。アクション名には英数字とスラッシュのみ使うことが出来ます。アクション名はユーザー固有であってはなりません。(これはおそらくですが、ユーザーごとに個別のアクション名を作成すると、どんな場面のアクションかわからなくなってしまうのと、アクション名が沢山増えてしまいわかりにくくなることを懸念しているような気がします。)

reCAPTCHAv3が有効である証

v3が有効な場合、v2のinvisibleと同じように下記のバッジが表示されます。但し、カスタマイズして非表示にしている場合は表示されません。非表示にする方法は後述の「バッジを非表示にする方法」を参照してください。

reCAPTCHAv3バッジ
reCAPTCHAv3バッジ

reCAPTCHA Enterprise

GCP(Google Cloud Platform)が必要となりますので、初めに登録が必要となります。

1か月あたり100万評価を超えた場合有料となります。1000評価毎に料金が発生します。また、「多要素認証(MFA)のサポート(プレビュー)」でメールやSMSを利用したい場合についても課金が発生するようです。

追加機能ですが、v2v3よりも多彩な機能が追加されています。より詳細なスコア、危険なイベントの理由コード、モバイルアプリ SDK、パスワード侵害 / 漏洩の検出、多要素認証(MFA)、サイト固有モデルの調整による企業ビジネスの保護などの機能を備えた拡張検出、が追加できます。

機能などを、見ていると大規模なビジネス用途といった感じです。よほど理由が無い限りはv2かv3でよいと思います。

スポンサーリンク

利用数の上限

reCAPTCHAは、すべてのバージョンで1か月あたり最大100万評価且つ、1000QPS(1秒間に処理できるクエリ数)まで無料で使えます。それを超えた場合はEnterprise版で有料契約する必要があります。1000QPSを超えると完璧に使えないのではなく一部のリクエストが処理されないようです。

v2やv3でも例外的に最大利用数を超えても承認される場合があるそうです。承認してほしい場合はこちらのフォームに例外の承認申請をすればよいとのことですが、どのような基準で承認されるかは不明です。前提としては、非営利目的であるということです。また、リクエストが多いのですべての申請に回答が来るとは限らないようです。

詳しくは下記を参照してください。

v2とv3どちらを選ぶべきか

公式ページにも書いてありますが、わざわざユーザーに操作させてまでチェックするまでもない場合はv3、登録ページなどしっかりチェックしたい場合はv2を使った方が良いですよということだと思います。v2は古くて廃れたものではなく、用途に応じて使い分けてくださいということですね。

クライアント側の設定方法

reCAPTCHAv2

v2の簡単な設定方法

簡単で基本的な方法です。まずは、reCAPTCHA用のjavascript(api.js)を呼び出すコードを追加します。

//bodyの一番下のほうでもよい
<head>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>

次に、Submitボタンの上に下記属性を設定したDIV要素を追記します。reCAPTCHAウィジェット(私はロボットではありません)がSubmitボタンの上に表示されます。

  • クラス名に「g-recaptcha」を設定
  • カスタムデータ属性「data-sitekey」に自分に発行された「サイトキー」を設定
  <body>
    <form action="?" method="POST">
         :
      <div class="g-recaptcha" data-sitekey="発行されたサイトキー"></div>
      <input type="submit" value="送信">
    </form>
  </body>

これでOKです。ウィジェット「私はロボットではありません」が表示されたと思います。

私はロボットではありません

この後は、必要に応じてクライアントからPOSTされた情報を元にサーバー側検証設定を行ってください。後述の「サーバー側での検証」を参照してください。

より詳細な設定が出来る方法

こちらの方法を使うと、明示的に下記オプションの設定が出来ます。

オプション内容
テーマライト(初期値)かダーク(黒)から選択。
サイズノーマル(初期値)かコンパクトから選択。
タブインデックスキーボードタブキーを押した時の移動順序(tabindex属性)を設定できる。初期値は0。
コールバック関数(成功)ユーザーが「私はロボットではありません」にチェックを入れて成功したら呼び出されるコールバック関数を設定できる。コールバック関数はパラメータ response に「g-recaptcha-response の値」を受け取ります。
コールバック関数(時間切れ)ユーザーが「私はロボットではありません」にチェックを入れずに時間切れ(2分)し、ユーザが再度チェックする必要がある場合に呼び出されるコールバック関数を設定できる。
コールバック関数(エラー)reCAPTCHAでエラー(通常はネットワーク接続)が発生したときに呼び出されるコールバック関数を設定できる。
ダークテーマのウィジェット
ダークテーマのウィジェット
コンパクトなウィジェット
コンパクトなウィジェット

設定には2つの方法があります。

  • 先述した「reCAPTCHAv2」「v2の簡単な設定方法」する設定と同じで、DIV要素にクラス名「g-recaptcha」を設定し、カスタム属性「data-sitekey」でサイトキーを設定、さらに、カスタム属性で設定したいオプションを設定して、ウィジェットを呼び出す方法。
  • DIV要素に任意のidを設定して、Javascriptでgrecaptcha.renderメソッドを呼び出し、DIV要素に設定したidと設定したいオプションを設定してウィジェットを呼び出す方法。
「g-recaptcha」クラスを設定したDIV要素にカスタム属性を指定して呼び出す方法

まずは「api.js」を呼び出します。

//bodyの一番下のほうでもよい
<head>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>

次に、DIV要素にクラス名「g-recaptcha」とサイトキーを設定します。違う点は、オプションをカスタム属性で書いていくところです。設定できるオプションは下記を参照してください。

  <body>
    <form action="?" method="POST">
         :
      <div class="g-recaptcha" data-sitekey="発行されたサイトキー" オプションのカスタム属性1="設定値" オプションのカスタム属性2="設定値"  ・・・ ></div>
      <input type="submit" value="送信">
    </form>
  </body>

これで、オプションが反映されたウィジェットが表示されたと思います。

この後は、必要に応じてクライアントからPOSTされた情報を元にサーバー側検証設定を行ってください。後述の「サーバー側での検証」を参照してください。

Javascriptで「grecaptcha.render」メソッドを書いて呼び出す方法

まずは、[api.js」スクリプト呼び出します。呼び出す際に、下記パラメータを付与する必要があります。

  • onloadパラメータ。Javascriptのgrecaptcha.renderメソッドを呼び出すための関数名(任意のもの)を設定。「onload=関数名」の形で追記。
  • renderパラメータ。「render=explicit」のように追記。設定しない場合は初期値で「g-recaptcha」クラスを見にいってしまいますが、この設定をすることで、明示的なid名を設定したDIV要素にウィジェットを表示するようになります。grecaptcha.renderメソッドを使う場合は必須の設定です。

それを付加した[api.js」呼び出し用のURLが下記です。これ以外に特定言語に強制変更できるパラメータもありますが、詳しくは下記を参照してください。

//bodyの一番下のほうでもよい
<head>
    <script src="https://www.google.com/recaptcha/api.js?onload=関数名&render=explicit" async defer></script>
</head>

URLパラメータで設定した関数(onload=に指定した関数)でgrecaptcha.renderメソッドを呼び出し、オプションを設定していきます。Javascriptで書いていきます。設定できるオプションは下記を参照してください。

//htmlファイルのbody一番下にscriptタグで書いてもよい
$(function(){
	var URLに指定した任意の関数名 = function() {
	  grecaptcha.render('ウィジェットを表示するDIV要素に設定する任意のid', {
	    'sitekey' : 'サイトキーを設定', //必須
	    //設定したいオプションを記載していく
	    'theme' : 'dark',
	    'size' : 'compact',
	  });
	};
});

最後に、Submitボタンの上に任意のidを設定したDIV要素を設置します。

  <body>
    <form action="?" method="POST">
         :
      <div id="任意のidを設定"></div>
      <input type="submit" value="送信">
    </form>
  </body>

これで、オプションが反映されたウィジェットが表示されたと思います。

この後は、必要に応じてクライアントからPOSTされた情報を元にサーバー側検証設定を行ってください。後述の「サーバー側での検証」を参照してください。

g-recaptchaタグとgrecaptcha.renderメソッドでコールバック関数を呼び出す設定例

g-recaptchaタグに「data-callback」カスタム属性、または、grecaptcha.renderメソッドに「callback」パラメータを設定した時にコールバック(試験が正常完了した時に呼び出されるコールバック関数)される関数の設定例です。

この設定例では、「私はロボットではありません」のチェックをオンにしてボットではないと評価されると 「あなたがロボットではないことを確認しました。」とアラートが表示されます。こういう使い方をする人がいるかどうかわかりませんが、あくまで検証用のコードですのでご参考までに。

//bodyの一番下のほうでもよい
<head>
    <script src="https://www.google.com/recaptcha/api.js?onload=callbackSucessAlert&render=explicit" async defer></script>
</head>
//htmlファイルのbody一番下にscriptタグで書いてもよい
$(function(){
	var callbackSucessAlert = function() {
	  grecaptcha.render('exampleSuccess', {
	    'sitekey' : 'サイトキー',
	    'callback' : sucessAlert
	  });
	};
	var sucessAlert = function(response) {
	  alert('あなたがロボットではないことを確認しました。');
	};
});
  <body>
    <form action="?" method="POST">
         :
      <div id="exampleSuccess"></div>
      <input type="submit" value="送信">
    </form>
  </body>

これで設定は終わりです。「私はロボットではありません」のチェックをオンにしてボットではないと評価されると、下記のようにアラートが表示されました。

時間切れやエラーのコールバック関数もこれを応用すればよいと思います。

コールバック関数(正常)の設定例の実行結果

スポンサーリンク

reCAPTCHAv3

v3の簡単な設定方法

簡単で基本的な方法です。はじめにreCAPTCHA用のjavascript(api.js)を呼び出すコードを追加します。

//bodyの一番下のほうでもよい
<head>
    <script src="https://www.google.com/recaptcha/api.js"></script>
</head>

form要素にidを設定します。

<form id="任意のid名" ・・・・>
 :
</form>

Submitしたときに関数を呼び出す設定をします。

//bodyの一番下のほう
<script>
	function submitをクリックした時呼び出される関数名(token) {
		document.getElementById("formタグに任意に付与したid名").submit();
	}
</script>

Submitボタンを下記のように書き換えます。アクション名は、reCAPTCHAの管理コンソールでアクションごとの統計に使われます。

<button class="g-recaptcha"
	data-sitekey="サイトキー"
	data-callback="submitをクリックした時呼び出される関数名"
	data-action="任意のアクション名">送信
</button>

これでOKです。バッジが表示されたと思います。

reCAPTCHAv3の自動的なレンダリング

この後は、必要に応じてクライアントからPOSTされた情報を元にサーバー側検証設定を行ってください。後述の「サーバー側での検証」を参照してください。

より細かく制御したい場合の設定方法

この方法を使うと、トークン取得に成功/失敗した時の制御を設定できます。

formにidを付与します。

<form id="任意のフォームid" ・・・・・・・・>

submitボタンにidを付与します。inputタグでもよいと思います。

<button type="submit" id="任意のボタンid">送信</button>

reCAPTCHA用のjavascript(api.js)を呼び出すコードを追加します。このとき、サイトキーをパラメータとして設定します。

//bodyの一番下のほうでもよい
<head>
    <script src="https://www.google.com/recaptcha/api.js?render=サイトキーを設定"></script>
</head>

メインのコードを作成します。

//bodyの一番下か、javascriptを外出しして読み込んでも良い
<script>

  //formタグのid、submitボタンのid、アクション名、シークレットキーを変数にセット
	const formId = document.getElementById('フォームのid');
	const btnId = document.getElementById('ボタンのid');
	const actionName = 'アクション名';
	const siteKey = 'シークレットキー';

  //submitボタンをクリックしたときに関数のイベントが発動するよう設定
  btnId.addEventListener('click', Submit時に呼び出される任意の関数名);
  
  //submitボタンクリック時に発動する関数
	function Submit時に呼び出される任意の関数名(e) {

    //一旦Submitイベントを停止する
		e.preventDefault();

    //grecaptchaスクリプトの読み込みが完了したら
		grecaptcha.ready(function(){

      //grecaptchaを実行
			grecaptcha.execute(siteKey, {action: アクション名}).then(

        //ボットテストに合格してトークンがセットされていた時の処理
				function(token){

          //サーバーにトークンを渡すためにhiddenのinput要素を生成
             //input要素を生成
					   appendTag = document.createElement('input');
             //typeにhiddenを設定
					   appendTag.setAttribute('type', 'hidden');
             //nameにg-recaptcha-responseを設定
					   appendTag.setAttribute('name', 'g-recaptcha-response');
             //valueに生成されたトークンを設定
					   appendTag.setAttribute('value', token);
             //input要素をフォームの最後に挿入
					   formId.appendChild(appendTag);	
	           //停止したsubmitイベントを実行
					   formId.submit();

        //ボットテストNGでトークンがセットされていなかった時の処理
				}).catch(function(e){
					//エラー時の処理を記載。eにはエラーメッセージが格納される。
					console.log('grecaptchaでエラーが発生しました : ' + e);
				});
		});
	};
</script>

これでクライアント側の設定は終わりです。

この後は、必要に応じてクライアントからPOSTされた情報を元にサーバー側検証設定を行ってください。後述の「サーバー側での検証」を参照してください。

WordPressでプラグインを使った設定

検証環境

この機能の検証はWordpress5.8.1で行っています。

Advanced noCaptcha & invisible Captcha(バージョン6.1.6)

WordPressのプラグインをいくつか紹介します。

プラグインをインストールすると、[設定] – [Advanced noCaptcha & invisible captcha] のメニューが追加されます。基本的に無料で使えますが、サポートが必要な場合は有料版の契約が必要です。設定方法を下記に書いていきます。

Advanced noCaptcha & invisible Captchaの設定画面1
reCAPTCHA type

「V2 “I’m not a robot”」「V2 Invisible」「v3」全て設定可能です。使いたいものを選択してください。

Site Key

サイトキーを設定します。

Secret Ket

シークレットキーを設定します。

Enabled Forms

どこ箇所でreCAPTCHAを有効にするか設定します。「Login Form」「Registration Form」「Multisite User Signup Form」「Lost Password Form」「Reset Password Form」「Comment Form」「bbPress New topic」「bbPress reply to topic」「BuddyPress register」「WooCommerce Checkout」の10か所に設定が出来ます。使いそうなものだけ説明します。

Enabled Forms設定箇所
Login Form管理画面のログイン認証
Registration Form[設定] – [一般] – [だれでもユーザー登録ができるようにする] の設定を有効にしていた場合に管理画面に [登録] リンクの先に現れるユーザー登録画面
Multisite User Signup FormWordPressをマルチサイトで構築している場合のユーザーサインアップ画面
Lost Password Form管理画面の「パスワードをお忘れですか ?」リンクの先のパスワードリセット画面
Reset Password Form上記でパスワードリセット申請をした後にメールで送られてくるパスワード再設定画面
Comment Form投稿のコメント欄
Enabled Forms(Contact Form 7)

Contact Form 7にreCAPTCHAを挿入する場合はショートコードの設定が必要です。

Advanced noCaptcha & invisible CaptchaでContact Form 7を設定

[設定] – [Advanced noCaptcha & invisible captcha] -[Instruction] タブにショートコードが表示されていますので、それをContact Form 7の設定ページで [submit “***”] の上に張り付けてください。

Advanced noCaptcha & invisible Captchaの設定画面2
Error Message

reCAPTCHAの試験に失敗した場合に表示するメッセージ。

Captcha Language

ウィジェットの表示言語を選択します。「Japanese」でよいです。

Theme

ウィジェットの表示をLight(明るい)にするかDark(暗い)にするか。

Size

ウィジェットの表示をNormalサイズにするかCompactサイズにするか。

Failed login Captcha

ログイン試行が何回失敗した後、 ウィジェットを表示するか?0 =常に表示、1以上だとその回数分はログインに失敗してもウィジェットを表示しない。マイナスを設定したらプラスの値で設定されます。

Whitelisted IPs

許可するIPをホワイトリストで記載する。

Recaptcha Domain

「お住まいの国でいずれかがブロックされている場合は、他の1つを選択してください。」とのことなので、日本国内ではGoogle.com1択ですね。

Logged in Hide

管理画面にログインしているユーザーが、ログイン状態を保持したままで例えばコメント欄でコメント投稿した場合、この設定がオンだとウィジェットを表示しない。

Remove CSS

「このcssは、ログインページの幅を増やしてキャプチャの幅に合わせて調整します。」とのことなので設定を有効にしてみたら、こんな感じに広がりました。デザイン上の特別な理由が無い限りオンにしなくても良い気がします。

Advanced noCaptcha & invisible CaptchaのRemove CSSの設定
No JS Captcha

「javascriptが無効になっている場合はキャプチャを表示しますか?」「JavaScriptがサイトの要件である場合は、これをチェックしないことをお勧めします。」とかいてあるので、通常はチェックをしなくても良いと思います。

このプラグインに対応していないフォームにnoCaptchaを実装する方法

formタグのSubmitボタンの上に、PHPでdo_action(‘anr_captcha_form_field’)を追加するか、ショートコードで [anr-captcha] を追加します。下記はPHPの例です。

\\検証環境がWordpressの静的サイトなので「Template Name」が設定されています
<?php
/*
Template Name: contact
*/
?>

<?php get_header(); ?>

<form action="<?php echo esc_url(home_url('/recaptcha')); ?>" method="post">
    <div class="your-name-outer">
        <label for="your-name">名前</label><br>
        <input type="text" name="your-name" size="20" id="your-name" value="">
    </div>
    <div class="your-email-outer">
        <label for="your-email" class="item-name">メールアドレス</label><br>
        <input type="email" name="your-email" id="your-email" value="">
    </div>
    <div class="your-textarea-outer"></div>
        <label for="your-textarea" class="item-name">お問い合わせ内容</label><br>
        <textarea name="your-text" rows="10" id="your-text"></textarea></span>
    </div>
    <?php do_action('anr_captcha_form_field'); ?>
    <div class="submit-button-outer">
        <button type="submit">送信</but>
    </div
</form>

<?php get_footer(); ?>
reCAPTCHAが問題なく動いているかの検証

PHPでanr_verify_captcha()を使います。これは、formタグのaction先でしか検証できないようです。下記が設定例です。クライアント側が操作するフォームのコードは上記を使っています。

\\検証環境がWordpressの静的サイトなので「Template Name」が設定されています
<?php
/*
Template Name: recaptcha
*/
?>

<?php get_header(); ?>

<body>
	<?php
	    if(anr_verify_captcha()) {
	        echo "成功";
	    } else {
	        echo "失敗";
	    }
	?>
</body>

<?php get_footer(); ?>

Submitボタンが押されると、アクション先に書いたコードでreCAPTCHAが動いているか検証出来ます。

スポンサーリンク

Invisible reCaptcha for WordPress(バージョン 1.2.3)

プラグインをインストールすると、[設定] – [Invisible reCaptcha] のメニューが追加されます。全て無料で使えます。invisibleというぐらいですのでv2invisibleとv3で利用出来、norobot方式にするとエラーとなります。とてもシンプルな設定項目となっていますので、初心者やカスタマイズ不要の方向けという感じですね。下記に設定方法を記載していきます。

Invisible reCaptchaの設定画面1
設定 – サイト鍵

reCAPTCHA管理コンソールで発行されたサイトキーを設定します。

設定 – 秘密鍵

reCAPTCHA管理コンソールで発行されたシークレットキーを設定します。

設定 – 言語

ウィジェットの言語を設定します。「Japanese」で良いです。

設定 – バッジの位置

右下、左下、インラインから設定できます。右下、左下は通常のバッジ表示で、インラインにするとフォーム中に下記のように表示されます。

設定 – バッジのカスタマイズCSS

バッジの場所がインラインに設定されている場合にバッジのスタイルを変更したい場合につかえるようです。

Invisible reCaptchaの設定画面2
WordPressへのバッジ表示

下記4か所への表示が可能です。

保護設定具体的な場所
ログインフォームの保護を有効化管理画面のログイン認証画面
登録フォームの保護を有効化[設定] – [一般] – [だれでもユーザー登録ができるようにする] が有効になっていた場合に[管理画面ログインフォーム] 内の[登録] リンク先のユーザー登録画面
コメントフォームの保護を有効化投稿のコメント欄を有効にしていた場合に投稿ページに表示
パスワード再発行フォームの保護を有効化管理画面のログイン認証フォーム内の「パスワードをお忘れですか ?」リンク先のパスワードリセット申請画面
Invisible reCaptchaの設定画面3
WooCommerce

設定画面は上記画面のとおり設定できます。これは検証していないので具体的な設定例はありません。

Invisible reCaptchaの設定画面4
UltraCommunity

設定画面は上記画像のとおり設定できます。これは検証していないので具体的な設定例はありません。

Invisible reCaptchaの設定画面5
BuddyPress

設定画面は上記画像のとおり設定できます。これは検証していないので具体的な設定例はありません。

Invisible reCaptchaの設定画面6
問合せフォーム – Contact Form 7の保護を有効化

設定を有効にすると、Contact Form 7のページにバッジが表示されます。とても簡単です。

Gravity Forms

海外で人気のお問合せフォームだそうです。使っている人は対応しているそうです。

除外 Gravity フォーム ID

Invisible reCaptchaで保護しないGravity Forms IDをカンマ区切りで複数設定できるそうです。

ReCaptcha v2 for Contact Form 7(バージョン 1.3.5)

このプラグインは、Contact Form 7をreCAPTCHAv2に対応させてくれるプラグインです。Contact Form 7に直接reCAPTCHAを設定することはできますが、v3にしか対応していない点と、Contact Form 7のインテグレーションで設定すると、すべてのページにバッジが表示されてしましまいますので、このプラグインを使えば解消できます。このプラグインではv3でも利用可能ですので、Contact Form 7だけにreCPATCHAを導入されたい方はぜひおすすめです。

まずはContact Form 7をインストールしてください。

その後プラグインをインストールすると [お問い合わせ] – [reCAPTCHAバージョン] のメニューが追加されます。

ReCaptcha v2 for Contact Form 7設定画面
reCaptcha の使い方を選択

v2のnorobotを使いたい方は「reCAPTCHAバージョン2」、v3を使用したい方は「デフォルトの使い方」を選択してください。v2のinvisibleには対応していません。

reCaptcha ソースを選択

google.comかrecaptcha.netから選択できます。google.comへアクセスが禁止されている場合(国で制御しているなど)はrecaptcha.netを選択するようなので、日本国内ではgoogle.com一択だと思います。

お問合せフォームの設定

submitコードの上にショートコード[recaptcha]を追記するだけです。

<label> 氏名
    [text* your-name] </label>

<label> メールアドレス
    [email* your-email] </label>

<label> 題名
    [text* your-subject] </label>

<label> メッセージ本文 (任意)
    [textarea your-message] </label>

[recaptcha]
[submit "送信"]

これで設定完了です。

スポンサーリンク

サーバー側での検証

Submitボタンを押してもサーバーは情報がPOSTされてくるだけで、サーバーはクライアント側でボット試験をクリアしたかどうか知りません。サーバー側でもクライアントがボット試験をクリアしたかを確認する方法が用意されています。

g-recaptcha-responseパラメータについて

クライアント側でボット試験に成功すると、g-recaptcha-responseパラメータに下記のようなトークンが生成されます。この値をサーバー側にPOSTして、サーバーがトークンを検証用のAPIに問い合わせることでサーバー側の検証が出来ます。

03AGdBq25DyIXjULE7Div0jR7kZ0TMq9v34UKfUMNti7D5DTe1xNmRs_GDonL8ObMInWTYbdCwoVsv0f5utADVmVz53TB0Q0HH3AciGOuYA7bKSH3kcvY6AW5DMS・・・・・・・・・・・・・

サーバー側検証の実装方法v2の例

クライアントがSumitボタンをクリックし情報を送信すると、g-recaptcha-responseパラメータも一緒にサーバー側にPOSTされてきます。

このPOSTされてきたトークンと、reCAPTCHA登録時に発行されたシークレットキーをパラメータとして追加したURL(API)にサーバーからアクセスすると、検証結果が得られます。オプションとしてはユーザーのIPも指定できますが詳しくは下記リンクを参照してください。

https://www.google.com/recaptcha/api/siteverify?secret=シークレットキー&response=トークン

v2の検証で得られる情報は下記です。

{
  “success”: true|false,  //trueだと照合OK、falseだとNG
  “challenge_ts”: timestamp,  //タイムスタンプ
  “hostname”: string, //ドメイン
  “error-codes”: […] //success がfalseだった場合のエラーコード
}

クライアント側の実装は、「クライアント側の設定方法」を参照してください。

v2でのサーバー側検証設定の実装例を下記に記載します。

クライアントからPOSTされてきたトークン(g-recaptcha-responseパラメータ)を利用して行います。トークンとシークレットキーをURLのパラメータにセットし、APIに問いあわせ、得られたjsonデータの「success」メンバーの値が「true」(成功)か「false」(失敗)かで検証結果を確認します。

//Submitクリック後サーバー側の検証
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
</head>
<body>
    <div>
        <?php
        
            //①APIのURL、シークレットキー、POSTで受け取ったトークンを変数にセットします
            $url = 'https://www.google.com/recaptcha/api/siteverify';
            $secretKey = 'シークレットキーを指定';
            $token = htmlspecialchars($_POST[ 'g-recaptcha-response' ], ENT_QUOTES, 'UTF-8');

            //tokenがセットされていたら検証作業を進め、セットされていなかったらエラー処理を実行
            if (isset($token)){
              //トークンがセットされていた時の処理              
	              //json形式にエンコード
		            $result = json_decode($response, true);
	              //得られた結果のsuccessがtrueであるかfalseであるか確認し、それぞれに見合った処理を実行。
		            if ($result[success]) {
		                echo "成功";
		            } else {
		                echo "失敗";
		            };
            } else {
	            //トークンがセットされていなかったときの処理
	            echo "reCAPTCHA認証エラー";
	            exit;
            };
     	?>
    </div>
</body>
</html>

尚、「Success」がfalse(失敗)で帰ってくるとエラーコードも付いてきます。エラーの内容は下記を参照してください。

サーバー側検証の実装方法v3の例

POSTされてきたトークンとをAPIに渡して結果を得る点はv2と同じですが、実装方法が異なります。下記に実装例を記載します。

検証用のAPIはv2と同じ下記となります。トークンとシークレットキーをパラメータとして付与し問い合わせます。

https://www.google.com/recaptcha/api/siteverify?secret=シークレットキー&response=トークン

v3の検証結果得られる情報は下記です。v3の結果にはスコアとアクションが追加されます。

{
  “success”: true|false,  //trueだと照合OK、falseだとNG
  “challenge_ts”: timestamp,  //タイムスタンプ
  “hostname”: string, //ドメイン
“score”: 0.0~1.0, //v3の検証結果スコア
“action: string”, //v3のアクション名
  “error-codes”: […] //success がfalseだった場合のエラーコード
}

クライアント側の実装は、先述の「reCAPTCHAv3」→「より細かく制御したい場合の設定方法」のコードを使っています。そちらを参照してください。

v3のサーバー側のコードですが、「score」が自分の決めた閾値より上であるかや、「action」名がマッチするかなどもチェックにいれると、より強固にチェックすることが出来ます。(トークンのチェックだけでも良いと思います)

下記にv3のサーバー側コード実装例を記載します。

//Submitクリック後サーバー側の検証
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
</head>
<body>
	<div>
		<?php
			//APIのURLを変数にセット
			$url = 'https://www.google.com/recaptcha/api/siteverify';
			//秘密キーを変数にセット
			$secretKey = '秘密キー';
			//クライアントから「g-recaptcha-response」でPOSTされてきたトークンを変数にセット
			$token = htmlspecialchars($_POST[ 'g-recaptcha-response' ], ENT_QUOTES, 'UTF-8');
			//アクション名を変数にセット(クライアント側で設定したものと同じもの)
			$actionName = 'アクション名';
			//スコアがいくつ以上だとOKにするか変数にセット
			$scoreThreshold = 0.5;

			//トークンがセットされているか判定
			if (isset($token)){
			//トークンがセットされていた場合の処理
				//APIのURLに秘密キーとトークンをパラメータ指定したAPI問合せ用URLを生成
				$fullurl = $url . '?secret=' . $secretKey . '&response=' . $token;
				//APIへ問合せし、結果を格納(curlで取得して来ても良い)
				$responseAry = @file_get_contents($fullurl);
				//取得したものをjson形式に変換
				$resultJson = json_decode($responseAry, true);
				//取得した各値を個別の変数にセット
				$resultSuccess = $resultJson["success"];
				$resultChallenge_ts = $resultJson["challenge_ts"];
				$resultHostname = $resultJson["hostname"];
				$resultScore = $resultJson["score"];
				$resultAction = $resultJson["action"];

				//successがtrue且つ、actionがマッチ且つ、scoreが閾値異常だったらOKの処理を実行
				if ($resultSuccess === true && $resultScore > $scoreThreshold && $resultAction === $actionName) {
					//successがtrue且つ、actionがマッチ且つ、scoreが閾値異常だったらOKの処理を実行
					echo "サーバー側の検証結果OK";
				} else {
				 //検証NGだった時の処理
					echo "サーバー側の検証結果NG";
				};
			} else {
			//トークンがセットされていなかった場合のエラー処理
				echo "reCAPTCHA認証エラー : " + ;
				exit;
			};
		?>
	</div>
</body>
</html>

「Success」がfalse(失敗)で帰ってきた時のエラーコードについては下記を参照してください。

スポンサーリンク

WordPressプラグインでログイン出来なくなったときの対処

WordPressでreCAPTHAのプラグインを導入後、管理画面にアクセスできなくなった場合の対処法です。エクスプローラーなどで「wp-content\plugins」にアクセスしたら、対象プラグインのフォルダをリネームします。名前の前にアンダースコア「_」を一つつければよいと思います。これで管理画面にアクセスするとログインできます。ログイン出来たらリネームしたフォルダ名を元に戻して、原因究明してください。

タイムアウト

reCAPTCHAは2分経つと時間切れとなります。時間が切れると「私はロボットではありません」確認の場合は下記のように表示されます。

私はロボットではありません確認お時間切れ

クッキーについて

reCAPTCHAを使用するにはクッキーが有効になっている必要があります。詳しくは下記を参照。

バッジを非表示にする方法

バッジ(v2のinvisibleとv3)を非表示にする場合は、サイト内にreCAPTCHAを利用していることを明示する必要がります。下記に表記方法が書いてあります。