Web Widget으로 제한된 헬프 센터 콘텐츠 사용하기

모든 플랜

제한된 헬프 센터(사용자가 로그인해야 액세스 가능)의 콘텐츠를 임베드하거나, 제한된 지식창고 콘텐츠(특정 사용자만 사용할 수 있는 문서가 포함된 공개 헬프 센터)를 임베드하도록 Web Widget을 구성할 수 있습니다.

제한된 콘텐츠를 포함하도록 Web Widget을 구성하면 다음과 같은 작업을 수행할 수 있습니다.

로그인한 웹사이트 방문자는 Web Widget을 통해 제한된 헬프 센터 문서를 읽을 수 있습니다. Widget이 임베드되어 있는 고객 사이트에서 사용자의 이메일을 인증할 책임이 있습니다.
로그인하지 않은 방문자는 공개 문서만 볼 수 있습니다. 공개 문서가 없는 경우에는 Web Widget에 헬프 센터 기능이 표시되지 않습니다.

이 문서에서 다루는 주제는 다음과 같습니다.

헬프 센터 보안 설정 확인하기
제한된 콘텐츠를 표시하도록 Web Widget 설정하기
코드 샘플

참고: 사이트와 헬프 센터를 통합 인증(SSO)으로 연결하지 않아도 이 기능을 활용할 수 있습니다. 하지만 통합 인증(SSO)을 사용하면 Web Widget에서 “원래 문서 보기”를 원하는 사용자들을 위해 보다 원활한 경험을 제공할 수 있습니다. 통합 인증(SSO)을 이미 사용하고 있더라도 Web Widget을 구성해야 이 기능을 활용할 수 있습니다.

Web Widget에 대한 자세한 내용은 Web Widget을 사용하여 웹사이트에 고객 서비스 임베드하기를 참조하세요.

제한된 헬프 센터 및 지식창고의 콘텐츠에 대한 내용은 로그인한 사용자에게만 콘텐츠가 표시되도록 제한하기 및 지식창고 콘텐츠에 대한 액세스 제한하기를 참조하세요.

헬프 센터 보안 설정 확인하기

Web Widget을 사용하면 다음과 같은 보안 구성 중 하나로 헬프 센터의 콘텐츠를 표시할 수 있습니다. 헬프 센터 유형에 따라 Guide의 헬프 센터 보안 설정에서 로그인 필요 옵션을 사용 설정하거나 사용 중지해야 할 수 있습니다.

헬프 센터 유형	“로그인 필요” 사용 설정 여부
공개 헬프 센터: 모든 콘텐츠가 일반에게 공개됩니다.	로그인 필요 옵션을 사용 설정하지 마세요.
제한된 헬프 센터: 등록하여 로그인한 사용자만 콘텐츠를 볼 수 있습니다.	로그인 필요 옵션을 사용 설정하세요.
제한된 콘텐츠가 포함된 공개 헬프 센터: 일부 문서는 특정 사용자만 볼 수 있고, 그 외 콘텐츠는 모든 헬프 센터 방문자들이 볼 수 있습니다.	로그인 필요 옵션을 사용 설정하지 마세요. 모든 사람이 로그인하지 않고 헬프 센터의 제한되지 않은 문서를 볼 수 있지만, 제한된 문서의 경우에는 올바른 권한이 있는 로그인한 사용자만 볼 수 있습니다.

헬프 센터 보안 설정을 확인하려면 다음과 같이 하세요.

Guide의 사이드바에서 설정 아이콘()을 클릭합니다.
헬프 센터 유형에 따라 필요한 경우 보안 섹션에서 로그인 필요 옵션을 사용 설정하거나 사용 중지합니다.
제한된 헬프 센터나 제한된 콘텐츠가 포함된 공개 헬프 센터를 사용하는 경우에는 제한된 콘텐츠를 표시하도록 Web Widget 설정하기로 진행합니다.

제한된 콘텐츠를 표시하도록 Web Widget 설정하기

제한된 헬프 센터나 제한된 콘텐츠가 포함된 공개 헬프 센터를 사용한다는 것은 제한된 문서가 있다는 뜻입니다(헬프 센터 보안 설정 확인하기 참조). Web Widget에 제한된 문서를 표시하려면 Web Widget 설정을 구성하고 웹사이트의 코드에 스니펫을 더 추가해야 합니다.

공개 헬프 센터를 사용하는 경우 이 작업을 할 필요가 없습니다.

시작하려면 위젯 설정을 확인하고 공유 비밀키를 생성해야 합니다.

설정을 확인하고 공유 비밀키를 생성하려면 다음과 같이 하세요.

Support의 사이드바에서 관리자 아이콘()을 클릭한 다음 채널 > 위젯을 선택합니다.
사용자 지정 탭을 클릭합니다.
헬프 센터 토글이 설정되어 있는지 확인합니다.
Guide 설정에서 헬프 센터 유형에 따라 로그인 필요 옵션을 사용 설정하거나 사용 중지합니다(헬프 센터 보안 설정 확인하기 참조).
보안 설정으로 이동하고 구성을 클릭합니다.
허용 목록에 추가된 도메인을 추가합니다.
Web Widget이 포함된 하위 도메인을 허용 목록에 입력하여 Web Widget 사용을 제한할 수 있습니다. 보안을 위해 허용 목록에 하위 도메인을 추가하는 것이 좋습니다. 특정 하위 도메인에 대한 액세스를 제한하면 안 되는 구체적인 이유가 있다면 이 상자를 비워 두세요.
상담원들이 제한된 헬프 센터 콘텐츠에 액세스하도록 허용을 선택하여 상담원 및 관리자가 Web Widget에 액세스할 때 제한된 헬프 센터 콘텐츠가 표시되도록 합니다.
제한된 헬프 센터가 있고 상담원의 액세스 권한이 사용 설정되어 있지 않으면 상담원 및 관리자용 Web Widget에 헬프 센터 기능이 표시되지 않습니다. 제한된 문서가 있고 상담원의 액세스 권한이 사용 설정되어 있지 않으면 상담원은 공개 콘텐츠만 볼 수 있습니다.
공유 비밀키를 구성합니다.
- 생성 버튼을 클릭하여 공유 비밀키를 만듭니다.
  
  공유 비밀키는 엔지니어링팀과 상의하여 또는 코드베이스에 직접 생성, 복사 및 붙여넣을 수 있는 보안 설정으로 브라우저에 입력해서는 안 됩니다.
  
  참고: 공유 비밀키는 보안을 유지하기 위한 것입니다. 따라서 전체 비밀키는 한 번만 표시됩니다. 공유 비밀키에 액세스할 수 없고 토큰을 만들기 위해 전체 비밀키가 필요한 경우 재설정을 클릭하여 비밀키를 재설정할 수 있습니다.
- 공유 비밀키가 손상되었다고 생각되면 공유 비밀키를 재설정한 후에 모든 토큰을 취소할 수 있습니다. 이렇게 하면 이전에 인증된 모든 사람들의 액세스 권한이 무효화되어 유효한 토큰이 새로 발급될 때까지는 제한된 콘텐츠를 볼 수 없게 됩니다.

공유 비밀키를 생성했으면 Web Widget 스니펫에 추가할 JWT 토큰(JWT에 대해 자세히 알아보기)을 만드는 데 사용하세요.

JWT 토큰을 만들어 코드를 Web Widget 스니펫에 추가하려면 다음과 같이 하세요.

JWT 토큰에 대한 데이터의 서버 측 페이로드를 구성합니다. 다음 정보가 필요합니다.
- 이름: 고객의 이름
- 이메일: 고객의 이메일
- iat: 현재 타임스탬프의 정수 값(초 단위). 특정 언어의 일부 함수(예: JavaScript’s Date.now())는 밀리초를 리턴하므로 반드시 초로 변환하도록 하세요.
  Web Widget 인증을 위한 Iat는 최대 2분까지 시계 오차를 허용합니다.
- jti: 이 토큰의 고유한 ID. 이미 전송된 기타 jwt 토큰과 동일할 수 없습니다(예: 무작위 64비트 숫자).
아래의 코드 샘플을 사용하여 필요한 언어에 맞는 기본서식을 찾습니다.
만든 토큰을 window.zESettings 개체에 설정합니다(”YOUR_JWT_TOKEN” 바꾸기). 이 코드를 Web Widget 스니펫 앞에 배치합니다.
```
window.zESettings = {
 authenticate: { jwt: 'YOUR_JWT_TOKEN' }
};
```
토큰은 2시간 후에 만료됩니다. 사용자가 로그아웃하면 다음과 같은 API 호출을 추가하여 로컬 저장 공간에서 토큰을 제거할 수 있습니다.
```
zE(function() {
 zE.logout();
});
```

코드 샘플

토큰은 페이지 로드 시 서버 측에서 동적으로 생성되어야 합니다. 아래에서 필요한 언어에 맞는 기본서식을 찾으세요, 필요에 따라 샘플을 수정하고 반드시 #{details}를 자체 정보로 바꾸세요.

필요에 맞는 샘플이 없다면 JWT 라이브러리에서 찾아 보세요.

Ruby
NodeJS
Python
PHP
Elixir

Ruby

먼저 ruby-jwt를 설치합니다.

Rubygems를 사용하는 경우:

gem install jwt

Bundler를 사용하는 경우 gem 파일에 다음을 추가:

gem 'jwt'

다음은 공유 비밀키를 사용하여 토큰을 생성합니다.

require 'jwt'
payload = {
  :name => "#{customerName}",
  :email => "#{customerEmail}",
  :iat => timestamp,
  :jti => "#{uniqueId}"
}
token = JWT.encode payload, "#{yourSecret}"

NodeJS

jsonwebtoken 설치:

npm install jsonwebtoken --save-dev

그런 다음 공유 비밀키를 사용하여 토큰 생성:

var jwt = require('jsonwebtoken'); 
var payload = {
  name: '#{customerName}',
  email: '#{customerEmail}',
  iat: #{timestamp}, 
  jti: '#{uniqueId}'
};
var token = jwt.sign(payload, '#{yourSecret}');

Python

python-jose 설치:

pip install python-jose

공유 비밀키를 사용하여 토큰 생성:

from jose import jwt
var payload = {
  'name': '#{customerName}',
  'email': '#{customerEmail}',
  'iat': #{timestamp}, 
  'jti': '#{uniqueId}'
}
token = jwt.encode(payload, '#{yourSecret}'

PHP

PHP-JWT 다운로드:

composer require firebase/php-jwt

공유 비밀키를 사용하여 토큰 생성:

use \Firebase\JWT\JWT;
$payload = {
  'name' => '#{customerName}' ,
  'email' => '#{customerEmail}',
  'iat' => #{timestamp},
  'jti' => '#{uniqueId}'
};
$token = JWT::encode($payload, '#{yourSecret}');

Elixir

`mix.exs` 파일에 `json_web_token_ex` 추가:

defp deps do
  [{:json_web_token, "~> 0.2"}]
end

공유 비밀키를 사용하여 토큰 생성:

data = %{
  name: "#{customerName}",
  email: "#{customerEmail}",
  iat: "#{timestamp}",
  jti: "#{uniqueId}"
}
options = %{ key: "#{yourSecret}" }
jwt = JsonWebToken.sign data, options

헬프 센터 보안 설정 확인하기

제한된 콘텐츠를 표시하도록 Web Widget 설정하기

코드 샘플

Ruby

NodeJS

Python

PHP

Elixir

0 댓글

관련 문서