ユニバーサルエディターでフォームに Google reCAPTCHA を追加する
Google reCAPTCHA は、人間のユーザーと自動ボットを区別して、フォームの保護を支援します。 Edge Delivery Services Formsでは、スコアベースのサイトキーを使用するreCAPTCHA Enterpriseのみがサポートされています。 このガイドでは、ユニバーサルエディターでフォームに対してこの保護を設定する方法について説明します。
目的：
- スコアベースのサイトキーを使用したreCAPTCHA Enterpriseの設定
- フォームに reCAPTCHA を追加する
- 実装を検証およびテストする
- パフパフォーマンスを監視および最適化する
前提条件
開始する前に、次を確認します。
アクセス要件
- AEM as a Cloud Service のオーサリングアクセス
- フォーム編集権限を持つユニバーサルエディターへのアクセス
技術要件
- アクティブな Google アカウント
- 請求が有効になっているGoogle Cloud Platform プロジェクト
- フォームの検証済みドメイン所有権
知識要件
- AEM Forms とユニバーサルエディターの基本的な理解
- クラウドサービスの設定に関する知識
- フォームセキュリティの概念に関する理解
フォームで reCAPTCHA を使用する理由
reCAPTCHA Enterpriseは、利用者とのやり取りを評価し、フォームをスパムや自動化された悪用から保護します。 Googleでは、次の機能を文書化しています。
価格、割り当て、サポート：費用は、Google サービス層とアセスメント量によって異なります。 使用状況はGoogleのクォータ の対象となり、無制限ではありません。 現在の価格、サブスクリプション要件、およびサポートオプションについては、Googleの階層の詳細を参照してください。 Googleでは、エンタープライズ層のカスタマーサポートと、専用のアカウント管理機能が一覧表示されています。
reCAPTCHA Enterprise の設定
要件：
- 課金が有効な Google Cloud プロジェクト
- プロジェクト ID （GCP ダッシュボードから）
- フォームのドメイン検証
- GCP および AEM への管理者アクセス権限
設定：
-
Google Cloud プロジェクトを作成または選択します
- Google Cloud コンソールに移動します
- 新しいプロジェクトを作成するか、既存のプロジェクトを選択します
- プロジェクト ID をメモします
-
reCAPTCHA Enterprise API を有効にします
- API とサービス／ライブラリに移動します
- 「reCAPTCHA Enterprise API」を検索します
- 「有効にする」をクリックします
-
API 資格情報を作成します
- API とサービス／資格情報に移動します
- 資格情報を作成／API キーをクリックします
- API キーをコピーして保存します
-
サイトキーを作成します
- セキュリティ/不正防止/キーに移動します
- 「キーを作成」をクリックし、アプリケーションタイプとして「Web」を選択します
- ドメインを追加します
- 「次の手順」（オプション）をクリックして、追加の設定を開きます
- 課題を引き続き活用するか？ スコアベースのサイトキーを作成する場合はオフにします
- 「キーを作成」をクリックし、サイトキーをコピーします
検証チェックポイント：次を確認します。
- プロジェクト ID
- API キー
- サイトキー
- Google Cloud の検証済みドメイン
図：フォームコンテナのクラウド設定を有効にする
設定：
-
設定ブラウザーにアクセスします
- AEM オーサーインスタンスにログインします。
- ツール／一般／設定ブラウザーに移動します
-
クラウド設定を有効にします
- フォームの設定コンテナを見つけます
- プロパティを選択します
- クラウド設定を確認します
- 「保存して閉じる」をクリックします
-
設定の確認
- コンテナプロパティに「クラウド設定」が表示されていることを確認します
検証チェックポイント：
- コンテナでクラウド設定が有効である
- 設定ブラウザーにコンテナが表示される
- プロパティで「クラウド設定」が有効と表示される
図：AEMのreCAPTCHA Enterprise設定インターフェイス
設定：
-
reCAPTCHA 設定にアクセスします
- ツール／クラウドサービス／reCAPTCHA に移動します
- フォームの設定コンテナを選択します
- 「作成」をクリックします
-
Enterprise 設定を指定します
- タイトル：わかりやすい名前（例：「Production reCAPTCHA」）
- 名前：システム名（自動生成またはカスタム）
- バージョン：ReCAPTCHA Enterprise を選択します
- プロジェクト ID：Google Cloud プロジェクト ID を入力します
- サイトキー：Google Cloud からサイトキーを入力します
- API キー：Google Cloud API キーを入力します
- キータイプ：スコアベースのサイトキーを選択します
-
セキュリティしきい値の設定
-
しきい値スコア：0.0～1.0 に設定
-
推奨値：
- 0.7～0.9：高いセキュリティ（一部の正規ユーザーをブロックする可能性あり）
- 0.5～0.7：バランスの取れたセキュリティ（推奨）
- 0.1～0.5：低いセキュリティ（より多くのユーザーが許可される）
-
-
保存して公開
- 「作成」をクリックして、設定を保存します
- 「公開」をクリックして使用可能にします
検証チェックポイント：
- 設定は正常に保存されました
- すべての必須フィールドに入力しました
- 設定が公開され、表示されました
- エラーメッセージはありません
reCAPTCHA のフォームへの追加
reCAPTCHA サービスを設定した後、次のようにフォームに保護を追加します。
図：非表示のCaptcha コンポーネントをフォームに追加する
AEM Sites のフォームに移動し、「編集」をクリックしてユニバーサルエディターで開きます。 エディターが読み込まれるまで待機します。
- AEM Sites のフォームに移動します
- 「編集」をクリックしてユニバーサルエディターで開きます
- エディターが読み込まれるまで待機します
コンテンツツリー（左側のパネル）で、アダプティブフォームセクションを見つけ、フォーム構造を展開して挿入ポイントを表示します。
- コンテンツツリー（左側のパネル）で、アダプティブフォームセクションを見つけます
- フォーム構造を展開して挿入ポイントを表示します
Captcha（Invisible）コンポーネントをフォームに追加します。
- フォームセクションで追加（+）アイコンをクリックします
- コンポーネントリストから、「Captcha （Invisible）」を選択します
- または、コンポーネントパネルからコンポーネントをドラッグ＆ドロップします
新しく追加された Captcha コンポーネントを選択し、reCAPTCHA 設定が使用されていることを検証します。
- 新しく追加された Captcha コンポーネントを選択します
- プロパティパネルで、reCAPTCHA 設定が使用されていることを検証します
- 基本的な設定には、追加の設定は必要ありません
変更を公開し、エラーがないことを検証します。
- ユニバーサルエディターで「公開」をクリックします
- 完了まで待機します
- エラーが表示されないことを検証します
実装の検証
保護されたフォームが次の場所で使用できるようになりました。
https://<branch>--<repo>--<owner>.aem.live/content/forms/af/
<form-name>
URL の例：
https://main--my-forms--company.aem.live/content/forms/af/
contact-us-form