自作の問い合わせフォームにreCAPTCHAを設定する方法

Googleのセキュリティのためのサービス「reCAPTCHA」について、例えばWordPressの機能だけ利用している場合はプラグインがあったりもしますが、WordPressをベースにしているとしても、自作のフォームがあれば、その部分についてはコーディングをして設置をしなければなりません。その方法を検索して調べると、記事は出てきましたが私の環境では動くものが見つからなかったので、うまく設置できた方法を残しておきます。

reCAPTCHAとは

reCAPTCHA

ホームページを閲覧した人から問い合わせを受ける方法として、もちろん電話番号の明示は望まれますが、それとは別に入力フォームの設置も望まれます。電話より気軽だと思う人も多いですし、問い合わせる人にとって電話代がかからない方法でもあります。

ただ、何も対策をせずにいると、お客様ではなく、お客様になってほしい人からのロボットを使った問い合わせや、場合によってはただの悪質なアクセス（いわゆるスパム）が増えてしまいます。それに対抗する手段として有効な無料サービスがGoogleの「reCAPTCHA」です。

何をするかというと、ver.2では、いくつかの画像の中から、特定の物が写っているものを選んでくださいという形でした。見たことがある人も多いのではないでしょうか？

現在はver.3が選べて、ver.3では機械的にロボットかどうかを判定してくれます。こちらの方がセキュリティが高いそうです。画像はロボットでも適当に選べば当たることもありますからね。パスワードを打ち破るのより簡単そうです。今はAIによって画像に何が表示されているかを当てる技術も進歩しています。

話がそれましたが、このサービス、WordPressを利用している時点で導入をおすすめします。WordPressは世界で60％以上、日本国内では80％以上のシェアを誇っているので、スパムに狙われやすい状況にあります。勝手にサイトの内容を変えられてしまうということも起こり得ます。という話を聞いて心配になっている方もいるかと思いますが、手口は簡単で、パスワードを打ち破るというものが多いそうです。「reCAPTHCA」は、WordPressのログイン画面も守ってくれるため、これを入れれば安心です。その目的だけならばプラグインで簡単に設置できるのですが、自前でフォームを設置している場合は、そこに対してはコーディングを施す必要があります。

recaptchaのキー発行

recaptchaのサイトにいき、「v3 Admin Console」を押します。

はじめて作成する場合はすぐに下の画面が表示されると思いますが、すでにサイトを作っている場合は、その前に出てくる画面で「＋」ボタンを押すと次の画面が表示されます。
ラベルは、登録するサイトを示す分かりやすい名称を入れます。
reCAPTCHAタイプのv2は、いくつかの画像の中から該当するものを選んでくださいというもので、v3よりも打ち破られるリスクも高いと言われているので、v3を選ぶのが良いと思います。
登録したいサイトのドメイン「例：example.com」を入力してください。

送信すると、キーが発行されます。

上の画面を閉じた後は、最初の画面で再度「v3 Admin Console」を押して、該当のサイトを選んだ後、設定ボタンを押すとキーが表示されます。

設置方法

やり方をGoogle検索で探したらちょっとてこづったのですが、Googleのサポートページを見て、さらにひとひねりしたら動きました。
サポートページでは大きく、「簡単に設置する方法」と「カスタマイズしたい場合」で分かれているのですが、その二つそれぞれで案内されている方法の組み合わせで動きました。具体的には、「簡単に設置する方法」ではreCAPTHCAのAPIをまるっと読み込むだけ、となっているのですがそれでは動かなくて、APIの読み込みは発行したサイトキーを指定するやり方の方の記述を採用することで動いています。

１）HTMLのheadタグ内

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

reCAPTCHA_site_keyの部分は、発行したサイトキーに置き換えてください。記述箇所はサポートページで指定されてないと思われますが、この内容の場合はheadタグ内が無難だと思います。

２）HTMLの送信ボタン

<button class="g-recaptcha" data-sitekey="reCAPTCHA_site_key" data-callback="onSubmit" data-action="submit">Submit
</button>

属性と値はそのままコピペです。

３）JavaScript

 <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   }
 </script>

demo-formの部分は、form要素につけたid名に置き換えてください。

設置のコーディング方法は以上です。

reCAPTHCAのロゴ掲載について

特にCSSをいじらなければ、右下にreCAPTCHAのロゴが表示されると思います。それが正しく表示されるかどうかが、動いているかどうかの確認にもなります。

ただ私が設置したページでは、場所をどう移動しても、問い合わせフォームに入力する際に邪魔になり得そうだったので、消しても良いかを確認しました。

reCAPTHCAのロゴを消す場合について

こう記述すればよいと書かれています。

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

これに従い、当サイトの問い合わせフォームでは、

セキュリティのためreCAPTCHAを利用しています。
Googleのプライバシーポリシーと利用規約が適用されます。

と送信ボタンの近くに掲載しています。

まとめ

スパムからサイトを守るためのGoogleのreCAPTHCAサービス設置方法について、ご案内しました。
こういったことまで気配りできる制作会社を探しましょう。ぜひ当方にご相談ください！