ドキュメントAEM 6.5ユーザーガイド

アダプティブフォームの CAPTCHA の使用 using-captcha-in-adaptive-forms

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
バージョン
記事リンク
AEM as a Cloud Service
ここをクリックしてください
AEM 6.5
この記事

アダプティブフォームの新規作成または AEM Sites ページへのアダプティブフォームの追加には、最新の拡張可能なデータキャプチャコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。

CAPTCHA（コンピュータと人間を区別する完全に自動化された公開チューリングテスト）は、人間と自動化されたプログラム／ボットを区別するために、オンライントランザクションで一般的に使用されるプログラムです。テストを行ってユーザーの反応を評価し、サイトを使用しているのが人間かボットかを判断します。テストが失敗した場合の続行を防ぎ、ボットがスパムや悪意のある目的の投稿を防ぐことで、オンライントランザクションの安全性を高めます。

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

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

アダプティブフォーム向けに Google が提供する reCAPTCHA サービスを設定する google-reCAPTCHA

AEM Forms のユーザーは、Google が提供する reCAPTCHA サービスを使用してアダプティブフォームに CAPTCHA を実装できます。サイトを保護する高度な CAPTCHA 機能を提供します。reCAPTCHA の仕組みについて詳しくは、Google reCAPTCHA を参照してください。reCAPTCHA v2 や reCAPTCHA Enterprise を含む reCAPTCHA サービスは、AEM Forms に統合されています。要件に基づいて、reCAPTCHA サービスを設定して、次を有効にすることができます。

reCAPTCHA

reCAPTCHA Enterprise の設定 steps-to-implement-reCAPTCHA-enterprise-in-forms

  1. reCAPTCHA Enterprise API で有効になった reCAPTCHA Enterprise プロジェクトを作成します。

  2. プロジェクト ID を取得します。

  3. API キーおよび web サイトのサイトキーを作成します。

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

    1. ツール／一般／設定ブラウザー ​に移動します。詳しくは、設定ブラウザーのドキュメントを参照してください。

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

      1. 設定ブラウザーで、global フォルダーを選択して「プロパティ」を選択します。
      2. 設定プロパティダイアログで、「クラウド設定」を有効にします。
      3. 「保存して閉じる」を選択して設定内容を保存し、ダイアログを閉じます。

    3. 設定ブラウザーで「作成」を選択します。

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

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

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

    1. Experience Manager オーサーインスタンスで、 tools-1 ／クラウドサービス ​に移動します。

    2. 「reCAPTCHA」を選択します。設定ページが表示されます。前の手順で作成した設定コンテナを選択し、「作成」を選択します。

    3. reCAPTCHA Enterprise としてバージョンを選択し、名前、reCAPTCHA Enterprise サービスのプロジェクト ID、サイトキーおよび API キー（手順 2 および 3 で取得）を指定します。

    4. キーのタイプを選択します。キーのタイプは、Google Cloud プロジェクトで設定したサイトキー（チェックボックスサイトキー ​または​ スコアベースのサイトキー ​など）と同じにする必要があります。

    5. 0～1 の範囲でしきい値スコアを指定します（クリックしてスコアの詳細を見る）。スコアがしきい値以上になると、人間のインタラクションを識別し、それ以外の場合はボットのインタラクションとみなされます。

      メモ：

      • フォーム作成者は、フォームの送信を中断しないために適切な範囲でスコアを指定できます。

    6. 「作成」を選択して、クラウドサービス設定を作成します。

    7. コンポーネントを編集ダイアログで、名前、プロジェクト ID、サイトキー、API キー（手順 2 および 3 で取得）を指定し、キータイプを選択して、しきい値スコアを入力します。「設定を保存」を選択してから、「OK」を選択して設定を完了します。

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

reCAPTCHA Enterprise

Google reCAPTCHA v2 の設定 steps-to-implement-reCAPTCHA-v2-in-forms

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

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

    1. ツール／一般／設定ブラウザー ​に移動します。詳しくは、設定ブラウザーのドキュメントを参照してください。

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

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

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

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

    3. 設定ブラウザーで「作成」を選択します。

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

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

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

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

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

reCAPTCHA v2

アダプティブフォームでの reCAPTCHA の使用 using-reCAPTCHA

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

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

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

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

    note note
    NOTE
    アダプティブフォームでの複数の Captcha コンポーネントの使用はサポートされていません。また、遅延読み込み用とマークされたパネルやフラグメントでは、CAPTCHA を使用しないことをお勧めします。
    note note
    NOTE
    Captcha には時間制限があり、約 1 分で有効期限が切れます。そのため、アダプティブフォームに「送信」ボタンを配置する直前に Captcha コンポーネントを配置することをお勧めします。

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

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

  5. Google が提供する reCAPTCHA サービスの説明に従って設定した場合は、Captcha サービス ​ドロップダウンから「reCAPTCHA」を選択して reCAPTCHA サービスを有効にします。

  6. 設定ドロップダウンから設定を選択します。

  7. 選択した設定のバージョンが reCAPTCHA Enterprise の場合：

    1. キータイプ ​を​ チェックボックス ​として、reCAPTCHA クラウド設定を選択できます。チェックボックスのキータイプでは、Captcha の検証が失敗した場合、カスタマイズされたエラーメッセージがインラインメッセージとして表示されます。サイズは、「標準」と「コンパクト」から選択できます。

    2. キータイプ ​を​ スコアベース ​として、reCAPTCHA クラウド設定を選択できます。スコアベースのキータイプでは、Captcha の検証が失敗した場合、カスタマイズされたエラーメッセージがポップアップメッセージとして表示されます。

    3. バインド参照 ​を選択した場合は連結データが送信され、それ以外の場合は非連結データが送信されます。フォームが送信されたときの、非連結データと連結データ（バインド参照が SSN）の XML の例を以下に示します。

      code language-xml 
          <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <afData>
    <afUnboundData>
        <data>
            <captcha16820607953761>
                <captchaType>reCAPTCHAEnterprise</captchaType>
                <captchaScore>0.9</captchaScore>
            </captcha16820607953761>
        </data>
    </afUnboundData>
    <afBoundData>
        <Root
            xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
            <PersonalDetails>
                <SSN>371237912</SSN>
                <FirstName>Sarah </FirstName>
                <LastName>Smith</LastName>
            </PersonalDetails>
            <OtherInfo>
                <City>California</City>
                <Address>54 Residency</Address>
                <State>USA</State>
                <Zip>123112</Zip>
            </OtherInfo>
        </Root>
    </afBoundData>
    <afSubmissionInfo>
        <stateOverrides/>
        <signers/>
        <afPath>/content/dam/formsanddocuments/captcha-form</afPath>
        <afSubmissionTime>20230608034928</afSubmissionTime>
    </afSubmissionInfo>
    </afData>
      code language-xml 
          <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <afData>
    <afUnboundData>
        <data/>
    </afUnboundData>
    <afBoundData>
        <Root
            xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
            <PersonalDetails>
                <SSN>
                    <captchaType>reCAPTCHAEnterprise</captchaType>
                    <captchaScore>0.9</captchaScore>
                </SSN>
                <FirstName>Sarah</FirstName>
                <LastName>Smith</LastName>
            </PersonalDetails>
            <OtherInfo>
                <City>California</City>
                <Address>54 Residency</Address>
                <State>USA</State>
                <Zip>123112</Zip>
            </OtherInfo>
        </Root>
    </afBoundData>
    <afSubmissionInfo>
        <stateOverrides/>
        <signers/>
        <afPath>/content/dam/formsanddocuments/captcha-form</afPath>
        <afSubmissionTime>20230608035111</afSubmissionTime>
    </afSubmissionInfo>
    </afData>

    選択した設定のバージョンが reCAPTCHA v2 の場合：

    1. reCAPTCHA ウィジェットのサイズを、「標準」または「コンパクト」から選択します。また、「非表示」オプションを使用して、疑わしいアクティビティの場合にのみ CAPTCHA チャレンジを表示できます。以下に表示されている reCAPTCHA による保護 ​バッジが保護されたフォームに表示されます。

      reCAPTCHA バッジによって保護された Google

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

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

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

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

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

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

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

ルールを表示／非表示

NOTE
  • サイズを​ 非表示 ​にするか、reCAPTCHA Enterprise スコアベースのキーを使用して reCAPTCHA v2 の設定を選択した場合、表示／非表示オプションは適用されません。

CAPTCHA の検証 validate-captcha

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

フォーム送信時の CAPTCHA の検証 validation-form-submission

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

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

ユーザーの操作と条件に対する CAPTCHA の検証 validate-captcha-user-action

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

  1. Captcha コンポーネントを選択し、「 cmppr 」を選択してコンポーネントプロパティを表示します。

  2. 「CAPTCHA を検証」セクションの、「ユーザーアクションで CAPTCHA を検証する」を選択します。

  3. 「 完了 」を選択して、コンポーネントプロパティを保存します。

    note note
    NOTE
    サイズを​ 非表示 ​にするか、reCAPTCHA Enterprise スコアベースのキーを使用して reCAPTCHA v2 の設定を選択した場合、ユーザーアクションの有効な 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 を検証するには、以下の手順を実行します。

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

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

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

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

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

CAPTCHA の検証

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

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

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2