コアコンポーネントに基づく AEM アダプティブフォームでの Google reCAPTCHA の使用 using-reCAPTCHA-in-adaptive-forms

適用先
記事リンク
コアコンポーネントに基づくアダプティブフォーム
この記事
基盤コンポーネントに基づくアダプティブフォーム
ここをクリックしてください

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

AEM Forms as a Cloud Service は、次の CAPTCHA ソリューションをサポートしています。

AEM Forms コアコンポーネントをGoogleの reCAPTCHA サービスに接続 connect-your-forms-environment-with-recaptcha-service-by-google

フォームの作成者は、Google による reCAPTCHA サービスを使用してアダプティブフォームに CAPTCHA を実装できます。サイトを保護する高度な CAPTCHA 機能を提供します。reCAPTCHA の仕組みについて詳しくは、Google reCAPTCHA を参照してください。フォーム送信時に CAPTCHA チャレンジを表示するために使用します。AEM Forms as a Cloud Service は、Google reCAPTCHA v2 および reCAPTCHA Enterprise をサポートします。 その他のバージョンはサポートされません。また、アダプティブFormsの reCAPTCHA は、AEM Forms アプリのオフラインモードではサポートされないことに注意してください。

要件に基づいて、reCAPTCHA サービスを設定して、次を有効にすることができます。

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

  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 キーペアを取得します。これには、サイトキー ​と​ 秘密鍵 ​が含まれます。

    Google の Web サイトで Google reCAPTCHA 設定を作成して、reCAPTCHA キーを取得する

  2. 設定コンテナを AEM Forms as a Cloud Service 環境に作成します。設定コンテナには、AEM を外部サービスに接続するために使用されるクラウド設定が格納されます。Google で AEM Forms 環境を reCAPTCHA サービスに接続するための設定コンテナを作成および設定するには、次の手順を実行します。

    1. AEM Forms as a Cloud Service インスタンスを開きます。

    2. ツール/一般/設定ブラウザー ​に移動します。設定ブラウザーでは、次の操作を実行できます。

    3. 既存のフォルダーを選択するか、フォルダーを作成します。フォルダーを作成して、そのフォルダーの「クラウド設定」オプションを有効にしたり、既存のフォルダーの「クラウド設定を有効にする」オプションを有効にしたりできます。

      • フォルダーを作成し、それに対して「クラウド設定」オプションを有効にするには、次の手順を実行します。

        1. 設定ブラウザーで「作成」をタップします。
        2. 設定作成ダイアログで、名前とタイトルを指定し、「クラウド設定」オプションを選択します。
        3. 作成」をクリックします
      • 既存のフォルダーに対して「クラウド設定」オプションを有効にするには:

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

    1. AEM オーサーインスタンスで、 tools-1 クラウドサービス ​に移動し、「reCAPTCHA」を選択します。
    2. 前の節で作成または更新した設定コンテナを選択します。「作成」を選択します。
    3. reCAPTCHA サービス用(手順 1 で取得)に​ タイトル名前サイトキー ​および 秘密鍵 ​を指定します。「作成」を選択します。

    AEM Forms 環境を Google の reCAPTCHA サービスに接続するよう Cloud Service を設定

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

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

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

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

  1. AEM Forms as a Cloud Service インスタンスを開きます。

  2. Formsフォームとドキュメント ​に移動します。

  3. アダプティブフォームを選択し、「プロパティ」を選択します。「設定コンテナ」オプションで AEM Forms を Google の reCAPTCHA サービスに接続するクラウド設定を含む設定コンテナを選択し、「保存して閉じる」を選択します。

    このような設定コンテナがない場合は、Googleによる reCAPTCHA サービスを使用した AEM Forms 環境の接続の節を参照して、設定コンテナを作成する方法を確認してください。

    設定コンテナの選択

  4. アダプティブフォームを選択し、「編集」を選択します。アダプティブフォームエディターでアダプティブフォームが開きます。

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

    note note
    NOTE
    • Google reCAPTCHA 検証は時間的制約があり、数分で期限切れになります。そのため、アダプティブフォーム reCAPTCHA コンポーネントを​ 送信 ​ボタンのすぐ前に配置することをお勧めします。
  6. アダプティブフォーム reCAPTCHA コンポーネントを選択し、プロパティ プロパティアイコン アイコンを選択します。プロパティダイアログが開きます。次の必須プロパティを指定します。

    • 名前: フォームコンポーネントは、フォーム内とルールエディター内の両方で一意の名前で簡単に識別できますが、名前にスペースや特殊文字を含めることはできません。

    • タイトル ​: CAPTCHA ウィジェットのタイトルを指定します。 デフォルト値は Captcha です。タイトルを表示しない場合は、「タイトルを非表示にする」を選択します。 タイトルのリッチテキストを許可 を選択して、リッチテキスト形式でタイトルを編集します。 タイトルを「非連結フォーム要素 としてマークすることもでき す。

    • CAPTCHA 設定 ​: reCAPTCHA Enterprise または reCAPTCHA v2 の設定ドロップダウンから、フォームのGoogle reCAPTCHA ダイアログを表示する設定を選択します。

      1. 次を選択した場合、 reCAPTCHA Enterprise バージョンの場合、キーのタイプは チェックボックス または スコアベース ​の場合、設定時の選択内容に基づきます web サイトのサイトキー:

        note note
        NOTE
        • クラウド設定で、 キーの種類 as チェックボックス ​を指定した場合、captcha の検証が失敗すると、カスタマイズされたエラーメッセージがインラインメッセージとして表示されます。
        • クラウド設定で、 キーの種類 as スコアベース ​を指定した場合、カスタマイズされたエラーメッセージは、captcha の検証が失敗した場合にポップアップメッセージとして表示されます。

        1. サイズは、「**標準**」と「**コンパクト**」から選択できます。

      note note
      NOTE
      • 同様の目的で、環境内に複数のクラウド設定を作成することができます。そのため、サービスは慎重に選択してください。サービスが表示されない場合は、Googleによる reCAPTCHA サービスを使用した AEM Forms 環境の接続で、AEM Forms 環境と Google の reCAPTCHA サービスを接続する Cloud Service を作成する方法を参照してください。
    • Captcha サイズ:「Google reCAPTCHA チャレンジ」ダイアログの表示サイズを選択できます。「コンパクト」オプションを使用すると小さいサイズを表示し、「標準」オプションを使用すると比較的大きいサイズのGoogle reCAPTCHA チャレンジダイアログを表示します。
      次を選択した場合、 reCAPTCHA v2 バージョン:

      1. reCAPTCHA ウィジェットのサイズを、「標準」または「コンパクト」から選択します。
      2. また、「非表示 option to show the CAPTCHA chall」オプションを使用して、疑わしいアクティビティの場合にのみ CAPTCHA チャレンジを表示できます。

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

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

  7. 完了」を選択します。

    reCAPTCHA で保護された がアダプティブフォームに表示されます。Google reCAPTCHA サービスを使用するように設定されているすべてのアダプティブフォームに表示されます。

    現在、フォームの入力者は Google reCAPTCHA サービスによって提供される課題を正常にクリアした正規のフォームのみを送信できます。

よくある質問

Q:アダプティブフォーム内で複数の Captcha コンポーネントを使用できますか。
A: アダプティブフォームでは、複数の Captcha コンポーネントを使用することはできません。また、遅延読み込みのマークが付けられたフラグメントやパネルで Captcha コンポーネントを使用することはお勧めしません。

関連トピック see-also

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