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

CAPTCHA（Computers and Humans Apart を伝える完全自動公開チューリングテスト）は、人と自動化されたプログラムまたはボットを区別するためにオンライントランザクションで一般的に使用されるプログラムです。テストを行ってユーザーの反応を評価し、サイトを使用しているのが人間かボットかを判断します。テストが失敗した場合の続行を防ぎ、ボットがスパムや悪意のある目的を掲示するのを防ぎ、オンライントランザクションのセキュリティを確保します。

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

メモ

AEM Forms は reCaptcha v2 のみをサポートします。その他のバージョンはサポートされません。
アダプティブフォームの CAPTCHA は、AEM Forms アプリのオフラインモードではサポートされていません。

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

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

reCAPTCHA

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

取得 reCAPTCHA API キーペア Googleからサイトキーと秘密鍵が含まれます。
クラウドサービスの設定コンテナを作成します。
1. ツール／一般／設定ブラウザーに移動します。
  - 詳しくは、設定ブラウザーのドキュメントを参照してください。
2. 以下の手順を実行して、global フォルダーをクラウド設定用に有効にします。クラウドサービス設定用に別のフォルダーを作成する場合は、この手順をスキップしてください。
  1. 設定ブラウザーで、global フォルダーを選択して「プロパティ」をタップします。
  2. 設定プロパティダイアログで、「クラウド設定」を有効にします。
  3. 「保存して閉じる」をタップして設定内容を保存し、ダイアログを閉じます。
3. 設定ブラウザーで「作成」をタップします。
4. 設定を作成ダイアログでフォルダーのタイトルを指定し、「クラウド設定」を有効にします。
5. 「作成」をタップします。これで、クラウドサービス設定が有効になったフォルダーが作成されました。
reCAPTCHA のクラウドサービスを設定します。
1. Experience Manager オーサーインスタンスで、／クラウドサービスに移動します。
2. タップ reCAPTCHA. 設定ページが開きます。前の手順で作成した設定コンテナを選択し、をタップします。作成.
3. reCAPTCHA サービスの名前、サイトキー、秘密鍵を指定し、「作成」をタップして、クラウドサービスの設定を作成します。
4. コンポーネントを編集ダイアログで、サイトおよび手順 1 で取得した秘密鍵を指定します。「設定を保存」をタップしてから、「OK」をタップして設定を完了します。
reCAPTCHA サービスを設定すると、アダプティブフォームで使用できるようになります。詳しくは、「アダプティブフォームでの CAPTCHA の使用」を参照してください。

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

アダプティブフォームで CAPTCHA を使用するには、以下を実行します。

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

メモ

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

メモ

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

メモ

Captcha は時間に依存し、約 1 分で有効期限が切れます。そのため、アダプティブフォームに「送信」ボタンを配置する直前に Captcha コンポーネントを配置することをお勧めします。
追加した Captcha コンポーネントを選択して、をタップし、プロパティを編集します。
CAPTCHA ウィジェットのタイトルを指定します。デフォルト値は Captcha です。タイトルを表示しない場合は、「タイトルを非表示にする」を選択します。
Captcha サービスドロップダウンで「reCaptcha」を選択して、reCAPTCHA サービスを有効にします（「Google による reCAPTCHA サービス」に記載されている手順に従って reCAPTCHA サービスが設定されている場合）。設定ドロップダウンから設定を選択します。
reCAPTCHA ウィジェットのタイプを「標準」または「コンパクト」から選択します。また、「非表示」オプションを使用して、疑わしいアクティビティの場合にのみ CAPTCHA チャレンジを表示できます。以下に示す reCAPTCHA バッジによって保護されたが、保護されたフォームに表示されます。

メモ

デフォルトの Experience Manager CAPTCHA サービスは非推奨なので、Captcha サービスドロップダウンで「デフォルト」を選択しないでください。
各プロパティを保存します。

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

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

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

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

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

ルールの表示／非表示

CAPTCHA の検証

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

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

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

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

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

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

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

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 を検証するには、以下の手順を実行します。

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

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

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

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

以下の図は、「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 を指します。

reCAPTCHA サービスドメインの編集

reCAPTCHA サービスは、https://www.recaptcha.net/ をデフォルトドメインとして使用します。設定を変更して https://www.google.com/ を設定したり、reCAPTCHA サービスの読み込み、レンダリング、検証を行うカスタムドメイン名を設定したりできます。

アダプティブフォームおよびインタラクティブ通信 Web チャネル設定の af.cloudservices.recaptcha.domain プロパティを設定して、https://www.google.com/ または他のカスタムドメイン名を指定します。以下の JSON ファイルにサンプルが表示されています。

{
  "af.cloudservices.recaptcha.domain": "https://www.google.com/"
}

設定の値をセットするには、AEM SDK を使用して OSGi 設定を生成し、Cloud Service インスタンスに設定をデプロイします。

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

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

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

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

CAPTCHA の検証

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

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

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

reCAPTCHA サービスドメインの編集

Business.Adobe.com リソース

このページ

次を表示：

学習

ドキュメント

コミュニティ

サポート

リソース

アドビアカウント

Adobe