Show Menu
トピック×

アダプティブフォームの CAPTCHA の使用

CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart)は、オンライントランザクションにおいて人間と自動プログラムやボットとを区別するために一般的に使用されるプログラムです。テストを行ってユーザーの反応を評価し、サイトを使用しているのが人間かボットかを判断します。これにより、テストに失敗した場合ユーザーは続行できないため、ボットによるスパムの投稿や悪意のある目的を防止し、オンライントランザクションを安全に保ちます。
AEM によるアダプティブフォームの CAPTCHA のサポートGoogleのreCAPTCHAサービスを使用して、CAPTCHAを実装できます。
  • AEM Forms は reCaptcha v2 のみをサポートします。その他のバージョンはサポートされません。
  • アダプティブフォームの CAPTCHA は、AEM Forms アプリケーションのオフラインモードではサポートされていません。

Google が提供する reCAPTCHA サービスの設定

フォームの作成者は、Google による reCAPTCHA サービスを使用してアダプティブフォームに CAPTCHA を実装することができます。これにより、サイトを保護する高度な CAPTCHA 機能が提供されます。reCAPTCHA の仕組みについて詳しくは、「 Google reCAPTCHA 」を参照してください。
AEM Forms で reCAPTCHAを実装するには:
  1. Google から reCAPTCHA API キーペア を取得します。これにはサイトキーと秘密鍵が含まれます。
  2. クラウドサービス用の設定コンテナを作成します。
    1. Go to Tools > General > Configuration Browser .
    2. 以下の手順を実行して、global フォルダーをクラウド設定用に有効にします。クラウドサービス設定用に別のフォルダーを作成する場合は、この手順をスキップしてください。
      1. 設定ブラウザーで、「​ global ​」フォルダーを選択して「​ プロパティ ​」をタップします。
      2. 設定プロパティダイアログで、「​ クラウド設定 ​」を有効にします。
      3. 「​ 保存して閉じる ​」をタップして設定内容を保存し、ダイアログを閉じます。
    3. 設定ブラウザーで「​ 作成 ​」をタップします。
    4. 設定を作成ダイアログでフォルダーのタイトルを指定し、「​ クラウド設定 ​」を有効にします。
    5. Tap Create to create the folder enabled for cloud service configurations.
  3. reCAPTCHA のクラウドサービスを設定します。
    1. On your AEM author instance, go to > Cloud Services .
    2. 「​ reCAPTCHA ​」をタップします。設定ページが表示されます。上記の手順で作成した設定コンテナを選択し、「​ 作成 ​」をタップします。
    3. Specify Name, Site key, and Secret Key for reCAPTCHA service and tap Create to create the cloud service configuration.
    4. コンポーネントを編集ダイアログで、サイトおよび手順 1 で取得した秘密鍵を指定します。Tap Save Settings and then tap OK to complete the configuration. reCAPTCHA サービスを設定すると、アダプティブフォームで使用できるようになります。詳しくは、「 アダプティブフォームの CAPTCHA の使用 」を参照してください。

アダプティブフォームで CAPTCHA を使用する

アダプティブフォームで CAPTCHA を使用するには:
  1. アダプティブフォームを編集モードで開きます。
    アダプティブフォームの作成時に選択した設定コンテナに、reCAPTCHA クラウドサービスが含まれていることを確認してください。アダプティブフォームのプロパティを編集して、そのアダプティブフォームに関連付けられている設定コンテナを変更することもできます。
  2. コンポーネントブラウザーから​ Captcha コンポーネントを、アダプティブフォームにドラッグアンドドロップしますす。
    アダプティブフォームにおける複数の Captcha コンポーネントの使用はサポートされていません。また、遅延読み込みとしてマークされているパネルやフラグメント内のパネルで CAPTCHA を使用することはお勧めしません。
    Captcha は、約 1 分間で期限切れになります。そのため、アダプティブフォームに「送信」ボタンを配置する直前に Captcha コンポーネントを配置することをお勧めします。
  3. Select the Captcha component you added and tap to edit its properties.
  4. CAPTCHA ウィジェットのタイトルを指定します。The default value is Captcha . タイトルを表示しない場合は、「 タイトルを非表示にする 」を選択します。
  5. From the Captcha service drop-down, select reCaptcha to enable reCAPTCHA service if you configured it as described in ReCAPTCHA service by Google . 「設定」ドロップダウンから設定を選択します。また、reCAPTCHA ウィジェットのサイズを「 標準 」または「 コンパクト 」から選択します。
    デフォルトの AEM CAPTCHA サービスは非推奨であるため、「Captcha サービス」ドロップダウンで「​ デフォルト ​」を選択しないでください。
  6. 各プロパティを保存します。
アダプティブフォーム上で reCAPTCHA サービスが有効になります。フォームをプレビューして、CAPTCHA が機能していることを確認できます。