アダプティブフォームから Edge Delivery Services への公開

この機能は、早期アクセスプログラムを通じて使用できます。アクセス権をリクエストするには、GitHub 組織名とリポジトリ名を記載したメールを公式アドレスから aem-forms-ea@adobe.com に送信してください。例えば、リポジトリ URL が https://github.com/adobe/abc の場合、組織名は「adobe」、リポジトリ名は「abc」になります。

フォームが完成し、使用できる状態になったら、公開して、顧客がデータの収集と送信にアクセスできます。公開すると、フォームが Edge Delivery で使用できるようになり、ユーザーがシームレスに操作できます。このプロセスにより、顧客はフォームにリアルタイムで入力して送信できるので、効率的なデータ取得と効率化された処理が確保されます。

前提条件

フォームの公開

次の手順に従って、EDS ベースのアダプティブフォーム ​を Edge Delivery に公開できます。

AEM パブリッシャーのリファラーフィルターを設定して、Edge Delivery でのフォーム送信を有効にする

フォームの安全な送信を確保するには、AEM パブリッシャーで​ リファラーフィルター ​を設定する必要があります。このフィルターにより、Edge Delivery からの承認されたリクエストのみが書き込み操作（POST、PUT、DELETE、COPY、MOVE）を実行できるようになり、不正な変更が防止されます。AEM パブリッシャーのリファラーフィルターを設定する手順は次のとおりです。

Edge Delivery で AEM インスタンス URL を更新

フォームブロック内の constant.js ファイルで submitBaseUrl を変更して、AEM インスタンス URL を指定します。

クラウド設定の場合：

export const submitBaseUrl = 'https://publish-p120-e12.adobeaemcloud.com';

ローカル開発の場合：

export const submitBaseUrl = 'http://localhost:4503';

CORS 設定を変更

CORS 設定 ​を調整して、Edge Delivery ドメインからのフォーム送信リクエストを許可します。詳しくは、CORS 設定ガイドを参照してください。

サンプル CORS 設定：

# Developer Localhost
SetEnvIfExpr "env('CORSProcessing') == 'true' && req_novary('Origin') =~ m#(http://localhost(:\d+)?$)#" CORSTrusted=true

# Franklin Stage
SetEnvIfExpr "env('CORSProcessing') == 'true' && req_novary('Origin') =~ m#(https://.*\.hlx\.page$)#" CORSTrusted=true

# Franklin Live
SetEnvIfExpr "env('CORSProcessing') == 'true' && req_novary('Origin') =~ m#(https://.*\.hlx\.live$)#" CORSTrusted=true

ローカル開発について詳しくは、開発 UI ホスト URL から CORS を有効にするドキュメントを参照してください。

リファラーフィルターを設定

Cloud Manager を通じて AEM Cloud Service で​ リファラーフィルター ​を設定します。Cloud Manager を使用して AEM Cloud Service インスタンスでリファラーフィルターを設定する方法について詳しくは、こちらを参照してください。

リファラーフィルターの JSON 設定：

{
  "allow.empty": false,
  "allow.hosts": [],
  "allow.hosts.regexp": [
    "https://.*\\.hlx\\.page:443",
    "https://.*\\.hlx\\.live:443"
  ],
  "filter.methods": [
    "POST",
    "PUT",
    "DELETE",
    "COPY",
    "MOVE"
  ],
  "exclude.agents.regexp": [
    ""
  ]
}

この設定では、フィルタリングされる HTTP メソッド、許可されるリファラーおよびフィルターから除外されるユーザーエージェントを指定します。これらの設定を実装することで、Edge Delivery 経由のフォーム送信 ​が保護され、承認されたソースのみに制限されます。

公開済みアダプティブフォームにアクセス

これで、次の URL 形式を使用して、Edge Delivery 経由でアダプティブフォームにアクセスできます。

https://<branch>--<repo>--<owner>.aem.page/content/forms/af/<form_name>

例えば、Wknd-Form の URL は次のとおりです。

https://main--universaleditor--wkndforms.aem.live/content/forms/af/wknd-form

関連トピック