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

CAPTCHA（Completely Automated Public Turing test to tell Computers and Humans Apart）は、オンライントランザクションにおいて人間と自動プログラムやボットとを区別するために一般的に使用されるプログラムです。テストを行ってユーザーの反応を評価し、サイトを使用しているのが人間かボットかを判断します。これにより、テストに失敗した場合ユーザーは続行できないため、ボットによるスパムの投稿や悪意のある目的を防止し、オンライントランザクションを安全に保ちます。

AEM によるアダプティブフォームの CAPTCHA のサポートGoogle が提供する reCAPTCHA サービスを使用して、CAPTCHA を実装できます。

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

フォームの作成者は、Google による reCAPTCHA サービスを使用してアダプティブフォームに CAPTCHA を実装することができます。これにより、サイトを保護する高度な CAPTCHA 機能が提供されます。reCAPTCHA の仕組みについて詳しくは、「Google reCAPTCHA」を参照してください。

AEM Forms で reCAPTCHAを実装するには、以下の手順を実行します。

1. Google から reCAPTCHA API キーペアを取得します。これにはサイトキーと秘密鍵が含まれます。

2. クラウドサービス用の設定コンテナを作成します。

   1. ツール／一般／設定ブラウザー​に移動します。

      • 詳しくは、 設定ブラウザー のドキュメントを参照してください。

   2. 以下の手順を実行して、global フォルダーをクラウド設定用に有効にします。クラウドサービス設定用に別のフォルダーを作成する場合は、この手順をスキップしてください。

      1. 設定ブラウザーで、global フォルダーを選択して「プロパティ」をタップします。

      2. 設定プロパティダイアログで、「クラウド設定」を有効にします。

      3. 「保存して閉じる」をタップして設定内容を保存し、ダイアログを閉じます。

   3. 設定ブラウザーで「作成」をタップします。

   4. 設定を作成ダイアログでフォルダーのタイトルを指定し、「クラウド設定」を有効にします。

   5. 「作成」をタップします。これで、クラウドサービス設定が有効になったフォルダーが作成されました。

3. reCAPTCHA のクラウドサービスを設定します。

   1. AEM オーサーインスタンスで、／クラウドサービス​に移動します。
   2. 「reCAPTCHA」をタップします。設定ページが表示されます。上記の手順で作成した設定コンテナを選択し、「作成」をタップします。
   3. reCAPTCHA サービスの名前、サイトキー、秘密鍵を指定し、「作成」をタップして、クラウドサービスの設定を作成します。
   4. コンポーネントを編集ダイアログで、サイトおよび手順 1 で取得した秘密鍵を指定します。「設定を保存」をタップしてから、「OK」をタップして設定を完了します。

   reCAPTCHA サービスを設定すると、アダプティブフォームで使用できるようになります。詳しくは、「アダプティブフォームの CAPTCHA の使用」を参照してください。

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

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

1. アダプティブフォームを編集モードで開きます。

   メモ

   アダプティブフォームの作成時に選択した設定コンテナに、reCAPTCHA クラウドサービスが含まれていることを確認してください。アダプティブフォームのプロパティを編集して、そのアダプティブフォームに関連付けられている設定コンテナを変更することもできます。

2. コンポーネントブラウザーから​Captcha コンポーネントを、アダプティブフォームにドラッグアンドドロップしますす。

   メモ

   アダプティブフォームにおける複数の Captcha コンポーネントの使用はサポートされていません。また、遅延読み込みとしてマークされているパネルやフラグメント内のパネルで CAPTCHA を使用することはお勧めしません。

   メモ

   Captcha は、約 1 分間で期限切れになります。そのため、アダプティブフォームに「送信」ボタンを配置する直前に Captcha コンポーネントを配置することをお勧めします。

3. 追加した Captcha コンポーネントを選択して、 をタップし、プロパティを編集します。

4. CAPTCHA ウィジェットのタイトルを指定します。デフォルト値は Captcha です。タイトルを表示しない場合は、「タイトルを非表示にする」を選択します。

5. Captcha サービス​ドロップダウンで「reCaptcha」を選択して、reCAPTCHA サービスを有効にします（「Google による reCAPTCHA サービス」に記載されている手順に従って reCAPTCHA サービスが設定されている場合）。設定ドロップダウンから設定を選択します。また、reCAPTCHA ウィジェットのサイズを「標準」または「コンパクト」から選択します。

   メモ

   デフォルトの AEM CAPTCHA サービスは非推奨なので、Captcha サービスドロップダウンで「デフォルト」を選択しないでください。

6. 各プロパティを保存します。

アダプティブフォーム上で reCAPTCHA サービスが有効になります。フォームをプレビューして、CAPTCHA が機能していることを確認できます。

ルールに基づいた CAPTCHA コンポーネントの表示／非表示

アダプティブフォームのコンポーネントに適用するルールに基づいて、CAPTCHA コンポーネントの表示／非表示を切り替えることができます。コンポーネントをタップして、「」を選択し、「作成」をタップしてルールを作成します。ルールの作成について詳しくは、「ルールエディター」を参照してください。

例えば、CAPTCHA コンポーネントは、フォームの「通貨の値」フィールドの値が 25000 を超える場合にのみ、アダプティブフォームに表示する必要があります。

フォームの「通貨の値」フィールドをタップして、以下のルールを作成します。

CAPTCHA の検証

アダプティブフォーム内の CAPTCHA は、フォームを送信するとき、またはユーザーの操作や条件に基づいて CAPTCHA 検証を行うときに検証できます。

フォーム送信時の CAPTCHA の検証

アダプティブフォームの送信時に CAPTCHA を自動的に検証するには、以下の手順を実行します。

1. CAPTCHA コンポーネントをタップし、 を選択して、コンポーネントのプロパティを表示します。
2. 「CAPTCHA を検証」セクションで、「フォーム送信時に CAPTCHA を検証」を選択します。
3. 「」をタップして、コンポーネントプロパティを保存します。

ユーザーの操作と条件に対する CAPTCHA の検証

条件とユーザー操作に基づいて CAPTCHA を検証するには、以下の手順を実行します。

1. CAPTCHA コンポーネントをタップし、 を選択して、コンポーネントのプロパティを表示します。
2. 「CAPTCHA を検証」セクションの、「ユーザーアクションで CAPTCHA を検証する」を選択します。
3. 「」をタップして、コンポーネントプロパティを保存します。

Experience Manager Forms は、事前定義済みの条件を使用して CAPTCHA を検証する ValidateCAPTCHA API を提供します。この API は、カスタム送信アクションを使用するか、アダプティブフォームのコンポーネントにルールを定義することで呼び出すことができます。

以下の例は、事前定義された条件を使用して CAPTCHA を検証する ValidateCAPTCHA API の例です。

if (slingRequest.getParameter("numericbox1614079614831").length() >= 5) {
    	GuideCaptchaValidatorProvider apiProvider = sling.getService(GuideCaptchaValidatorProvider.class);
        String formPath = slingRequest.getResource().getPath();
        String captchaData = slingRequest.getParameter(GuideConstants.GUIDE_CAPTCHA_DATA);
        if (!apiProvider.validateCAPTCHA(formPath, captchaData).isCaptchaValid()){
            response.setStatus(400);
            return;
        }
    }

この例は、フォームの入力時にユーザーが指定した数値ボックスの桁数が 5 より大きい場合にのみ、ValidateCAPTCHA API がフォームの CAPTCHA を検証することを示しています。

オプション 1：Experience Manager Forms ValidateCAPTCHA API を使用して、カスタム送信アクションを使用して CAPTCHA を検証する

ValidateCAPTCHA API を使用してカスタム送信アクションを使用して CAPTCHA を検証するには、以下の手順を実行します。

1. ValidateCAPTCHA API を含むスクリプトをカスタム送信アクションに追加します。カスタム送信アクションについて詳しくは、「アダプティブフォーム用のカスタム送信アクションの作成」を参照してください。
2. アダプティブフォームの 送信 プロパティの 送信アクション ドロップダウンリストから、カスタム送信アクションの名前を選択します。
3. 「送信」をタップします。CAPTCHA は、カスタム送信アクションの ValidateCAPTCHA API で定義された条件に基づいて検証されます。

オプション 2：フォームを送信する前に、Experience Manager Forms ValidateCAPTCHA API を使用してユーザーアクションに対する CAPTCHA の検証を行う

また、アダプティブフォーム内のコンポーネントにルールを適用することで、ValidateCAPTCHA API を呼び出すこともできます。

例えば、アダプティブフォームに「CAPTCHA を検証」ボタンを追加し、ボタンをクリックするとサービスを呼び出すルールを作成します。

以下の図は、「CAPTCHA を検証」ボタンをクリックしてサービスを呼び出す方法を示しています。

ValidateCAPTCHA API を含むカスタムサーブレットをルールエディターを使用して呼び出し、検証結果に基づいてアダプティブフォームの送信ボタンを有効または無効にできます。

同様に、ルールエディターを使用して、アダプティブフォーム内の CAPTCHA を検証するカスタムメソッドを含めることができます。

カスタム CAPTCHA サービスの追加

Experience Manager Forms は、CAPTCHA サービスとして reCAPTCHA を提供します。CAPTCHA サービス​ドロップダウンリストに表示するカスタムサービスを追加できます。

以下は、アダプティブフォームに CAPTCHA サービスを追加するためのインターフェイスの実装例です。

package com.adobe.aemds.guide.service;

import org.osgi.annotation.versioning.ConsumerType;

/**
 * An interface to provide captcha validation at server side in Adaptive Form
 * This interface can be used to provide custom implementation for different captcha services.
 */
@ConsumerType
public interface GuideCaptchaValidator {
    /**
     * This method should define the actual validation logic of the captcha
     * @param captchaPropertyNodePath path to the node with CAPTCHA configurations inside form container
     * @param userResponseToken  The user response token provided by the CAPTCHA from client-side
     *
     * @return  {@link GuideCaptchaValidationResult} validation result of the captcha
     */
     GuideCaptchaValidationResult validateCaptcha(String captchaPropertyNodePath, String userResponseToken);

    /**
     * Returns the name of the captcha validator. This should be unique among the different implementations
     * @return  name of the captcha validator
     */
     String getCaptchaValidatorName();
}

captchaPropertyNodePath は、Sling リポジトリー内の CAPTCHA コンポーネントのリソースパスを参照します。CAPTCHA コンポーネントに特有の詳細を含めるには、このプロパティを使用します。例えば、captchaPropertyNodePath には、CAPTCHA コンポーネントで設定された reCAPTCHA クラウド設定に関する情報が含まれます。クラウド設定情報は、reCAPTCHA サービスを実装するための​サイトキー​と​秘密鍵​の設定を提供します。

userResponseToken は、フォームで CAPTCHA を解決した後に生成される g_recaptcha_response を指します。

Business.Adobe.com リソース

Multichannel Communication Ecommerce Integrations Targeted Content Responsive Forms Customer Experience Management Digital Rights Management