こんにちは。EC-CUBEを使ったECサイト構築のプロ集団“EC-CUBER”の波多野です。

ECサイトへの不正ログイン、商品買い占め、レビューの不正投稿等の不正アクセスは、ECサイトの運営者にとっては大きな悩みの種になっていることと思います。
不正アクセスへの対策方法にも様々な方法がありますが、今回はBotへの対策方法として、reCAPTCHAを導入する手順について説明したいと思います。

reCAPTCHAとは何か?

まず最初に、reCAPTCHAについて説明したいと思います。

Webサイトで、以下のような表示を見たことはないでしょうか?

  • グニャグニャに歪んだ英単語の画像と一緒に「表示されている文字を入力してください」というメッセージが表示される(★1)
  • 自動車や自転車、船などの画像と一緒に「自転車の画像を全てクリックしてください」と表示される(★2)
  • 画像の一部がジグソーパズルのピースのように外れた画像と一緒に「上のジグソーパズルを解いてください」と表示される

これらはすべて、人間とコンピュータを区別するためのプログラム CAPTCHA によるものです。
(ちなみに、CAPTCHA は “completely automated public Turing test to tell computers and humans apart” の略で、「コンピュータと人間を区別するための完全に自動化された公開チューリングテスト」を意味します)

中でも、Googleによって無料で提供されているものは reCAPTCHA と呼ばれます。

現在提供されている reCAPTCHA のバージョンには、以下の3つがあります。

  • v2 : 「私はロボットではありません」というチェックボックスをクリックした時点で、Botの可能性がある場合は上記★2の問題を表示して検証する
  • v2 Invisible : フォームの送信ボタンをクリックした時点で、Botの可能性がある場合は上記★2の問題を表示して検証する
  • v3 : フォームの送信ボタンを押すまでのマウスポインタの動きなどを見て、0.0 ~ 1.0 のスコアでBotかどうかを判定する

(他にv1は★1の問題を表示するものですが、こちらの提供は終了しています)
特にv3はユーザにアクションを求めないため、ユーザビリティを損なうことなく導入することが可能です。

以降、EC-CUBE 2系のお問い合わせページにreCAPTCHA v3を導入する手順を説明したいと思います。

reCAPTCHA導入のために必要なこと

reCAPTCHAの導入のために必要なことは、以下の通りです。

  • reCAPTCHA管理画面でサイトの登録
  • ソースコード修正(テンプレートファイル)
    ・reCAPTCHA APIのスクリプト読み込み
    ・トークンが入るinputタグの設置
    ・フォームをsubmitした際の処理の記載
  • ソースコード修正(PHPファイル)
    ・reCAPTCHA APIにリクエストを送信し、エラーの場合の処理の記載

サイトの登録

まず、ブラウザで https://www.google.com/recaptcha/admin/create にアクセスし、サイトの登録をしてください。
ここで、reCAPTCHAタイプは「reCAPTCHA v3」を選択、ドメインにはreCAPTCHAを導入するEC-CUBEのドメイン名(ローカル環境の場合はIPアドレス)を入力してください。

登録後、「サイトキー」と「シークレットキー」が表示されますので、どこかに控えておいてください(後で管理画面から参照することもできます)。

ソースコード修正(テンプレートファイル)

これより、EC-CUBEのソースコードを修正していきます。
まずテンプレートファイル側になります。

修正するファイルは、 data/Smarty/templates/default/contact/index.tpl です。
(※ スマートフォン版も公開している場合は、スマートフォン用のテンプレートの修正を忘れないようにご注意ください)

reCAPTCHA APIのスクリプト読み込み

以下のコードを、テンプレートの上部に記載してください。
「《reCAPTCHAサイトキー》」の部分は、サイト登録の際に表示されていた文字列と置き換えてください。

<script src="https://www.google.com/recaptcha/api.js?render=《reCAPTCHAサイトキー》"></script> 

フォームをsubmitした際の処理の記載

以下のコードを、先ほどののscriptタグの直後に記載してください。
「《reCAPTCHAサイトキー》」の部分は、サイト登録の際に表示されていた文字列と置き換えてください。

<script>
    function onSubmit(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
          grecaptcha.execute("《reCAPTCHAサイトキー》", {action: 'submit'}).then(function(token) {
            var recaptchaToken = document.getElementById('recaptchaToken');
            recaptchaToken.value = token;
            document.getElementById('form1').submit();
          })
        })   
    }
</script>

また、以下の通り、formタグのonsubmit属性を指定してください。

<form name="form1" id="form1" method="post" action="?" onsubmit="onSubmit(event)">

トークンが入るinputタグの設置

トークンとは、reCAPTCHA APIへのリクエスト送信後、結果として返る文字列(トークンと呼ばれます)を、フォームの各入力値と一緒に送信する必要があります。

formタグ内に、以下のinputタグを追加してください。

<input type="hidden" name="recaptchaToken" id="recaptchaToken" />

ソースコード修正(PHPファイル)

APIにリクエストを送信し、エラーの場合の処理の記載

修正するファイルは、data/class_extends/contact/LC_Page_Contact_Ex.php です。
「《reCAPTCHAシークレットキー》」は、サイト登録の際に表示されていた文字列と置き換えてください。
Botが疑われる場合は、SC_Utils_Ex::sfDispSiteError でページ遷移エラーを表示するようになっています。

 /**
     * Page のアクション.
     *
     * @return void
     */
    public function action()
    {
        $mode = $this->getMode();
        switch ($mode) {
            case 'confirm':
                $verifyResult = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=《reCAPTCHAシークレットキー》&amp;response=' . $_POST['recaptchaToken']);
            
                $verifyResult = json_decode($verifyResult);
 $objSiteSess = new SC_SiteSession_Ex();
                if ($verifyResult->success == false) {
                    SC_Utils_Ex::sfDispSiteError(PAGE_ERROR, $objSiteSess);
                    SC_Response_Ex::actionExit();
                    break;
                }
            default:
                break;
        }
        parent::action();
    }

ページの表示

それでは実際にお問い合わせページを表示してみましょう。
右下にreCAPTCHAのバッジが表示されていることを確認してください。

人の手で確かめる限りはBotによるアクセスではないため、エラーになることはないと思われますが、この状態でBotによる送信はブロックされるようになっています。
さらに、reCAPTCHA v3ではAIによって人間の行動を学習する機能を持っているため、アクセス数が増えるにつれてスコアの精度は向上していきます。

以上、最後までご一読いただき、ありがとうございました。

弊社ではB2Bサイトの構築を検討しているお客様のお悩みを解決すべく上流の検討からアプリケーション開発・インフラ構築・保守運用に至るまでAtoZでご支援をさせていただきます。詳細な構築事例は以下をご参照ください。

B2Bサイト構築に必要な機能例
 https://ec-cuber.jp/service/strong02/#

構築・カスタマイズ事例
 https://ec-cuber.jp/service/summary-case/

まずはお気軽に何でも以下までご相談ください。
ECサイト構築について
まずはお気軽に何でもご相談ください。
▼問合せフォームから相談してみる。
https://ec-cuber.jp/contact-us/
▼メールで相談してみる。
  sales_ec@ids.co.jp
▼電話で直接相談してみる。
  03-6386-3652
▼EC-CUBERは、総合的なECソリューションをご提供するEC-CUBEのプロフェッショナル集団です!
https://ec-cuber.jp/service/