「reCAPTCHA」の導入方法を詳しく解説【最新のv3に対応】

こういった悩みにお答えします。

非是、最後までご覧ください。

導入方法の前に「reCAPTCHA」について解説します。

「知ってるよ」という方は、「reCAPTCHA v3」の導入方法の解説にお進み下さい。

「reCAPTCHA」とは、簡単に言うと、ロボットによるWebサイトへの攻撃を防ぐためにgoogleが提供しているサービスです。

reCAPTCHAの設置例と発動場面を紹介します。

reCAPTCHA v3（以下v3とする）

導入例

下記画像はWordPress管理画面への「ログインページ」です。

このタイプの「reCAPTCHA」は下記画像のように、白色の部分にカーソルを乗せると左側にスライドして全てが表示されます。

発動例

※①➡️②➡️③の流れて進めていきログインします。

reCAPTCHA v2 チェックボックス（以下v2 チェックボックス）

導入例

画像のダウンロードサイトです。

発動例

reCAPTCHA v2 非表示（以下v2 非表示）

導入例

僕のサイトの「お問い合わせフォーム」です。

v2 非表示も下記画像のように、白色の部分にカーソルを乗せると左側にスライドして全てが表示されます。

「見た目」は「v3」と区別がつきませんが、「reCAPTCHAが発動した場面」を見て頂くことで違いが分かると思います。

発動例

紹介してきた3つの中でも最新が「v3」で、「チェックを入れたり、画像による診断を行わず」にロボットか人間かを自動で判断してくれます。

今回は「v3」の導入方法をベースに解説しつつ「v2 チェックボックス」と「v2 非表示」についても触れていきます。

それでは「reCAPTCHA」の導入方法を解説していきます。

公式サイトにアクセスします。

Google Cloud

reCAPTCHA website security and fraud protection reCAPTCHA is bot protection for your website that prevents online fraudulent activity like scraping, credential stuffing, and account creation.

「v3 Admin Console」を選択します。

「v3 Admin Console」へアクセスしました。

【注意】先に今回の解説では触れない部分についてお伝えしておきます。

基本的には「v3」を導入するであろうということと、僕自身がまず使うことがないであろうということで重い腰が上がりませんでした🙇‍♂️

「新しいサイトを登録」していきます。

送信を除く赤枠の部分を全て埋めます。

「v3」の記入例を載せておきます。

※「reCAPTCHA タイプ」以外の項目は、「v3」も「v2 チェックボックス」も「v2 非表示」も全て同じです。

「送信」すると「サイトキー」と「シークレットキー」が表示されます。

この「サイトキー」と「シークレットキー」を、例えばお問い合わせフォームプラグインやセキュリティ系プラグインに入力することで「reCAPTCHA」を導入できます。

「reCAPTCHA」の導入方法以外について紹介します。

「設定」に移動する方法を紹介します。

各reCAPTCHAの「設定」画面です。

※「新しいサイトを登録する」際にはなかった項目も追加されています。

「アナリティクス」に移動する方法を紹介します。

各reCAPTCHAの「アナリティクス」の画面です。

今回は以上です。