외부 웹 페이지에 적응형 양식을 포함하는 방법을 알아봅니다.
AEM Sites](/docs/experience-manager-64/forms/using/embed-adaptive-form-aem-sites.html?lang=ko) 페이지 또는 AEM 외부에 호스팅된 웹 페이지에 [적응형 양식을 포함할 수 있습니다. 포함된 적응형 양식이 모든 기능을 갖추고 있으며 사용자는 페이지를 나가지 않고도 양식을 채우고 제출할 수 있습니다. 사용자가 웹 페이지에서 다른 요소의 상황에 그대로 있고 양식과 동시에 상호 작용할 수 있도록 해줍니다.
응용 양식을 외부 웹 사이트에 포함하기 전에 다음 단계를 수행하십시오.
웹 페이지에 JavaScript의 몇 줄을 삽입하여 적응형 양식을 포함할 수 있습니다. 코드의 API는 적응형 양식 리소스를 위해 AEM 서버로 HTTP 요청을 보내고 지정된 양식 컨테이너에 적응형 양식을 삽입합니다. 외부 페이지에 적응형 양식을 포함하기 위한 샘플 코드가 있습니다. 프로덕션 환경에 있는 것처럼 코드를 사용하지 마십시오. 자체 버전의 jQuery를 사용하는 웹 사이트에 대해 iFrame을 사용하는 것과 같이 웹 사이트에 맞게 코드를 사용자 정의할 수 있습니다. iFrame을 사용하면 jQuery 버전 간의 충돌을 방지할 수 있습니다.
웹 사이트의 웹 페이지에 다음 코드를 포함합니다.
<!doctype html>
<html>
<head>
<title>This is the title of the webpage!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="customafsection"/>
<p>This section is replaced with the adaptive form.</p>
<script>
var options = {path:"/content/forms/af/locbasic.html", dataRef:"", themepath:"", CSS_Selector:".customafsection"};
alert(options.path);
var loadAdaptiveForm = function(options){
//alert(options.path);
if(options.path) {
// options.path refers to the publish URL of the adaptive form
// For Example: http:myserver:4503/content/forms/af/ABC, where ABC is the adaptive form
// Note: If AEM server is running on a context path, the adaptive form URL must contain the context path
var path = options.path;
path += "/jcr:content/guideContainer.html";
$.ajax({
url : path ,
type : "GET",
data : {
// Set the wcmmode to be disabled
wcmmode : "disabled"
// Set the data reference, if any
// "dataRef": options.dataRef
// Specify a different theme for the form object
// "themeOverride" : options.themepath
},
async: false,
success: function (data) {
// If jquery is loaded, set the inner html of the container
// If jquery is not loaded, use APIs provided by document to set the inner HTML but these APIs would not evaluate the script tag in HTML as per the HTML5 spec
// For example: document.getElementById().innerHTML
if(window.$ && options.CSS_Selector){
// HTML API of jquery extracts the tags, updates the DOM, and evaluates the code embedded in the script tag.
$(options.CSS_Selector).html(data);
}
},
error: function (data) {
// any error handler
}
});
} else {
if (typeof(console) !== "undefined") {
console.log("Path of Adaptive Form not specified to loadAdaptiveForm");
}
}
}(options);
</script>
</body>
</html>
포함된 코드에서:
options.path
변수의 값을 변경합니다. AEM 서버가 컨텍스트 경로에서 실행 중인 경우 URL에 컨텍스트 경로가 포함되어 있는지 확인합니다. 예를 들어 위의 코드 및 응용 프로그램은 동일한 aem forms 서버에 상주하므로 이 예제에서는 적응형 양식 /content/forms/af/locbasic.html의 컨텍스트 경로를 사용합니다.options.dataRef
을(를) URL로 전달할 속성으로 바꿉니다. dataref 변수를 사용하여 적응형 양식을 미리 입력할 수 있습니다.options.themePath
을(를) 대체합니다. 또는 요청 속성을 사용하여 테마 경로를 지정할 수도 있습니다.CSS_Selector
는 적응형 양식이 포함된 양식 컨테이너의 CSS 선택기입니다. 예를 들어 .customafsection css 클래스는 위의 예에서 CSS 선택기입니다.적응형 양식이 웹 페이지에 포함됩니다. 포함된 응용 양식에서 다음을 관찰합니다.
응용 양식을 포함하는 외부 웹 페이지는 일반적으로 비공개 네트워크의 방화벽 뒤에 있는 AEM 서버로 요청을 보냅니다. 요청이 AEM 서버로 안전하게 전달되도록 하려면 역방향 프록시 서버를 설정하는 것이 좋습니다.
디스패처 없이 Apache 2.4 역방향 프록시 서버를 설정하는 방법을 예로 들어보겠습니다. 이 예제에서는 /forms
컨텍스트 경로를 사용하여 AEM 서버를 호스팅하고 역방향 프록시에 /forms
을 매핑합니다. Apache 서버의 /forms
에 대한 모든 요청이 AEM 인스턴스로 이동됩니다. 이 토폴로지는 /forms
경로가 AEM 서버로 사전 설정된 모든 요청에 따라 디스패처 레이어의 규칙 수를 줄이는 데 도움이 됩니다.
httpd.conf
구성 파일을 열고 다음 코드 줄의 주석을 해제합니다. 또는 이러한 코드 줄을 파일에 추가할 수도 있습니다.
LoadModule proxy_html_module modules/mod_proxy_html.so
LoadModule proxy_http_module modules/mod_proxy_http.so
httpd-proxy.conf
구성 파일에 다음 코드 줄을 추가하여 프록시 규칙을 설정합니다.
ProxyPass /forms https://[AEM_Instance]/forms
ProxyPassReverse /forms https://[AEM_Instance]/forms
규칙에서 [AEM_Instance]
을(를) AEM 서버 게시 URL로 바꿉니다.
컨텍스트 경로에 AEM 서버를 마운트하지 않으면 Apache 레이어의 프록시 규칙은 다음과 같습니다.
ProxyPass /content https://<AEM_Instance>/content
ProxyPass /etc https://<AEM_Instance>/etc
ProxyPass /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# CSRF Filter
ProxyPass /libs/granite/csrf/token.json https://<AEM_Instance>/libs/granite/csrf/token.json
ProxyPassReverse /etc https://<AEM_Instance>/etc
ProxyPassReverse /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# written for thank you page and other URL present in AF during redirect
ProxyPassReverse /content https://<AEM_Instance>/content
다른 토폴로지를 설정하는 경우 디스패처 레이어의에 제출, 자동 채우기 및 기타 URL을 허용 목록에 추가하다 추가해야 합니다.
웹 페이지에 적응형 양식을 포함할 때에는 다음 우수 사례를 고려하십시오.
http://[server]:[port]/system/console/configMgr
)로 이동합니다.