Site icon アラコキからの Raspberry Pi 電子工作

「お問い合わせ」 reCAPTCHA インテグレーションのセットアップ

WordPress Twenty Seventeen
Contact Form 7
メールフォームの スパム対策
 
Contact Form 7をバージョン 5.1へとアップデートすると、reCAPTCHA v3へ変更してくださいと表示される。
 
 
以下に、Contact Form 7の reCAPTCHA を【v2→v3】に変更した方法を記録。
 

 

スポンサー リンク

 

 
 
Googleは2018年10月29日、
人間とbotを識別するための新API「reCAPTCHA v3」を公開した。
従来のreCAPTCHAは、
・ゆがんだ文字を読み取ったり、
・チェックボックスにチェックを入れるなど、
ユーザーによる操作が必要だったが、v3はこれら操作が不要になった。
 
V2からV3に更新するメリット。
①.「私はロボットではありません」のチェックが不要になる
②.reCAPTCHA タグの挿入が不要になる
 
 
 
 
スポンサー リンク
 
 
 
1. 【 reCAPTCHA 】のインテグレーションのセットアップ
 
Contact Form 7をバージョン 5.1へとアップデートすると、「お問い合わせ」の横に赤丸が表示され、「インテグレーション」の中に【 reCAPTCHA 】のインテグレーションのセットアップが表示される。
 
上部には、「reCAPTCHA v3 と v2 の API キーはそれぞれ別のものです。」との記述がある。
 
「 reCAPTCHA (v3)」の箇所をクリックしてみると、Contact Form 7の reCAPTCHA (v3)の説明画面になる。
 
「 MyreCAPTCHA 」の箇所をクリックすると、reCAPTCHAにログインされ、reCAPTCHA v3のAPI keyを取得する画面が表示される。
 
v2のAPI keyは取得済みだが v3は無いので、新規にサイトを登録する。
・[Label]:わかりやすい名前を入力(今回はドメイン名+reCAPTCHAと入力)
・[Choose the type of reCAPTCHA]:「reCAPTCHA v3」を選択
・[Domains]:ドメイン名を入力(複数ある場合は改行して入力)
・[Accept the reCAPTCHA Terms of Service.]:チェックを入れる
・[Send alerts to owners]:チェックを入れる
最後に「Register」をクリックする。
 
reCAPTCHA v3の「Site key(サイトキー)」と「Secret key(シークレットキー)」が生成されるので、コピペして保存しておく。
 
「お問い合わせ」の「インテグレーション」画面に戻り、「インテグレーションのセットアップ」をクリックする。
 
「サイトキー」と「シークレットキー」を入力する画面になる。
 
先ほど保存して置いたそれぞれのキーを入力し、「変更を保存」をクリックする。
 
【 reCAPTCHA 】のインテグレーションのセットアップが完了するので、右上にある「Contact Fom 7 の設定を検証する」をクリックする。
 
登録されているコンタクトフォームの数が表示されるので、ここをクリックする。
 
「設定検証が完了しました。」が表示される。
 
【 reCAPTCHA 】のインテグレーションが完了し、「お問い合わせ」横の赤丸が消える。
 
 
 
2. コンタクトフォームの編集
 
従来のコンタクトフォームには、[reCAPTCHA] タグを挿入する必要があった。
 
従来のコンタクトフォームでは、「私はロボットではありません」にチェックが必要だった。
 
v3のコンタクトフォームには、[reCAPTCHA] タグが不要になったので、削除する。
 
 
スポンサー リンク
 
 
3. 動作確認
 
v3のコンタクトフォームには、「私はロボットではありません」が表示されない。
 
問い合わせが、正常に送信できた。
 
 
 
4. 【 プライバシー・利用規約 】のマークが表示される
 
【 プライバシー・利用規約 】マーク(バッジ)。
 
reCAPTCHA v3を適用すると、すべての画面の右下に【 プライバシー・利用規約 】のマークが表示されるようになる。
 
これが、「ページのトップへ戻る」ボタンと重なる場合がある。
 
スマホでの【 プライバシー・利用規約 】マークの表示。
 
但し、AMP画面では表示されない。
 
 
 
5. reCAPTCHAの「プライバシー・利用規定」のマークを消す方法
 
問い合わせフォーム用の固定ページ』を編集し、テキストタブで下記のhtmlソースを追記する。
This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy" target="_blank">Privacy Policy</a> and
    <a href="https://policies.google.com/terms" target="_blank">Terms of Service</a> apply.
 
問い合わせフォーム用の固定ページを編集した例:テキスト画面。
 
問い合わせフォーム用の固定ページを編集した例:ビジュアル画面。
 
マーク(バッジ)を消すCSSの追加。
外観」→「カスタマイズ」→「追加CSS」にて、テーマに以下のCSSを追加して「公開」ボタンをクリックする。
.grecaptcha-badge {
    opacity: 0;
}
 
テーマにCSSを追加した例。
 
reCAPTCHAの「プライバシー・利用規定」のマークが消えた。
 
「ページのトップへ戻る」ボタンだけになった。
 
変更後の問い合わせフォーム。
2つのリンクが自動的に設定されている。
 
「Privacy Policy」をクリックしたときのリンク先画面。
 
「Terms of Service」をクリックしたときのリンク先画面。
 
確認のために送信すると、エラーが出た。
 
再度送信すると、OKになった。
 
 
 
6. reCAPTCHA V3 を 問い合わせページのみで読み込む
 
「reCAPTCHA (v3)」を Contact Form 7 に設定すると、
・全ページにJSファイルが読み込まれてしまう。
・ページの表示速度が遅くなる。
 
この対策として、
問い合わせフォームが設置されているページのみに、
「reCAPTCHA (v3)」を読み込ませる。
 
functions.php に、以下のコードを追記する。
function load_recaptcha_js() {
 if ( ! is_page( 'xxxxx' ) ) {
  wp_deregister_script( 'google-recaptcha' );
 }
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js' );
上記コード内の( 'xxxxx' )は、問い合わせページ(固定ページ)のスラッグ
 
固定ページで、スラッグを表示させるには、表示オプションで「スラッグ」にチェックを入れる。
 
チェックを入れると、固定ページの最下部に「スラッグ」が表示されるので、分かりやすい英文字に変更する。
 
上手くいったかどうかを確認するには、マーク(バッジ)を消すCSSを削除する。と、問い合わせページ(固定ページ)にのみ『マーク(バッジ)』が表示され、その他のページには『マーク(バッジ)』は表示されなくなる。
 
マーク(バッジ)を消すCSSは、設定しない方が良いらしい。
 
 
以上。
(2019.01.02)
 

 

スポンサー リンク