reCAPTCHA認証（ログイン） | サポートサイト

目次

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

機能概要

ユーザーウェブの ログインページ（login.xhtml,cart_login.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/login.xhtml
/view/smartphone/login.xhtml

■修正箇所
<form m:id='FORM_TAG'> ～ </form>内に、以下を記述してください。
<!-- social_plus アプリがインストールされていない時の表示 --> <div m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS' m:NOT=""> <table summary="ログイン"> <tr> <th class="title">ログインID</th> <td><input m:id='ID_INPUT_HERE' name="id" type="text" size="50" value="" /></td> </tr> <tr> <th class="title">パスワード</th> <td><input m:id='PASSWORD_INPUT_HERE' name="pw" size="50" value="" type="password" /></td> </tr> </table> ～中略～ <!-- ======================リキャプチャー機能出力部分====================== / --> <div m:id="common.IF_GOOGLE_RECAPTCHA_LOGIN_ENABLE"> <iframe m:id='common.IMPORT_HERE' src="common/recaptcha.xhtml" frameborder="0"></iframe> </div> <!-- / ======================リキャプチャー機能出力部分====================== --> ～中略～ </div> <!-- / social_plus アプリがインストールされていない時の表示 --> <!-- social_plus アプリがインストールされていた時の表示 --> <div m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS' class="social_provider"> <div class="box"> <h3>サイト会員IDでログイン</h3> <table summary="ログイン"> <tr> <th class="title">ログインID</th> <td><input m:id='ID_INPUT_HERE' name="id" type="text" size="50" value="" /></td> </tr> <tr> <th class="title">パスワード</th> <td><input m:id='PASSWORD_INPUT_HERE' name="pw" size="50" value="" type="password" /></td> </tr> </table> ～中略～ <!-- ======================リキャプチャー機能出力部分====================== / --> <div m:id="common.IF_GOOGLE_RECAPTCHA_LOGIN_ENABLE"> <iframe m:id='common.IMPORT_HERE' src="common/recaptcha.xhtml" frameborder="0"></iframe> </div> <!-- / ======================リキャプチャー機能出力部分====================== --> ～中略～ </div> <!-- / social_plus アプリがインストールされていた時の表示 -->

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

■修正箇所サンプル
<form m:id='FORM_TAG'> ～ </form>内に、以下を記述してください。
<div class="login_boxes"> <div class="box" m:id="IF_NO_LOGIN_BUTTON"> <h3>会員の方</h3> <iframe m:id='common.IMPORT_HERE' src="common/messages.xhtml" frameborder="0" scrolling="no" width="100%"></iframe> <table summary="ログイン"> <tr> <th class="title">ログインID</th> <td><input m:id='ID_INPUT_HERE' name="id" type="text" size="50" value="" /></td> </tr> <tr> <th class="title">パスワード</th> <td><input m:id='PASSWORD_INPUT_HERE' name="pw" size="50" value="" type="password" /></td> </tr> </table> <p class="link_text"> <a href="password_reminder.html">→ログインID・パスワードを忘れた方はこちら</a> </p> <!-- ======================リキャプチャー機能出力部分====================== / --> <div m:id="common.IF_GOOGLE_RECAPTCHA_LOGIN_ENABLE"> <iframe m:id='common.IMPORT_HERE' src="common/recaptcha.xhtml" frameborder="0"></iframe> </div> <!-- / ======================リキャプチャー機能出力部分====================== --> <div class="buttonarea"> <input m:id='LOGIN_BUTTON_TAG' type="submit" value="ログインする" class="button positive medium" /> </div> </div> <div class="box" m:id="IF_NO_LOGIN_BUTTON"> <h3>会員登録されていない方</h3> <div class="regist_non_area"> <p> ※会員の方で、ログインせずに注文手続きへ<br /> 進みたい方もこちらをご利用ください。 </p> ～中略～ <!-- ログイン必須の場合 --> <div class="widebox" m:id="IF_NO_LOGIN_BUTTON" m:NOT=""> <h3>ログイン</h3> <p>下のフォームにログインID・パスワードを入力して「ログインする」ボタンを押してください。</p> <iframe m:id='common.IMPORT_HERE' src="common/messages.xhtml" frameborder="0" scrolling="no" width="100%"></iframe> <table summary="ログイン"> <tr> <th class="title">ログインID</th> <td><input m:id='ID_INPUT_HERE' name="id" type="text" size="50" value="" /></td> </tr> <tr> <th class="title">パスワード</th> <td><input m:id='PASSWORD_INPUT_HERE' name="pw" size="50" value="" type="password" /></td> </tr> </table> <p class="link"><a href="password_reminder.html">→ログインID・パスワードを忘れた方</a></p> <!-- ======================リキャプチャー機能出力部分====================== / --> <div m:id="common.IF_GOOGLE_RECAPTCHA_LOGIN_ENABLE"> <iframe m:id='common.IMPORT_HERE' src="common/recaptcha.xhtml" frameborder="0"></iframe> </div> <!-- / ======================リキャプチャー機能出力部分====================== --> <div class="buttonarea"> <input m:id='LOGIN_BUTTON_TAG' type="submit" value="ログインする" class="button positive medium" /> </div> </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/login.xhtml
/view/smartphone/login.xhtml

■修正箇所
<form m:id='FORM_TAG'> ～ </form>内に、以下を記述してください。
<!-- social_plus アプリがインストールされていない時の表示 --> <div m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS' m:NOT=""> <table summary="ログイン"> <tr> <th class="title">ログインID</th> <td><input m:id='ID_INPUT_HERE' name="id" type="text" size="50" value="" /></td> </tr> <tr> <th class="title">パスワード</th> <td><input m:id='PASSWORD_INPUT_HERE' name="pw" size="50" value="" type="password" /></td> </tr> </table> ～中略～ <!-- ======================リキャプチャー機能出力部分====================== / --> <div m:id="common.IF_GOOGLE_RECAPTCHA_LOGIN_ENABLE"> <iframe m:id='common.IMPORT_HERE' src="common/recaptcha.xhtml" frameborder="0"></iframe> </div> <!-- / ======================リキャプチャー機能出力部分====================== --> ～中略～ </div> <!-- / social_plus アプリがインストールされていない時の表示 --> <!-- social_plus アプリがインストールされていた時の表示 --> <div m:id='common.IF_APP_INSTALLED' m:app_cd='SOCIAL_PLUS' class="social_provider"> <div class="box"> <h3>サイト会員IDでログイン</h3> <table summary="ログイン"> <tr> <th class="title">ログインID</th> <td><input m:id='ID_INPUT_HERE' name="id" type="text" size="50" value="" /></td> </tr> <tr> <th class="title">パスワード</th> <td><input m:id='PASSWORD_INPUT_HERE' name="pw" size="50" value="" type="password" /></td> </tr> </table> ～中略～ <!-- ======================リキャプチャー機能出力部分====================== / --> <div m:id="common.IF_GOOGLE_RECAPTCHA_LOGIN_ENABLE"> <iframe m:id='common.IMPORT_HERE' src="common/recaptcha.xhtml" frameborder="0"></iframe> </div> <!-- / ======================リキャプチャー機能出力部分====================== --> ～中略～ </div> <!-- / social_plus アプリがインストールされていた時の表示 -->

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

■修正箇所
<form m:id='FORM_TAG'> ～ </form>内に、以下を記述してください。
<div class="login_boxes"> <div class="box" m:id="IF_NO_LOGIN_BUTTON"> <h3>会員の方</h3> <iframe m:id='common.IMPORT_HERE' src="common/messages.xhtml" frameborder="0" scrolling="no" width="100%"></iframe> <table summary="ログイン"> <tr> <th class="title">ログインID</th> <td><input m:id='ID_INPUT_HERE' name="id" type="text" size="50" value="" /></td> </tr> <tr> <th class="title">パスワード</th> <td><input m:id='PASSWORD_INPUT_HERE' name="pw" size="50" value="" type="password" /></td> </tr> </table> <p class="link_text"> <a href="password_reminder.html">→ログインID・パスワードを忘れた方はこちら</a> </p> <!-- ======================リキャプチャー機能出力部分====================== / --> <div m:id="common.IF_GOOGLE_RECAPTCHA_LOGIN_ENABLE"> <iframe m:id='common.IMPORT_HERE' src="common/recaptcha.xhtml" frameborder="0"></iframe> </div> <!-- / ======================リキャプチャー機能出力部分====================== --> <div class="buttonarea"> <input m:id='LOGIN_BUTTON_TAG' type="submit" value="ログインする" class="button positive medium" /> </div> </div> <div class="box" m:id="IF_NO_LOGIN_BUTTON"> <h3>会員登録されていない方</h3> <div class="regist_non_area"> <p> ※会員の方で、ログインせずに注文手続きへ<br /> 進みたい方もこちらをご利用ください。 </p> ～中略～ <!-- ログイン必須の場合 --> <div class="widebox" m:id="IF_NO_LOGIN_BUTTON" m:NOT=""> <h3>ログイン</h3> <p>下のフォームにログインID・パスワードを入力して「ログインする」ボタンを押してください。</p> <iframe m:id='common.IMPORT_HERE' src="common/messages.xhtml" frameborder="0" scrolling="no" width="100%"></iframe> <table summary="ログイン"> <tr> <th class="title">ログインID</th> <td><input m:id='ID_INPUT_HERE' name="id" type="text" size="50" value="" /></td> </tr> <tr> <th class="title">パスワード</th> <td><input m:id='PASSWORD_INPUT_HERE' name="pw" size="50" value="" type="password" /></td> </tr> </table> <p class="link"><a href="password_reminder.html">→ログインID・パスワードを忘れた方</a></p> <!-- ======================リキャプチャー機能出力部分====================== / --> <div m:id="common.IF_GOOGLE_RECAPTCHA_LOGIN_ENABLE"> <iframe m:id='common.IMPORT_HERE' src="common/recaptcha.xhtml" frameborder="0"></iframe> </div> <!-- / ======================リキャプチャー機能出力部分====================== --> <div class="buttonarea"> <input m:id='LOGIN_BUTTON_TAG' type="submit" value="ログインする" class="button positive medium" /> </div> </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. SiteKey、SecretKeyの取得
STEP2. 初期設定の登録（1）
STEP3. 初期設定の登録（2）

STEP1. SiteKey、SecretKeyの取得

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

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

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

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

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