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

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

バージョン
記事リンク
AEM 6.5
ここをクリックしてください
AEM as a Cloud Service
この記事
適用先
基盤コンポーネントに基づくアダプティブフォーム。
コアコンポーネントに基づくアダプティブフォームの場合、 ここをクリック.

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

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

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

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

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

reCAPTCHA

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

  1. を作成または選択します。 Google Cloud プロジェクト を有効にします。 reCAPTCHA Enterprise API.

  2. の取得 プロジェクト ID をクリックし、 API キー および web サイトのサイトキー.

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

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

    2. 次の手順に従って、フォルダーを選択するか、フォルダーを作成し、クラウド設定用にフォルダーを有効にします。

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

    1. Experience Manager オーサーインスタンスで、 tools-1 クラウドサービス ​に移動します。
    2. reCAPTCHA」を選択します。設定ページが表示されます。作成した設定コンテナを選択し、「作成」をクリックします。
    3. としてバージョンを選択し、reCAPTCHA Enterprise名前、reCAPTCHA Enterprise サービスのプロジェクト ID、サイトキーおよび API キー(手順 2 および で取得)を指定します。
    4. キーのタイプを選択します。キーのタイプは、Google Cloud プロジェクトで設定したサイトキー(チェックボックスサイトキー ​または​ スコアベースのサイトキー ​など)と同じにする必要があります。
    5. を指定します。 0 ~ 1 の範囲のしきい値スコア. スコアがしきい値以上になると、人間のインタラクションを識別し、それ以外の場合はボットのインタラクションとみなされます。
    6. 作成」を選択して、クラウドサービス設定を作成します。

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

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

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

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

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

    2. 次の手順に従って、フォルダーを選択するか、フォルダーを作成し、クラウド設定用にフォルダーを有効にします。

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

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

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

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

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

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

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

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

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

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

  6. 設定ドロップダウンから、 reCAPTCHA Enterprise または reCAPTCHA v2

    1. 次を選択した場合、 reCAPTCHA Enterprise バージョンの場合、キーのタイプは チェックボックス または スコアベース ​の場合、設定時の選択内容に基づきます web サイトのサイトキー:
    note note
    NOTE
    • クラウド設定で、 キーの種類 as チェックボックス ​を指定した場合、captcha の検証が失敗すると、カスタマイズされたエラーメッセージがインラインメッセージとして表示されます。
    • クラウド設定で、 キーの種類 as スコアベース ​を指定した場合、カスタマイズされたエラーメッセージは、captcha の検証が失敗した場合にポップアップメッセージとして表示されます。
    1. サイズは、「標準」と「コンパクト」から選択できます。
    2. バインド参照 ​を選択した場合は連結データが送信され、それ以外の場合は非連結データが送信されます。****​フォームが送信されたときの、非連結データと連結データ(バインド参照が 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 ウィジェットのサイズを、「標準」または「コンパクト」から選択します。
    2. また、「非表示 option to show the CAPTCHA chall」オプションを使用して、疑わしいアクティビティの場合にのみ CAPTCHA チャレンジを表示できます。

    アダプティブフォーム上で reCAPTCHA サービスが有効になります。フォームをプレビューして、CAPTCHA が機能していることを確認できます。以下に表示されている reCAPTCHA による保護 バッジが保護されたフォームに表示されます。
    reCAPTCHA バッジによって保護された Google

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

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

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

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

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

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

ルールの表示/非表示

NOTE
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. 完了 」を選択して、コンポーネントのプロパティを保存します。

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 を検証するカスタムメソッドを含めることができます。

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

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 インスタンスに設定をデプロイします。

関連トピック see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab