リピストX（リピストクロス）マニュアル

- スタートガイド
- メーラー設定方法
- SHOPオープンチェックリスト
- 受注フロー

reCAPTCHA機能

reCAPTCHAについて

導入メリット

無料で簡単に導入可能
botからのスパム攻撃を防ぐ

reCAPTCHAはGoogleが提供するセキュリティーサービスで、Webサイトのお申し込みフォームなどでよく見かける「私はロボットではありません」のチェックボックスや、文字や画像を選ばせてスパムによる不正な投稿などを防ぐサービスです。

当システムで使用するreCAPTCHAは「reCAPTCHA v3」となります。

「reCAPTCHA v2」「reCAPTCHA Enterprise」は、動作保証の対象外となります。
必ず「reCAPTCHA v3」を使用してください。

「reCAPTCHA v3」はリスク分析エンジンによりサイト内でのユーザーの行動をスコアとして評価してボットかどうかを見分けるため、従来の「reCAPTCHA」とは異なり、ユーザーは歪んだ文字を見て入力欄に打ち込むなどといった面倒な操作をする必要が一切なく、自動で認証します。
チェックボックスなどの表示がないためユーザーにとっての負担も少なくなります。

なお、reCAPTCHAは1秒間に1000回及び1ヶ月に100万回以上のアクセスがある場合、reCAPTCHA Enterpriseを使用するか、フォームに登録して許可を取得する必要がありますので、詳細は下記URLを参照ください。
https://developers.google.com/recaptcha/docs/faq

LPフォームでreCAPTCHA稼働時の注意 LPフォームでreCAPTCHAを稼働させると、qualvaやBOTCHANなどの外部チャットツールが正しく動作しなくなる可能性がありましたが、特定のHTTPヘッダー情報を持ってアクセスした場合、提携先のチャットボットやRPAのbotが、reCAPTCHAに弾かれずに正しく動作することが可能となりました。

対応方法についてはこちらをご参照ください。

スパム攻撃の事例

reCAPTCHAを導入しなかったショップ様で、実際に起こったスパム攻撃の事例（クレジットマスターアタック）を紹介します。

■攻撃の内容
マイページのクレジットカード情報の登録・更新のページでbotを使用し、不正に入手した（あるいは架空の）カード情報を連続で大量に登録。
攻撃者はエラーになるかならないかでカードの有効性を判別する。

■ショップが受けた被害
大量のカード通信トランザクションが発生し決済代行会社へ「トランザクション処理料」の支払い義務が発生した。

クレジットマスターアタックは、ショップの売上規模に関係なく大量に発生するケースが多くなっています。
1日で数万件のトランザクションが発生することも珍しくありません。
また、トランザクション処理料の支払いだけではなく、カード会社、決済代行会社から取引を停止されることもあります。

reCAPTCHA v3の導入方法

導入するには、Googleアカウントが必要です。
Googleアカウントを持っていない場合は、先にGoogleアカウントを作成してください。

reCAPTCHA v3 サイトキーとシークレットキーの取得

『サイトキー』と『シークレットキー』は、reCAPTCHAサイトより取得してください。
https://www.google.com/recaptcha/admin/create

サイトキーとシークレットキーの取得は下記画像を参考にしてください。
※取得方法はGoogleの仕様変更によって取得方法が変わる場合がございます。その場合はGoogleにお問い合わせください。

管理画面の設定

基本情報管理＞サイト管理設定＞51.reCAPTCHA（セキュリティ機能）で設定を行います。
reCAPTCHAの登録で発行された『サイトキー』と『シークレットキー』及びその他の設定を行ってください。

STEP1.　 API連携設定

設定を行う場合は「有効」にチェックを入れてください。
reCAPTCHAを非稼働にする場合は、「無効(デフォルト)」にチェックをして登録してください。

STEP2.　 reCAPTCHAの設定

reCAPTCHAより取得した『サイトキー』と『シークレットキー』を登録してください。

●「人間性スコア閾値」の設定
人間性スコアとは、アクセスに対する人間らしさのスコア値を指します。
reCAPTCHAの管理コンソールよりreCAPTCHAスコアの分布状況を確認いただき変動してください。
スコアに関しましてはreCAPTCHA v3ドキュメントを参照ください。
※入力可能範囲は「0.1 ～ 1.0」となり、はじめは0.9を設定することを推奨いたします。

スコアが低いユーザーの場合はログインできなかったり購入できなかったりしますので、そのようなお問い合わせが多々あった場合は、運営者様のご判断にてスコアの数値を下げて設定してください。
なお、スコアを下げることによってセキュリティー度は低下します。

STEP3.　キャプチャ有効ページの設定

reCAPTCHAを設置するページは「有効」にチェックしてください。

STEP4.　全ての設定が完了したら登録を押下

reCAPTCHAの設定はこれで完了です。

注意登録後や設定変更後はシステム管理＞その他システム設定より「Smartyテンプレートキャッシュ削除」を削除してください。
※キャッシュ削除しない場合は、正常に動作しない場合がございます。

設定後の画面表示

正常に設定が完了されると、設定した有効ページに右下に「reCAPTCHA」のアイコンが表示されます。
※イメージ画像はスマートフォンページです。

会員登録ページ	ログインページ

購入時カード情報入力画面	マイページのカード情報登録/変更画面

LPフォーム
LPフォームでreCAPTCHA機能を有効にする場合、テンプレートファイルの編集が必要です。こちらを参照し、ご対応ください。リピスト Chat起動時にはreCAPTCHAマークはチャット画面の裏に隠れますが正常に稼働しています。 ※reCAPTCHAをLPフォームで有効にしている場合

正常に動作しない場合、以下の設定をご確認ください。
・管理画面の設定
・Smartyテンプレートキャッシュの削除

reCAPTCHAの認証判定

全ての情報が入力された後、購入内容を確認するボタン押下時にreCAPTCHAの認証判定を行います。
reCAPTCHAの認証でNGとなった場合、「reCAPTCHAの照合に失敗しました。詳しくはショップまでご連絡ください。」と表示されます。

テンプレートファイルの編集

注意 ※ご編集いただく際は必ずバックアップをお取りください。
※ご編集後は必ず動作確認を行ってください。

LPフォームでreCAPTCHA機能を有効にする

LPフォームでreCAPTCHA機能を有効にする場合は、下記を参考にご対応ください。

■編集対象テンプレートファイル

pc/templates/【ユーザーテンプレート】/shopping/lp.tpl
pc/templates/【ユーザーテンプレート】/shopping/lp_ups_dialog.tpl
smp/templates/【ユーザーテンプレート】/shopping/lp.tpl
smp/templates/【ユーザーテンプレート】/shopping/lp_ups_dialog.tpl

■変更箇所

pc/templates/【ユーザーテンプレート】/shopping/lp.tpl

■29行目付近の記述を編集してください。

    <div class="c-contents-header">
        <h2 class="c-contents-header__title">購入手続き</h2>
    </div>
    <div class="c-contents-body">
        <form name="form1" id="form1" method="post" action="<!--{$smarty.server.SCRIPT_NAME}-->" class="js-efo">
            <!--{* 商品選択 *}-->

↓以下に変更する↓

    <div class="c-contents-header">
        <h2 class="c-contents-header__title">購入手続き</h2>
    </div>
    <div class="c-contents-body">
        <form name="form1" id="form1" method="post" action="<!--{$smarty.server.SCRIPT_NAME}-->" class="js-efo js-lp-recaptcha-form">
            <!--{* 商品選択 *}-->

■1256行目付近の記述を編集してください。

            <input type="hidden" name="ajax_url" value="<!--{$ajax_url}-->" id="ajax_url" />
            <!--{* ↑編集しないでください↑ *}-->
        </form>
        <!--paidy用注文確定ボタン-->

↓以下に変更する↓

            <input type="hidden" name="ajax_url" value="<!--{$ajax_url}-->" id="ajax_url" />
            <!--{* ↑編集しないでください↑ *}-->
            <!--{captcha_form_lp_shopping}-->
        </form>
        <!--paidy用注文確定ボタン-->

pc/templates/【ユーザーテンプレート】/shopping/lp_ups_dialog.tpl

■8行目付近の記述を編集してください。

<div class="p-lp-ups ups_dialog">
    <div class="p-lp-ups-inner">
        <form name="ups_dialog_form" id="ups_dialog_form" method="post" action="/shopping/lp.php">
            <div class="p-lp-ups__product">
                <div class="c-lp-section">
                    <div class="c-lp-section__title">商品</div>

↓以下に変更する↓

<div class="p-lp-ups ups_dialog">
    <div class="p-lp-ups-inner">
        <form name="ups_dialog_form" id="ups_dialog_form" method="post" action="/shopping/lp.php" class="js-lp-recaptcha-form">
            <div class="p-lp-ups__product">
                <div class="c-lp-section">
                    <div class="c-lp-section__title">商品</div>

■123行目付近の記述を編集してください。

                    <!--{/foreach}-->
                <!--{/if}-->
            </div>
        </form>

↓以下に変更する↓

                    <!--{/foreach}-->
                <!--{/if}-->
            </div>
            <!--{if $lp_order && $tups != ''}-->
                <!--{captcha_form_lp_shopping}-->
            <!--{/if}-->
        </form>

smp/templates/【ユーザーテンプレート】/shopping/lp.tpl

■12行目付近の記述を編集してください。

        <h2 class="c-contents-header__title">購入手続き</h2>
    </div>
    <div class="c-contents-body">
        <form name="form1" id="form1" method="post" action="<!--{$smarty.server.SCRIPT_NAME}-->" autocomplete="off" class="js-efo">
            <div class="p-lp__product js-lp-product-select">
                <!--{foreach from=$lp_form_products key="key" item="lp_form_product"}-->

↓以下に変更する↓

        <h2 class="c-contents-header__title">購入手続き</h2>
    </div>
    <div class="c-contents-body">
        <form name="form1" id="form1" method="post" action="<!--{$smarty.server.SCRIPT_NAME}-->" autocomplete="off" class="js-efo js-lp-recaptcha-form">
            <div class="p-lp__product js-lp-product-select">
                <!--{foreach from=$lp_form_products key="key" item="lp_form_product"}-->

■120行目付近の記述を編集してください。

↓以下に変更する↓

                                            ログイン
                                        </button>
                                    </div>
                                    <!--{captcha_form_login}-->
                                </div>

■1290行目付近の記述を編集してください。

            <!--{/foreach}-->
            <input type="hidden" name="ajax_url" value="<!--{$ajax_url}-->" id="ajax_url" />
            <!--{* ↑編集しないでください↑ *}-->
        </form>
        <!--paidy用注文確定ボタン-->

↓以下に変更する↓

            <!--{/foreach}-->
            <input type="hidden" name="ajax_url" value="<!--{$ajax_url}-->" id="ajax_url" />
            <!--{* ↑編集しないでください↑ *}-->
            <!--{captcha_form_lp_shopping}-->
        </form>
        <!--paidy用注文確定ボタン-->

smp/templates/【ユーザーテンプレート】/shopping/lp_ups_dialog.tpl

■9行目付近の記述を編集してください。

<div class="p-lp-ups ups_dialog">
    <div class="p-lp-ups__inner">
        <form name="ups_dialog_form" id="ups_dialog_form" method="post" action="/shopping/lp.php" autocomplete="off">
            <div class="p-lp-ups__product">
                <div class="c-lp-section">
                    <h3 class="c-lp-section__title">商品</h3>

↓以下に変更する↓

<div class="p-lp-ups ups_dialog">
    <div class="p-lp-ups__inner">
        <form name="ups_dialog_form" id="ups_dialog_form" method="post" action="/shopping/lp.php" autocomplete="off" class="js-lp-recaptcha-form">
            <div class="p-lp-ups__product">
                <div class="c-lp-section">
                    <h3 class="c-lp-section__title">商品</h3>

■133行目付近の記述を編集してください。

                        <!--{/foreach}-->
                    <!--{/if}-->
                </div>
            </div>
        </form>

↓以下に変更する↓

                        <!--{/foreach}-->
                    <!--{/if}-->
                </div>
            </div>
        <!--{if $lp_order && $tups != ''}-->
            <!--{captcha_form_lp_shopping}-->
        <!--{/if}-->
        </form>

非会員購入遷移でreCAPTCHA機能を有効にする

非会員購入遷移でreCAPTCHA機能を有効にする場合は、下記を参考にご対応ください。

■編集対象テンプレートファイル

pc/templates/【ユーザーテンプレート】/shopping/nonmember_input.tpl
smp/templates/【ユーザーテンプレート】/shopping/nonmember_input.tpl

■変更箇所

pc/templates/【ユーザーテンプレート】/shopping/nonmember_input.tpl

■593行目付近の記述を編集してください。

                    </table>
                </div>
            </fieldset>
            <div class="c-paragraph c-paragraph--sm c-paragraph--align-center">
                <input type="checkbox" id="non_member_agree" name="non_member_agree" value="1" />

↓以下に変更する↓

                    </table>
                </div>
            </fieldset>
            <!--{captcha_form_non_customer_shopping}-->
            <div class="c-paragraph c-paragraph--sm c-paragraph--align-center">
                <input type="checkbox" id="non_member_agree" name="non_member_agree" value="1" />

smp/templates/【ユーザーテンプレート】/shopping/nonmember_input.tpl

■631行目付近の記述を編集してください。

                    <input type="hidden" name="next" id="next" />
                </button>
            </div>
        </form>
    </div>
</div>

↓以下に変更する↓

                    <input type="hidden" name="next" id="next" />
                </button>
            </div>
            <!--{captcha_form_non_customer_shopping}-->
        </form>
    </div>
</div>

外部システムからアクセスの場合、reCAPTCHAを無効にする方法

LPでreCAPTCHAを稼働させると、qualvaやBOTCHANなどの外部のチャットツールが正しく動作しなくなる可能性がありましたが、特定のHTTPヘッダー情報を持ってアクセスした場合、提携先のチャットボットやRPAのbotが、reCAPTCHAに弾かれずに正しく動作することが可能となりました。

下記をご参考いただき対応してください。