reCAPTCHAユーザマニュアル

はじめに

reCAPTCHAを設置することで、Webフォームから流入するスパム申込を大幅に低減することが可能です。

設定方法

GoogleでのKeyの取得

  1. GoogleのreCAPTCHAサイトに遷移し、Googleアカウントでログインします。
    https://www.google.com/recaptcha/admin

  2. ”Register a new site"で以下を入力します

    1. Label:適切な名称をつけます(例:”SMP用設定”)

    2. ”reCAPTCHA V2”を選択します

    3. Domainsに現在利用しているSMPのドメインを入力します(例:”smpform.smktg.jp”)

    4. “Accespt the reCAPTCHA Terms of Serivce”のチェックボックスに、Terms of Useを確認した後にチェックをします。

  3. ”Register"を押し登録します。

image00.png
図 1. Googleでの登録
  1. 以下の画面の”Keys"に表示されているSite keyとSecret keyを保存します。

※ 注意 どのGoogleアカウントでログインしてSite KeyとSecret Keyを保存したのか控えておいてください。

image01.png
図 2. GoogleでKeyの取得

SMPでの設定

注意: 以下は、 SMP の Web 上で申込フローを構築する場合の手順です。埋め込みフォーム機能での設置方法は、 「埋め込みフォームで reCAPTCHA を利用する場合」の手順 を参照ください。

  1. SMP管理画面にログインします。

  2. システム設定の「reCAPTCHAの秘密鍵」に上記「GoogleでのKeyの取得」で取得したSecret keyを設定します。

  3. キャンペーンの一覧画面を表示します。フォームスパムの対策をしたい個別キャンペーンで「管理開始」を押します。

  4. 「キャンペーンテンプレート変更」から「デフォルトダウンロード(seminar.zip)」からか、またはアップロードした最新のseminar.zipをダウンロードしてください。

  5. seminar.zipを解凍して、下記の3つのファイルをエディタで開いてください。

    1. \seminar\application\application_flow_master_id\user\index.html

    2. \seminar\application\application_flow_master_id\userenquete\index.html

    3. \seminar\application\application_flow_master_id\custom\index.html

  6. 上記ファイルに以下の3箇所の修正を行ってください。

    1. index.htmlの </head>の直前に下記内容を追加してください

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script>
var onloadCallback = function() {
    var use_recaptcha = document.getElementById('use_recaptcha').value;
    if (use_recaptcha == 1) {
        grecaptcha.render('recaptcha_element', {
          'sitekey' : 'Googleから取得したSite keyの値'
        });
    }
};
</script>
  1. index.htmlのボタン領域(例えば、デフォルトのテンプレートだと、<div class="ss_btnArea">のところ)の直前に、下記内容を追加してください::hardbreaks:

    <div align='center'>$FORM{recaptcha_element}</div>
  1. </form>の直前に下記内容を追加してください:

<input type="hidden" name="use_recaptcha" id="use_recaptcha" value="$FORM{use_recaptcha}" />
  1. 修正後のseminarフォルダを圧縮して、「キャンペーンテンプレート変更」で新規登録してください。

  2. フロー設定の変更をします。

    1. 「キャンペーン」→「詳細」→「フロー一覧」→「詳細」→「編集」でフローの設定を変更します。

    2. 「reCAPTCHAの利用」を有効化します。

  3. そのキャンペーンの申込でreCAPTCHAの使用が有効になります。

埋め込みフォームで reCAPTCHA を利用する場合

埋め込みフォーム機能 で reCAPTCHA を利用する場合、下記の手順を参考にしてください。 seminar.zip 内に Site key を含むスクリプトを記述する代わりに、埋め込みフォームのフロー設定にて Site key を設定します。埋め込みフォームの設置 の手順もあわせて参照ください。

  1. SMP管理画面にログインします。

  2. システム設定の「reCAPTCHAの秘密鍵」に上記「GoogleでのKeyの取得」で取得したSecret keyを設定します。

  3. キャンペーンの一覧画面を表示します。フォームスパムの対策をしたい個別キャンペーンで「管理開始」を押します。

  4. サイドメニューから「フロー」の一覧へ進み、reCAPTCHA を有効にするフローの「編集」へ進みます

  5. 「reCAPTCHAの有効化」で「有効」を選択し、「reCAPTCHAのサイトキー」に Google から取得した Site key を設定し、保存します

webform recaptcha setting.png
図 3. 埋め込みフォームの reCAPTCHA サイトキー設定欄

設定の確認

確認手順

正しく設定できると以下のように「私はロボットではありません」のダイアログが表示されます。チェックをせずに「次へ」を押すと「reCAPTCHAのチェックボックスを必ず選択してください。」というエラーが発生します。

image02.png
図 4. reCAPTCHAのダイアログ

また、ロボットの疑いがある場合以下のようなパズルが表示されます。

image03.png
図 5. reCAPTCHAのパズル

正しく、回答できない場合は、ロボットの疑いとなり正解するまでパズルが繰り返されます。なお、ブラウザで初めてフォームにアクセスしたケースでもよくパズルが出現します。

制限事項

なし

FAQ

Q.reCAPTCHAダイアログが表示されませんがどこを確認すればいいですか?
A.reCAPTCHAダイアログが表示されない場合は、以下の項目を確認してください。

  • Secret keyは正しくSMPのシステム設定に設定できていますか?

  • 該当のフロー設定でreCAPTCHAは有効化されていますか?

  • Site keyは正しくHTMLソースに表示されていますか?ブラウザのページソースを見て確認してください。

  • ブラウザの開発者ツールを利用し、Javascriptエラー等がでていないかを確認してください

  • GoogleのKey取得の際のDomain名は正しいものを入力できていますか?

  • Seminar.zipを正しくアップロードできていますか?

Q. SiteKeyとSecretKeyを紛失した場合、再発行する方法を教えてください。
A.「GoogleでのKeyの取得」に従って再発行してください。

Q.設定しましたが、スパム申込が止まりません。
A.reCAPTCHAが正しく設定されていることを確認の上、reCAPTCHAのセキュリティレベルを高いレベルへ変更してみてください。

  1. https://www.google.com/recaptcha/admin へ遷移

  2. 自分のドメインのキーを選択

  3. "Key Settings"→ "Advanced Settings"を選択

  4. ”Security Preference"を”Most secure"にする

  5. ”Save changes"を押す

検索結果 ""

    検索結果がありません ""