Invisible reCAPTCHAでreCAPTCHA v3のバッジを表示

カテゴリー: タグ:


WEBサイトにお問い合わせフォームを設置していると、会社・個人のメールアドレスを公開することなく問い合わせに対応することができるのでとても便利ではありますが、同時にスパムメールも送られることがあり困ることも多いことでしょう。
そんな時に スパム対策としてよく使われているのが Google reCAPTCHA です。

reCAPTCHAを問い合わせフォームなどに設置することで、スパムメールをぐっと減らすことが期待できます。
reCAPTCHAにはバージョンがあり、今回は最新の v3 の設定方法をご紹介します。

※サイトはwordpress(wp)を採用し、お問合せフォームはプラグイン【Contact Form 7】を使用している場合の設定方法です。





reCAPTCHAとは

このような画像を見たことや、文言に合わせて作業をしたことはありませんか?



これがreCAPTCHAです。
バージョンによって表示や作業内容が異なりますが、最新のv3は、ユーザー側の操作を必要としない認証方式になっており、ユーザーの操作を解析し人間らしくない動きをするとbotとして判定され、 人の入力のみを受け付ける仕組みとなっています。



プラグインInvisible reCaptcha for WordPressをインストール

wordpressの管理画面、プラグインの新規追加で Invisible reCaptcha for WordPress を検索しインストールし、 有効 にします。
※似たような名前のプラグインもあるので気を付けて下さい。




プラグインを入れただけではこのように画面の右下に設置され、折角のデザインの邪魔をしてしまいます。




表面上必要としているのはお問合せ画面のみですので併せて設定します。
wordpressの管理画面、お問合せを開き、 インテグレーションのセットアップ をクリックします。





GoogleのreCAPTCHA登録

reCAPTCHAを設定するにはgoogleのreCAPTCHA登録が必要になります。
Googleの CAPTCHAページ を開き、reCAPTCHAの管理画面でウェブサイトを登録し、 Site KeyとSecret Keyを取得 します。

・Google reCAPTCHAページを開く
・画面右上の+マーク(新規作成)をクリック
・全項目を入力
  ・ラベル=reCAPTCHAのラベル名
  ・reCAPTCHAタイプ=reCAPTCHA v3を選択
  ・ドメイン=設置するサイトのURL
  ・オーナー=ご自身のメールアドレス
  ・reCAPTCHA利用条件に同意する=読んでチェック
  ・アラートをオーナーに送信する=送信希望ならチェック
・送信ボタンをクリック




画面右上にある歯車の設定マークをクリックすると、サイトキーとシークレットキーが表示されます。
この2つのキーをプラグインに設定しますのでメモに残すか、画面自体をそのままキープして下さい。





プラグインInvisible reCaptcha for WordPressの設定

wordpressの管理画面、設定にある Invisible reCaptcha を開いて設定。

Settings

・Your Site Key=GoogleのreCAPTCHAで取得したサイトキー
・Your Secret Key=GoogleのreCAPTCHAで取得したシークレットキー
・Language=Japanese(言語)
・Badge Position=Inline(アイコンの設置場所)




Contact Forms

・Enable Protection for Contact Form 7=チェックする





最後の設定と確認

wordpressの管理画面、お問合せの インテグレーション を開く。
reCAPTCHAの キーを削除 をクリック




これで全て終了です。
お疲れさまでした。
あとはお問合せページを開いて、設置できているかの確認を行って下さい。


品川区の武蔵小山、目黒不動前、五反田駅、目黒駅近隣にて、web制作を軸にひとり稼業にて活動しております。
・web制作の学校に通っているけど実は授業についていけてない
・html、cssを独自で勉強しているけど基本的なことを理解していない
・これからwebの世界に入りたい
・委託して作成したホームページを修正したい
・webサイトをイチから作り直したい
等など、ご相談、お困りのことがございましたらお気軽にご連絡ください。
個々に対応いたします。