reCAPTCHA認証（カード登録） | サポートサイト

目次

機能概要
導入手順
　┗新規でv2を利用する場合
　┗新規でv3を利用する場合
　┗v2からv3に切り替える場合

機能概要

ユーザーウェブの、クレジットカード情報登録ページ（member_credit_entry_input.xhtml ）にて、
登録者がロボットでないことの判定を行うことができます。
使用するreCAPTCHAのバージョンは、本オプションで対応しているバージョン「v2」と「v3」から選択いただけます。

v2を利用する

エンドユーザーが「クレジットカード情報登録」ページにて、reCAPTCHAにチェックを入れずに確認ページに進もうとすると、
エラーとなり登録ができなくなります。

v3を利用する

エンドユーザーがチェックを入れたり画像を選択する必要なく、エンドユーザーとサイトとのインタラクション（やり取り）にもとづいて、
ロボットでないことの判定を行います。

実装すると「クレジットカード情報登録」ページの右下に以下のような画像が表示されます。
画像にマウスオーバーすると以下のような表示になります。

導入手順について

新規でv2を利用する場合

本オプションをご利用いただくための導入手順は以下の通りです。

STEP1. お申込み手続き
STEP2. reCAPTCHA関連のm:idの組み込み
STEP3. オプションの適用
STEP4. SiteKey、SecretKeyの取得
STEP5. 初期設定の登録（1）
STEP6. 初期設定の登録（2）

STEP1. お申込み手続き

本オプション利用の申し込みの旨を、弊社サポート窓口までご連絡ください。

STEP2. reCAPTCHA関連のm:idの組み込み

該当テンプレートにreCAPTCHAを利用するためのm:idを組み込みます。

■対象テンプレート
/view/userweb/member_credit_entry_input.xhtml
/view/smartphone/member_credit_entry_input.xhtml

■修正箇所
<form m:id='FORM_TAG'> ～ </form>内に、以下を記述してください。
<div m:id='IF_GOOGLE_RECAPTCHA_ENABLE' id="reCAPTCHA"> <script m:id='GOOGLE_RECAPTCHA_SCRIPT_TAG'></script> <span m:id='GOOGLE_RECAPTCHA_TAG' data-size="compact"></span> </div>

STEP3. オプションの適用

弊社にてオプションを適用するため、弊社サポート窓口までご連絡ください。

STEP4. SiteKey、SecretKeyの取得

Google社提供のreCAPTCHAお申込みサイトにて、v2用のSiteKey、SecretKeyを取得してください。

STEP5. 初期設定の登録（1）

初期設定「reCAPTCHA使用バージョン」にて、「Version2」を指定します。

STEP6. 初期設定の登録（2）

初期設定「reCAPTCHA設定SiteKey」「reCAPTCHA設定SecretKey」にて、STEP4で取得したSiteKey、SecretKeyを設定します。

新規でv3を利用する場合

本オプションをご利用いただくための導入手順は以下の通りです。

STEP1. お申込み手続き
STEP2. reCAPTCHA関連のm:idの組み込み
STEP3. オプションの適用
STEP4. SiteKey、SecretKeyの取得
STEP5. 初期設定の登録（1）
STEP6. 初期設定の登録（2）

STEP1. お申込み手続き

本オプション利用の申し込みの旨を、弊社サポート窓口までご連絡ください。

STEP2. reCAPTCHA関連のm:idの組み込み

該当テンプレートにreCAPTCHAを利用するためのm:idを組み込みます。

■対象テンプレート
/view/userweb/member_credit_entry_input.xhtml
/view/smartphone/member_credit_entry_input.xhtml

■修正箇所
<form m:id='FORM_TAG'> ～ </form>内に、以下を記述してください。
<div m:id='IF_GOOGLE_RECAPTCHA_ENABLE' id="reCAPTCHA"> <script m:id='GOOGLE_RECAPTCHA_V3_SCRIPT_TAG'></script> <script m:id='GOOGLE_RECAPTCHA_V3_JS_HERE'></script> <input type='hidden' m:id='GOOGLE_RECAPTCHA_V3_RESPONSE_HIDDEN_TAG' ></input> </div>

STEP3. オプションの適用

弊社にてオプションを適用するため、弊社サポート窓口までご連絡ください。

STEP4. SiteKey、SecretKeyの取得

Google社提供のreCAPTCHAお申込みサイトにて、v3用のSiteKey、SecretKeyを取得してください。

STEP5. 初期設定の登録（1）

初期設定「reCAPTCHA使用バージョン」にて、「Version3」を指定します。

STEP6. 初期設定の登録（2）

初期設定「reCAPTCHA設定SiteKey（v3用）」「reCAPTCHA設定SecretKey（v3用）」にて、STEP4で取得したSiteKey、SecretKeyを設定します。

v2からv3に切り替える場合

本オプションをv2からv3に切り替えるための導入手順は以下の通りです。

STEP1. reCAPTCHA関連のm:idの組み込み
STEP2. SiteKey、SecretKeyの取得
STEP3. 初期設定の登録（1）
STEP4. 初期設定の登録（2）

STEP1. reCAPTCHA関連のm:idの組み込み

reCAPTCHA（v3）を利用するため、該当テンプレートのm:idの記述を以下に更新します。

■対象テンプレート
/view/userweb/member_credit_entry_input.xhtml
/view/smartphone/member_credit_entry_input.xhtml

■修正箇所
<form m:id='FORM_TAG'> ～ </form>内に、以下を記述してください。
<div m:id='IF_GOOGLE_RECAPTCHA_ENABLE' id="reCAPTCHA"> <div m:id='IF_USE_GOOGLE_RECAPTCHA_V3' m:NOT=""> <script m:id='GOOGLE_RECAPTCHA_SCRIPT_TAG'></script> <span m:id='GOOGLE_RECAPTCHA_TAG' data-size="compact"></span> </div> <div m:id='IF_USE_GOOGLE_RECAPTCHA_V3'> <script m:id='GOOGLE_RECAPTCHA_V3_SCRIPT_TAG'></script> <script m:id='GOOGLE_RECAPTCHA_V3_JS_HERE'></script> <input type='hidden' m:id='GOOGLE_RECAPTCHA_V3_RESPONSE_HIDDEN_TAG' ></input> </div> </div>

STEP2. SiteKey、SecretKeyの取得

Google社提供のreCAPTCHAお申込みサイトにて、v3用のSiteKey、SecretKeyを取得してください。

STEP3. 初期設定の登録（1）

初期設定「reCAPTCHA設定SiteKey（v3用）」「reCAPTCHA設定SecretKey（v3用）」にて、STEP2で取得したSiteKey、SecretKeyを設定します。

STEP4. 初期設定の登録（2）

初期設定「reCAPTCHA使用バージョン」にて、「Version2」から「Version3 」に切り替えます。