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

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

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

メモ

AEM Forms は reCaptcha v2 のみをサポートします。その他のバージョンはサポートされません。

アダプティブフォームの CAPTCHA は、AEM Forms アプリケーションのオフラインモードではサポートされていません。

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

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

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

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

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

    メモ

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

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

    メモ

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

    メモ

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

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

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

  5. Captcha service​ドロップダウンから、reCaptcha​を選択し、Google🔗によるReCAPTCHAサービスの説明に従ってreCAPTCHAサービスを設定した場合に、このサービスを有効にします。 「設定」ドロップダウンから設定を選択します。また、reCAPTCHA ウィジェットのサイズを「標準」または「コンパクト」から選択します。

    メモ

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

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

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

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now