---
sourceDocument: Xanadu 대화형 인터페이스
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/xanadu/conversational-interfaces

 Release :

    - xanadu

ft:locale :

    - ko-KR

ft:publication_title :

    - Xanadu 대화형 인터페이스

ft:clusterId :

    - convint

bundleId :

    - convint

workflow :

    - Platform


---

# 휴대용 가상 에이전트 웹 클라이언트 구성

# 휴대용 가상 에이전트 웹 클라이언트 구성 {#ariaid-title1}

* 릴리스 버전: Xanadu
* 
* 업데이트 날짜 2024년 08월 01일
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 7분

외부 공급업체 웹 페이지에서 실행 가상 에이전트 되도록 휴대용 웹 클라이언트 채팅 위젯을 구성합니다.

## 시작하기 전에

주:  
Vancouver에서 온보딩하는 신규 고객의 경우 웹 클라이언트는 기본적으로 인증된 사용자만 액세스할 수 있습니다. 인증되지 않은 사용자가 웹 클라이언트에 액세스할 수 있도록 허용하려면 공개 액세스를 위해 sn_va_web_client_app_embed 페이지를 활성화해야 합니다. 자세한 내용은 [Make UI pages public or private](https://www.servicenow.com/docs/access?context=t_MakeAPagePublic&version=xanadu&pubname=xanadu-platform-security&ft:locale=en-US) 문서를 참조하십시오.

필요한 역할: admin

## 이 태스크 정보

ServiceNow 최상위 도메인 및 도메인 이름이 웹 클라이언트를 로드하는 사이트와 일치하는 경우에만 Portable 가상 에이전트 을 지원합니다. SSO는 service-now.com URL을 통해서만 지원됩니다. 그 이상인 경우에는 사용자 지정 솔루션과 구현이 필요합니다.

## 프로시저

1. 모두로 이동한 다음 필터에 <kbd class="ph userinput">sys_properties.list</kbd>를 입력합니다.
2. 시스템 속성 \[sys_properties\] 테이블에서 이름으로 속성을 검색합니다 com.glide.cs.embed.csp_frame_ancestors .
3. 속성 이름을 클릭하여 양식을 열고 지시문 값을 지정합니다.  
   {#configure-portable-va-web-client__table_mny_mrp_ktb__entry__2}

   | 필드 | 설명 |
   |-|-|
   | 유형 | 문자열 이는 기본값입니다. |
   | 값 | HTTP 헤더 지시문의 소스 값: `Content-Security-Policy:frame-ancestors<source>`이 속성은 Internet Explorer를 제외한 대부분의 주요 브라우저에 적용됩니다. 다음을 포함하여 하나 이상의 소스를 지정합니다. * 'self': 출처가 게재 중인 페이지와 동일함을 나타냅니다. 예를 들어 값이 'self' http://mywebsite.com인 경우 iframe은 상위 도메인뿐만 아니라 mywebsite.com 에도 포함됩니다. 이는 기본값입니다. * host-source: 외부 웹 페이지를 포함할 수 있는 도메인입니다. 이름, IP 주소 또는 선택적 URL 및/또는 포트 번호로 인터넷 호스트 사이트를 지정합니다. 사이트 주소는 와일드카드(별표) 문자로 시작할 수 있습니다. 예제 값: http://\*.example.com * scheme-source: 스키마입니다. 예: http: 또는 https: * none: 일치하는 URL이 없습니다. {#configure-portable-va-web-client__ul_nny_mrp_ktb} |
   [ ]

   {#configure-portable-va-web-client__table_mny_mrp_ktb}

   지정할 수 있는 소스 값에 대한 자세한 내용은 인스턴스 보안 강화 설정에서 [CSP:frame-ancestors](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors#Syntax) 및 가상 에이전트에 포함된 클라이언트 콘텐츠 보안 정책(인스턴스 보안 강화)을 참조하십시오.
4. 시스템 속성 \[sys_properties\] 테이블로 돌아가 이름으로 속성을 검색합니다 com.glide.cs.embed.xframe_options .
5. 속성 이름을 클릭하여 양식을 열고 지시문 값을 지정합니다.  
   {#configure-portable-va-web-client__table_mrd_5v5_4qbxxxxx__entry__2}

   | 필드 | 설명 |
   |-|-|
   | 유형 | 문자열 이는 기본값입니다. |
   | 값 | X-Frame-Options 헤더 지시문의 값으로, 브라우저가 프레임에서 외부 웹 페이지를 렌더링할 수 있는지 여부를 나타냅니다. 다음 값 중 하나를 지정합니다. * sameorigin: 페이지 자체와 원본이 같은 프레임에 페이지를 표시합니다. 이는 기본값입니다. 이 속성은 Internet Explorer 11과 같은 이전 브라우저에 적용됩니다. 예제 값: https://example.com 에서 허용 * deny: 페이지를 프레임에 표시하지 않습니다. * allow-from uri: 지정된 원점의 프레임에만 페이지를 표시합니다. 주: 이 값은 최신 브라우저에서 더 이상 작동하지 않습니다. {#configure-portable-va-web-client__ul_nrd_5v5_4qb} |
   [ ]

   {#configure-portable-va-web-client__table_mrd_5v5_4qbxxxxx}

   지정할 수 있는 소스 값에 대한 자세한 내용은 인스턴스 보안 강화 설정의 [X-Frame-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options#Syntax) 및 가상 에이전트 임베디드 클라이언트 X-Frame-Options(인스턴스 보안 강화)를 참조하십시오.
6. 여러 도메인에 액세스 권한을 부여하도록 REST API에 대한 CORS 규칙을 구성합니다.  
   이 규칙은 사용자가 지정한 웹 도메인에 보안 제한 없이 웹 페이지의 채팅 위젯에 접근할 수 있는 API를 호출할 수 있는 권한을 부여합니다. 모든 도메인은 공통 상위 도메인을 공유해야 합니다. 또한 지원하려는 각 하위 도메인에 대해 새 CORS 규칙을 만들어야 합니다.
   1. 다음으로 이동 모두시스템 웹 서비스RESTCORS 규칙.
   2. 새로 만들기를 클릭합니다.
   3. 양식의 필드에 내용을 입력합니다.  
      {#configure-portable-va-web-client__table_cvf_c5p_ktb__entry__2}

      | 필드 | 설명 |
      |-|-|
      | 이름 | 규칙의 고유한 이름입니다. |
      | 애플리케이션 | 애플리케이션의 범위입니다. 전역 이 기본값입니다. |
      | REST API | REST API의 이름입니다. 대화 소비자 계정 \[now/cs\]를 선택합니다. |
      | 도메인 | 웹 사이트의 도메인입니다. 예: https://mycompany.com 웹 사이트에 대한 하위 도메인이 여러 개 있는 경우 각각에 대해 CORS 규칙을 만들어야 합니다. 예를 들어 support.mycompany.com 와 products.mycompany.com 에는 두 개의 별도 CORS 규칙이 필요합니다. 주: 와일드카드는 허용되지 않습니다. |
      | 최대 나이 | 클라이언트 세션을 캐시하는 시간(초)입니다. 초기 CORS 요청 후 지정된 시간 내에 동일한 클라이언트의 추가 요청에는 실행 전 메시지가 필요하지 않습니다. 값을 지정하지 않으면 기본값은 0 으로, 모든 요청에 실행 전 메시지가 필요하게 됩니다. |
      [ ]

      {#configure-portable-va-web-client__table_cvf_c5p_ktb}
   4. HTTP 메서드 탭에서 GET을 선택합니다.  
      Portable Web Client는 요청만 받습니다.
   5. 제출을 클릭합니다.
   6. **옵션:** Portable Web Client를 웹 사이트의 다른 하위 도메인에 추가하려면 이 단계를 반복합니다.
   {#configure-portable-va-web-client__substeps_jmp_vtp_ktb}
7. **옵션:** 메서드(웹 API)를 window.postMessage() 사용하여 사용자 인터페이스 페이지에서 SSO 인증을 트리거하고 지정한 웹 클라이언트 페이지로 사용자를 반환하는 이벤트 조건을 정의하는 JavaScript 스크립트를 만듭니다.  
   사용자를 웹 클라이언트 페이지로 리디렉션하려면 `'https://<your-instance>.service-now.com/sn_va_web_client_login.do?sysparm_redirect_uri=' + encodeURIComponent(<your-page>)` 문자열을 사용합니다.  
   주:  
   스크립트를 실행하기 전에 시스템 속성을 사용하여 com.glide.cs.web_client_login_redirect_urls 스크립트에 전달할 수 있는 URL을 지정합니다. 리디렉션은 속성 값에 하나 이상의 허용된 URL을 지정하는 경우에만 작동합니다. 전체 리디렉션 URL 또는 URL의 호스트 부분을 지정합니다. 예: <kbd class="ph userinput">https://example.com</kbd> .  
   예시 스크립트

       <script>
           window.addEventListener("message", function(e) {
              // redirect to SSO login if the web client logs in but is logged in as a guest user(unauthenticated)
             if(e.data.type==="SESSION_CREATED" && e.data.authenticated === false)
               window.location.href = "https://<your-instance>.service-now.com/sn_va_web_client_login.do?sysparm_redirect_uri=<' + encodeURIComponent(<your-page>);
             
             // redirect to SSO login if the ServiceNow platform logs out from underneath the web client
             if(e.data.type==="SESSION_LOGGED_OUT")
               window.location.href = "https://<your-instance>service-now.com/"https://<your-instance>service-now.com/sn_va_web_client_login.do?sysparm_redirect_uri=' + encodeURIComponent(<your-page>);
           });
         </script>

   이 예에서 인증은 SESSION_CREATED 또는 SESSION_LOGGED_OUT 이벤트가 발생할 때 지정된 인스턴스에서 트리거됩니다. 인증 후(사용자에 대한 SSO 자격 증명이 허용되는 경우) 속성에 com.glide.cs.web_client_login_redirect_urls 페이지 URL도 지정했다면 사용자는 `sn_va-web_client_login.do?sysparm_redirect_uri=' + encodeURIComponent(<your-page>)`에 지정한 포함된 웹 클라이언트 페이지로 리디렉션됩니다.

## 다음에 수행할 작업

[외부 공급업체 웹 사이트에 휴대용 가상 에이전트 웹 클라이언트 추가](https://servicenow-prod.fluidtopics.net/auTF1Q4nSj1wiSve0pDsOg "타사 웹 페이지에서 Portable Web Client 채팅 위젯을 가상 에이전트 사용하려면 웹 페이지에 필요한 코드를 추가하십시오.").