アダプティブフォームでの reCAPTCHA の使用 using-reCAPTCHA-in-adaptive-forms
新しいアダプティブフォームを作成する、または AEM Sites ページにアダプティブフォームを追加する際には、最新の拡張可能なデータキャプチャであるコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。
コアコンポーネントに基づくアダプティブフォームの場合、 ここをクリック.
CAPTCHA(コンピュータと人間を区別する完全に自動化された公開チューリングテスト)は、人間と自動化されたプログラム/ボットを区別するために、オンライントランザクションで一般的に使用されるプログラムです。テストを行ってユーザーの反応を評価し、サイトを使用しているのが人間かボットかを判断します。テストが失敗した場合の続行を防ぎ、ボットによるスパムの投稿や悪意のある目的を防止することで、オンライントランザクションの安全性を高めます。
AEM Forms as a Cloud Service は、次の CAPTCHA ソリューションをサポートしています。
Google が提供する reCAPTCHA サービスの設定 google-reCAPTCHA
フォームの作成者は、Google による reCAPTCHA サービスを使用してアダプティブフォームに CAPTCHA を実装できます。サイトを保護する高度な CAPTCHA 機能を提供します。reCAPTCHA の仕組みについて詳しくは、Google reCAPTCHA を参照してください。AEM Forms では、reCAPTCHA v2 と reCAPTCHA Enterprise をサポートします。その他のバージョンはサポートされません。また、アダプティブフォームの CAPTCHA は、AEM Forms アプリのオフラインモードではサポートされていません。要件に基づいて、reCAPTCHA サービスを設定して、次を有効にすることができます。
reCAPTCHA Enterprise の設定 steps-to-implement-reCAPTCHA-enterprise-in-forms
-
を作成または選択します。 Google Cloud プロジェクト を有効にします。 reCAPTCHA Enterprise API.
-
の取得 プロジェクト ID をクリックし、 API キー および web サイトのサイトキー.
-
クラウドサービス用の設定コンテナを作成します。
-
ツール/一般/設定ブラウザー に移動します。
-
次の手順に従って、フォルダーを選択するか、フォルダーを作成し、クラウド設定用にフォルダーを有効にします。
- 設定ブラウザーで、フォルダーを選択して「プロパティ」をクリックします。
- 設定プロパティダイアログで、「クラウド設定」を有効にします。
- 「保存して閉じる」を選択して設定内容を保存し、ダイアログを閉じます。
-
-
のクラウドサービスを設定しますreCAPTCHA Enterprise。
- Experience Manager オーサーインスタンスで、 /クラウドサービス に移動します。
- 「reCAPTCHA」を選択します。設定ページが表示されます。作成した設定コンテナを選択し、「作成」をクリックします。
- としてバージョンを選択し、reCAPTCHA Enterprise名前、reCAPTCHA Enterprise サービスのプロジェクト ID、サイトキーおよび API キー(手順 2 および で取得)を指定します。
- キーのタイプを選択します。キーのタイプは、Google Cloud プロジェクトで設定したサイトキー(チェックボックスサイトキー または スコアベースのサイトキー など)と同じにする必要があります。
- を指定します。 0 ~ 1 の範囲のしきい値スコア. スコアがしきい値以上になると、人間のインタラクションを識別し、それ以外の場合はボットのインタラクションとみなされます。
- 「作成」を選択して、クラウドサービス設定を作成します。
reCAPTCHA Enterprise サービスを有効にすると、アダプティブフォームで使用できるようになります。アダプティブフォームでの CAPTCHA の使用を参照してください。
Google reCAPTCHA v2 の設定 steps-to-implement-reCAPTCHA-v2-in-forms
-
Google から reCAPTCHA API キーペアを取得します。これには、サイトキー と 秘密鍵 が含まれます。
-
クラウドサービス用の設定コンテナを作成します。
-
ツール/一般/設定ブラウザー に移動します。
-
次の手順に従って、フォルダーを選択するか、フォルダーを作成し、クラウド設定用にフォルダーを有効にします。
- 設定ブラウザーで、フォルダーを選択して「プロパティ」をクリックします。
- 設定プロパティダイアログで、「クラウド設定」を有効にします。
- 「保存して閉じる」を選択して設定内容を保存し、ダイアログを閉じます。
-
-
reCAPTCHA v2 用にクラウドサービスを設定します。
- AEM オーサーインスタンスで、 /クラウドサービス に移動します。
- 「reCAPTCHA」を選択します。設定ページが表示されます。作成した設定コンテナを選択し、「作成」をクリックします。
- バージョンを reCAPTCHA v2 として選択し、reCAPTCHA サービスの名前、サイトキー、秘密鍵(手順 1 で取得)を指定し、「作成」を選択してクラウドサービス設定を作成します。
- コンポーネントを編集ダイアログで、サイトおよび手順 1 で取得した秘密鍵を指定します。「設定を保存」を選択してから、「OK」を選択して設定を完了します。
reCAPTCHA サービスを設定すると、アダプティブフォームで使用できるようになります。詳細情報は、アダプティブフォームでの CAPTCHA の使用を参照してください。
アダプティブフォームでの Google reCAPTCHA の使用 using-reCAPTCHA
アダプティブフォームで Google reCAPTCHA を使用するには:
-
アダプティブフォームを編集モードで開きます。
note note NOTE アダプティブフォームの作成時に選択した設定コンテナに、reCAPTCHA クラウドサービスが含まれていることを確認してください。アダプティブフォームのプロパティを編集して、そのアダプティブフォームに関連付けられている設定コンテナを変更することもできます。 -
Captcha コンポーネントを、コンポーネントブラウザーからアダプティブフォームにドラッグ&ドロップします。
note note NOTE - アダプティブフォームでの複数の Captcha コンポーネントの使用はサポートされていません。また、遅延読み込み用とマークされたパネルやフラグメントでは、CAPTCHA を使用しないことをお勧めします。
- reCaptcha は時間に依存し、約数分で有効期限が切れます。 そのため、アダプティブフォームに「送信」ボタンを配置する直前に Captcha コンポーネントを配置することをお勧めします。
-
追加した Captcha コンポーネントを選択し、「 」を選択してそのプロパティを編集します。
-
CAPTCHA ウィジェットのタイトルを指定します。デフォルト値は Captcha です。タイトルを表示しない場合は、「タイトルを非表示にする」を選択します。
-
Google が提供する reCAPTCHA サービスの説明に従って設定した場合は、Captcha サービス ドロップダウンから「reCAPTCHA」を選択して reCAPTCHA サービスを有効にします。
-
設定ドロップダウンから、 reCAPTCHA Enterprise または reCAPTCHA v2
- 次を選択した場合、 reCAPTCHA Enterprise バージョンの場合、キーのタイプは チェックボックス または スコアベース の場合、設定時の選択内容に基づきます web サイトのサイトキー:
note note NOTE - クラウド設定で、 キーの種類 as チェックボックス を指定した場合、captcha の検証が失敗すると、カスタマイズされたエラーメッセージがインラインメッセージとして表示されます。
- クラウド設定で、 キーの種類 as スコアベース を指定した場合、カスタマイズされたエラーメッセージは、captcha の検証が失敗した場合にポップアップメッセージとして表示されます。
- サイズは、「標準」と「コンパクト」から選択できます。
- バインド参照 を選択した場合は連結データが送信され、それ以外の場合は非連結データが送信されます。****フォームが送信されたときの、非連結データと連結データ(バインド参照が 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 バージョン:
- reCAPTCHA ウィジェットのサイズを、「標準」または「コンパクト」から選択します。
- また、「非表示 option to show the CAPTCHA chall」オプションを使用して、疑わしいアクティビティの場合にのみ CAPTCHA チャレンジを表示できます。
アダプティブフォーム上で reCAPTCHA サービスが有効になります。フォームをプレビューして、CAPTCHA が機能していることを確認できます。以下に表示されている reCAPTCHA による保護 バッジが保護されたフォームに表示されます。
-
各プロパティを保存します。
ルールに基づいた CAPTCHA コンポーネントの表示/非表示 show-hide-captcha
アダプティブフォームのコンポーネントに適用するルールに基づいて、CAPTCHA コンポーネントの表示/非表示を切り替えることができます。コンポーネントを選択して、「 」を選択し、「作成」を選択してルールを作成します。ルールの作成について詳しくは、「ルールエディター」を参照してください。
例えば、CAPTCHA コンポーネントは、フォームの「通貨の値」フィールドの値が 25000 を超える場合にのみ、アダプティブフォームに表示する必要があります。
フォームの「通貨の値」フィールドを選択して、以下のルールを作成します。
CAPTCHA の検証 validate-captcha
アダプティブフォーム内の CAPTCHA は、フォームを送信するとき、またはユーザーの操作や条件に基づいて CAPTCHA 検証を行うときに検証できます。
フォーム送信時の CAPTCHA の検証 validation-form-submission
アダプティブフォームの送信時に CAPTCHA を自動的に検証するには、以下の手順を実行します。
- CAPTCHA コンポーネントを選択し、 を選択して、コンポーネントのプロパティを表示します。
- 「CAPTCHA を検証」セクションで、「フォーム送信時に CAPTCHA を検証」を選択します。
- 「 」を選択して、コンポーネントプロパティを保存します。
ユーザーの操作と条件に対する CAPTCHA の検証 validate-captcha-user-action
条件とユーザー操作に基づいて 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 を検証」ボタンをクリックしてサービスを呼び出す方法を示しています。
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
- AEM アダプティブフォームの作成
- AEM Sites ページへの AEM アダプティブフォームの追加
- AEM アダプティブフォームへテーマを適用
- AEM アダプティブフォームへコンポーネントを追加
- AEM アダプティブフォームでの Captcha の使用
- AEM アダプティブフォームの PDF バージョン(DoR)の生成
- AEM アダプティブフォームを翻訳
- フォームの使用状況を追跡するアダプティブフォームの Adobe Analytics を有効にする
- Microsoft SharePoint へアダプティブフォームを接続
- Microsoft Power Automate へアダプティブフォームを接続
- Microsoft OneDrive へアダプティブフォームを接続
- Microsoft Azure Blob Storage へアダプティブフォームを接続
- Salesforce へアダプティブフォームを接続
- AEM アダプティブフォームで Adobe Sign を使用
- アダプティブフォームの新しいロケールを追加
- データベースへアダプティブフォームデータを送信
- REST エンドポイントへアダプティブフォームデータを送信
- AEM ワークフローへアダプティブフォームデータを送信
- フォームポータルを使用して AEM web サイト上の AEM アダプティブフォームを一覧表示
- アダプティブフォームへのバージョン管理、コメント、注釈の追加
- アダプティブフォームの比較