reCAPTCHA認証（ログイン）

トップ＞検索結果

reCAPTCHA認証（ログイン）

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

機能概要

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

reCAPTCHA認証ご利用時は、評価件数の制限事項にご注意ください

reCAPTCHA認証は、10,000件/月まで無料でご利用いただけますが、
10,000件以上はreCAPTCHA認証がエラーとなるため、Google側で有料プランに変更する必要があります。

▼参考資料（外部リンク）
　・reCAPTCHA の料金
　　https://cloud.google.com/security/products/recaptcha?hl=ja#pricing

　・reCAPTCHA の使用には QPS や 1 日あたりの制限はありますか？
　　https://developers.google.com/recaptcha/docs/faq?hl=ja#are-there-any-qps-or-daily-limits-on-my-use-of-recaptcha

　・reCAPTCHA（Enterprise 以外のバージョン）から移行する
　　https://cloud.google.com/recaptcha-enterprise/docs/migrate-recaptcha?hl=ja

reCAPTCHAキーをGoogle Cloudに移行されていない場合、
必ず「Google Cloudへのアカウント移行に伴う変更対応をご紹介」に記載の方法にて、移行対応を行ったうえで設定してください。

v2を利用する

ユーザーが、ログインページにて、reCAPTCHAにチェックを入れずに確認ページに進もうとすると、
エラーとなり登録ができなくなります。
チェックでの認証後、ユーザーとサイトとのインタラクション（やり取り）にもとづいて、
ロボットでないことの判定を行います。

v3を利用する

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

実装すると、ログインページの右下に以下のように画像が表示されます。

画像にマウスオーバーすると以下のような表示になります。

Google側でユーザーのサイト内の行動をスコアとして算出し、
そのスコアをもとにロボットでないことの判定を行います。
そのため、ユーザーがリトライをしてもロボットと判定される場合がありますが、あらかじめご了承ください。
弊社では、スコアの低い原因の確認や、ロボットと判定される事象についての解消はできかねますが、以下は対応可能です。

・ロボットと判定されたユーザーのスコア（数値）の確認
・初期設定「reCAPTCHA bot判定閾値（v2用）」「reCAPTCHA bot判定閾値（v3用）」の調整のご案内
・reCAPTCHA認証機能のオフ

導入手順について

新規でv2を利用する場合

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

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

　v2は、reCAPTCHA v2（[私はロボットではありません] チェックボックス）にのみ対応します。
　https://developers.google.com/recaptcha/docs/versions?hl=ja

STEP1. お申込み手続き

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

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

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

以下のテンプレートが配置されていない場合、ショップ管理ツールサイドバーから「最新版テンプレート」をダウンロードいただき、
事前にアップロードしてください。

/view/userweb/common/recaptcha.xhtml
/view/smartphone/common/recaptcha.xhtml

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

■修正箇所
<form m:id='FORM_TAG'> ～ </form>内に、以下を記述してください。
 <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>   <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>

■対象テンプレート
/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>

入荷お知らせをご利用の場合

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

■修正箇所サンプル
<form m:id='FORM_TAG'> ～ </form>内に、以下を記述してください。

<div class="box" m:id="common.IF_MEMBER_LOGIN">
	<h3>会員の方</h3>
	<p>「送信」ボタンを押すと登録が完了します。</p>
	
	<div m:id='IF_GOOGLE_RECAPTCHA_ENABLE'>
		<iframe m:id='common.IMPORT_HERE' src="common/recaptcha.xhtml" frameborder="0"></iframe>
	</div>
	
	<div class="buttonarea">
		<input m:id='MEMBER_REGIST_BUTTON_TAG' type="submit" value="送信する" class="button positive medium" />
	</div>
</div>

<div m:id="common.IF_MEMBER_LOGIN" m:NOT="">
	
	<div m:id='IF_GOOGLE_RECAPTCHA_ENABLE'>
		<iframe m:id='common.IMPORT_HERE' src="common/recaptcha.xhtml" frameborder="0"></iframe>
	</div>
	<div m:id='IF_GOOGLE_RECAPTCHA_ENABLE' m:NOT="">
		<div m:id='common.IF_GOOGLE_RECAPTCHA_LOGIN_ENABLE'>
			<iframe m:id='common.IMPORT_HERE' src="common/recaptcha.xhtml" frameborder="0"></iframe>
		</div>
	</div>
	
	<div class="box">
		<h3>会員の方</h3>
		<p>会員の方は、下のフォームにログインID・PWを入力して「送信」ボタンを押してください。</p>
～中略～
	</div>

Amazon Pay、Amazon Pay V2（アマゾンジャパン）をご利用の場合

■対象テンプレート
▼Amazon Pay（アマゾンジャパン）
/view/userweb/cart_login$amazon_payments.xhtml
/view/smartphone/cart_login$amazon_payments.xhtml

▼Amazon Pay V2（アマゾンジャパン）
/view/userweb/cart_login$amazon_payments_v2.xhtml
/view/smartphone/cart_login$amazon_payments_v2.xhtml

■修正箇所
<form m:id='FORM_TAG'> ～ </form>内に、以下を記述してください。

-->

STEP3. オプションの適用

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

STEP4. SiteKey、SecretKey、プロジェクトID、APIキーの取得

Google社提供のreCAPTCHAお申込みサイトにて、v2用のSiteKey、SecretKey、プロジェクトID、APIキーを取得してください。

※reCAPTCHAのバージョンは、「v2」でお申し込みください。
※デモ環境で動作検証する際は、demo-service.ebisumart.com等、ご利用のデモ環境のユーザーウェブのドメインでお申し込みください。

すでにreCAPTCHA登録済であり、各項目を取得済の場合は新しく作成する必要はありません。
reCAPTCHAを管理しているプロジェクトID、それに紐づくSiteKey、SecretKey、APIキーをご用意ください。

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

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

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

下記の初期設定に、STEP4で取得した各種項目を設定します。

・reCAPTCHA設定SiteKey（v2用）
・reCAPTCHA設定SecretKey（v2用）
・reCAPTCHA設定プロジェクトID（v2用）
・reCAPTCHA設定APIキー（v2用）

初期設定「reCAPTCHA bot判定閾値（v2用）」で、人間かbotかどうかを判定する閾値を設定できます。

新規でv3を利用する場合

STEP1. お申込み手続き

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

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

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

■対象テンプレート
/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>

入荷お知らせをご利用の場合

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

■修正箇所
<form m:id='FORM_TAG'> ～ </form>内に、以下を記述してください。

～中略～

</div>

Amazon Pay、Amazon Pay V2（アマゾンジャパン）をご利用の場合

-->

STEP3. オプションの適用

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

STEP4. SiteKey、SecretKey、プロジェクトID、APIキーの取得

Google社提供のreCAPTCHAお申込みサイトにて、v3用のSiteKey、SecretKey、プロジェクトID、APIキーの取得を取得してください。

※reCAPTCHAのバージョンは、「v3」でお申し込みください。
※デモ環境で動作検証する際は、demo-service.ebisumart.com等、ご利用のデモ環境のユーザーウェブのドメインでお申し込みください。

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

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

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

下記の初期設定に、STEP4で取得した各種項目を設定します。

・reCAPTCHA設定SiteKey（v3用）
・reCAPTCHA設定SecretKey（v3用）
・reCAPTCHA設定プロジェクトID（v3用）
・reCAPTCHA設定APIキー（v3用）

初期設定「reCAPTCHA bot判定閾値（v3用）」で、人間かbotかどうかを判定する閾値を設定できます。

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

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

STEP1. SiteKey、SecretKey、プロジェクトID、APIキーの取得
 STEP2. 初期設定の登録（1）
STEP3. 初期設定の登録（2）

STEP1. SiteKey、SecretKey、プロジェクトID、APIキーの取得

Google社提供のreCAPTCHAお申込みサイトにて、
v3用のSiteKey、SecretKey、プロジェクトID、APIキーを取得してください。

「v2」にて利用していた同一のプロジェクトID、APIキーを利用する場合は、新しく作成する必要はありません。

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

下記の初期設定に、STEP1で取得した各種項目を設定します。

・reCAPTCHA設定SiteKey（v3用）
・reCAPTCHA設定SecretKey（v3用）
・reCAPTCHA設定プロジェクトID（v3用）
・reCAPTCHA設定APIキー（v3用）

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

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

初期設定「reCAPTCHA bot判定閾値（v3用）」で、人間かbotかどうかを判定する閾値を設定できます。

関連機能

reCAPTCHA認証（お問い合わせ入力）
reCAPTCHA認証（注文情報入力）
reCAPTCHA認証（カード登録）
reCAPTCHA認証（会員登録）

※ご利用には、各オプションそれぞれにお申込みが必要です。ご希望の際は、サポートまでお問い合わせください。

なお、以下の組み合わせで併用する場合、連続でreCAPTCHA認証を行うため、あらかじめご了承ください。

・「reCAPTCHA認証（ログイン）」と「reCAPTCHA認証（注文情報入力））」を併用する場合
　未ログインの状態で買い物かごのページ（cart_index.xhtml）へアクセス
　→注文時ログインページ（cart_login.xhtml）で「reCAPTCHA認証（ログイン）」の認証
　→注文情報入力ページ（cart_seisan.xhtml）で「reCAPTCHA認証（注文情報入力）」の認証

・「reCAPTCHA認証（ログイン）」と「reCAPTCHA認証（入荷お知らせ登録）」を併用する場合
　未ログインの状態で商品詳細ページ（item_detail.xhtml）へアクセス
　→ 入荷お知らせ登録ページ（item_nyuka_notice.xhtml）で「reCAPTCHA認証（ログイン）」の認証
　→入荷お知らせ登録ページ（item_nyuka_notice.xhtml ）で「reCAPTCHA認証（入荷お知らせ登録）」の認証

reCAPTCHA Classic導入手順について

現在、reCAPTCHAを新規お申込みする場合は、Google Cloud プロジェクトの紐づけが必須となっています。
新規お申込みを行われている場合は、以下の導入方法にてご対応ください。

・新規でv2を利用する場合
・新規でv3を利用する場合

以降の案内は、Google Cloud プロジェクト対応前の情報です。
ご利用中の店舗様向けに既存設定確認の参考情報であり、非推奨の対応手順となります。

新規でv2（Classic）を利用する場合

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

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

STEP1. お申込み手続き

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

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

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

入荷お知らせをご利用の場合

Amazon Pay、Amazon Pay V2（アマゾンジャパン）をご利用の場合

--->

STEP3. オプションの適用

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

STEP4. SiteKey、SecretKeyの取得

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

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

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

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

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

新規でv3（Classic）を利用する場合

STEP1. お申込み手続き

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

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

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

入荷お知らせをご利用の場合

～中略～

</div>

Amazon Pay、Amazon Pay V2（アマゾンジャパン）をご利用の場合

--->

STEP3. オプションの適用

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

STEP4. SiteKey、SecretKeyの取得

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

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

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

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

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

初期設定「reCAPTCHA bot判定閾値（v3用）」で、人間かbotかどうかを判定する閾値を設定できます。

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

本オプションを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用）」にて、STEP5で取得したSiteKey、SecretKeyを設定します。

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

初期設定「reCAPTCHA使用バージョン」にて、「v2（Classic）」から「v3（Classic）」に切り替えます。

初期設定「reCAPTCHA bot判定閾値（v3用）」で、人間かbotかどうかを判定する閾値を設定できます。

当ページの記載内容は、標準機能に関するものです。
機能に関するカスタマイズをされている場合にはこの限りではありません。

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