ブログBlog

Google reCAPTCHA v3認証の導入方法

今回は、弊社でお問い合わせフォームを入れる際には、必ずお客様へ設定頂く事をお薦めしている「Google reCAPTCHA v3認証」の導入方法について、記載させて頂きます。

1.Google reCAPTCHA v3とは

Google reCAPTCHA v3とは、お問い合わせフォームや各種入力フォームにおいて、AIがページ内での行動をスコアとして算出する事で、人の手による入力によるものなのか、bot(プログラム)による入力によるものなのかを判断する機能です。お問い合わせフォームなどで、botと判断されると送信ができませんので、スパム対策になります。
v2では、人の手によって自分が、botではない事を証明していましたが、v3では、AIが判断するため、そのような作業が必要なくなりました。

Google reCAPTCHA v2の確認画面

Google reCAPTCHA v2の確認画面

一方でデメリットもあります。稀になのですが、人の手による入力にも関わらず、bot(プログラム)による入力と判断され、お問い合わせフォームなどで送信できないような場合が稀に発生します。そのような場合には、AIのスコアによる算出時の判断基準の「閾値」を調整し、対応する場面が出て来る場合がございます。
(閾値の調整については別途記載します。)
ただし、だからといって何も対応をしなかった場合には、犯罪者から狙われ、関係のない第三者へのスパム送信の攻撃元になってしまう可能性がありますので、注意してください。また、そうなった場合には、レンタルサーバー会社からフォームメール送信機能を止められ、お客様からのお問い合わせフォームを受け取れなくなる可能性があります。

2.Google reCAPTCHA v3の設置の準備

Googleアカウントを持っていない方は、Googleアカウントをまずは取得して下さい。
本掲載では、Googleアカウントを持っている事を前提で記載させていただきます。
まず最初に、Google reCAPTCHA認証のコンソールサイトにアクセスし、v3の「サイトキー」と「シークレットキー」を取得していきます。

①Google reCAPTCHA認証のコンソールサイトにアクセスします。

https://www.google.com/recaptcha/about/

Google reCAPTCHA認証のコンソールサイト

Google reCAPTCHA認証のコンソールサイト

→ 上部にある「v3 Admin Console」をクリックします。
(Googleアカウントでログインしていない場合には、Googleアカウントでのログイン画面になりますので、ログインして下さい。)

②Google reCAPTCHAのコンソール画面が開きます。

Google reCAPTCHA v3のコンソール画面

Google reCAPTCHA v3のコンソール画面

→上部にある「+」ボタンをクリックします。

③Google reCAPTCHAのサイト情報の登録画面が開きます。

Google reCAPTCHAのサイト情報の登録画面

Google reCAPTCHAのサイト情報の登録画面

■ラベル
管理用の任意の文字列を入れて下さい。
■reCAPTCHAタイプ
reCAPTCHA v3を選択してください。
■ドメイン
reCAPTCHA v3を使うサイトのドメインを入力します。
■オーナー
既に入っているGoogleアカウント以外にあれば、登録します。
■reCAPTCHA利用条件に同意する。
同意しないと利用できません。
■アラートをオーナーに通知する。
アラートがあった場合に通知してくれますので、チェックします。

→ 最後に「送信」ボタンを押下します。

④Google reCAPTCHAのサイト情報の登録完了画面が開きます。

Google reCAPTCHAのサイト情報の登録完了画面

Google reCAPTCHAのサイト情報の登録完了画面

「サイトキー」と「シークレットキー」が表示されます。この2つのキーを使用します。

3.Google reCAPTCHA v3をサイトに設置

ここでは、設置方法についてそれぞれ記載していきます。
Wordpressをお使いのお客様で、フォームを使ったプラグインをご使用の方と、独自にコーディングする場合とで記載します。

①Wordpressのメジャーなお問い合わせフォームのプラグイン「Contact Form 7」の場合
②Wordpressのメジャーな会員サイト用のフォーム「WP Members」の場合
③独自にコーディングする場合

3.1.Wordpressのメジャーなお問い合わせフォームのプラグイン「Contact Form 7」の場合

「Contact Form 7」は、Google reCAPTCHA v3認証との連携機能を持っていますので、取得した「サイトキー」と「シークレットキー」を該当の位置に設定するだけです。

①「お問い合わせ」→「インテグレーション」を選択します。

Contact Form 7のインテグレーション画面

Contact Form 7のインテグレーション画面

②取得した「サイトキー」と「シークレットキー」を入力し、「変更を保存」ボタンを押下します。

Contact Form 7にreCAPTCHA v3認証を設定

Contact Form 7にreCAPTCHA v3認証を設定

以上で完了です。

3.2.Wordpressのメジャーな会員サイト用のフォーム「WP Members」の場合

「WP Members」も、Google reCAPTCHA v3認証との連携機能を持っていますので、取得した「サイトキー」と「シークレットキー」を該当の位置に設定するだけです。

①「設定」→「WP Members」→「WP Membersオプション」タブ→「その他の設定」の「登録時用のCAPTCHAを有効化」で、「reCAPTCHA v3」を選択し、「更新設定」ボタンを押下します。

WP Members 登録時用のCAPTCHAを有効化

WP Members 登録時用のCAPTCHAを有効化

②「登録時用のCAPTCHAを有効化」で、「reCAPTCHA v3」を有効にすると、「CAPTCHA」タブが現れますので、取得した「サイトキー」と「シークレットキー」を入力し、「reCAPTCHAを更新」ボタンを押下します。

WP Members Google reCAPTCHA v3認証を設定

WP Members Google reCAPTCHA v3認証を設定

以上で完了です。

3.3.独自にコーディングする場合

HTMLでの実装は、reCAPTCHA の API(ライブラリ)を読み込み、API のメソッドを使ってトークンを取得します。そしてフォームを使ってPOSTメソッドなどで、サーバーへトークンを送信する形になります。
ただし、取得したトークンの有効期限は、2分間なので、送信ボタンをクリックした場合にトークンを取得する形にします。

PHPの試験用サンプル

 

以上、皆さまの参考になれば幸いです。

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥99,800!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

次の記事

Google Analyticsの設定方法
MENU