Web Widget(클래식)에서 인증된 방문자 사용 설정하기

사용 중인 플랜

Support(다음 포함)

실시간 채팅 및 메시징, 모든 플랜

Chat 계정으로 Web Widget(클래식)을 사용하는 경우에는 JavaScript API 및 JWT 토큰을 사용하여 페이지가 로드될 때마다 방문자를 인증하도록 위젯을 구성할 수 있습니다.

이 문서는 다음 버전의 실시간 채팅을 사용하는 고객에게 적용됩니다.

• Zendesk Chat Phase 4 - Chat 전용 또는 Support와 함께 사용
• Zendesk Chat Phase 3 - Web Widget(클래식)에서 Chat 연동 경험 포함

Zendesk Chat Phase 3(Chat 전용)을 사용하는 경우에는 Chat 위젯에서 인증된 방문자 사용 설정하기를 참조하세요.

사용 중인 Chat 버전을 확인하는 데 대한 도움말은 Zendesk Chat 계정 버전 확인하기를 참조하세요.

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

• 개요
• Chat 공유 비밀키 생성하기
• JWT 토큰 만들기
• 코드 샘플
• 로그아웃
• 인증된 방문자와의 상담원 경험에 관한 정보
• 인증된 방문자의 Web Widget(클래식) 경험에 대한 정보

개요

새로운 JavaScript API 및 JWT 토큰을 사용하여 모든 페이지가 로드될 때마다 방문자를 인증하도록 위젯을 구성할 수 있습니다.

인증된 방문자 기능을 사용하도록 Web Widget(클래식)을 구성하면 다음과 같은 이점이 있습니다.

• 상담원과 방문자/고객의 대화에 있어 높은 신뢰도 및 철저한 보안 유지
• 여러 도메인에 걸친 트래픽 지원. 여러 도메인에 위젯을 임베드하거나 외부에 호스팅된 서비스(예: Shopify)에 링크하는 경우 방문자를 인증하면 여러 도메인을 거쳐 Chat 플랫폼에 오는 방문자에 대해 상담원이 전후상황을 더 잘 파악할 수 있습니다.
• 여러 장치/브라우저에 걸친 신원 확인 지원. 방문자가 다른 장치 또는 브라우저를 사용할 때 인증 호출에서 사용자 지정 ID를 지정하면 동일한 사람으로 간주될 수 있습니다.
• 위젯에서 방문자에게 지난 채팅 대화 표시

Chat 공유 비밀키 생성하기

참고: 이 공유 비밀키는 제한된 헬프 센터 콘텐츠를 위해 Web Widget(클래식) 설정에서 사용할 수 있는 것과 다릅니다.

공유 비밀키를 생성하려면 다음과 같이 하세요.

1. Chat 대시보드에서 설정 > 위젯 > 위젯 보안 탭으로 이동합니다.
2. 방문자 인증 아래의 생성 버튼을 클릭합니다.

   

공유 비밀키는 엔지니어링팀과 상의하여 또는 코드베이스에 직접 생성, 복사 및 붙여넣을 수 있는 보안 설정으로 브라우저에 입력해서는 안 됩니다.

참고: 공유 비밀키는 보안을 유지하기 위한 것입니다. 따라서 전체 비밀키는 한 번만 표시됩니다. 공유 비밀키에 액세스할 수 없고 토큰을 만들기 위해 전체 비밀키가 필요한 경우 다시 생성 버튼을 클릭하여 비밀키를 재설정할 수 있습니다.

새 공유 비밀키를 다시 생성하면 이전 토큰은 취소됩니다. 공유 비밀키가 손상 또는 유출되었다고 우려되는 경우 다시 생성해야 합니다. 키를 순환해야 하는 경우 일정을 Chat이 오프라인일 때 순환하도록 예약해야 하는데, 그 이유는 비밀키를 다시 생성하면 5분간 위젯에서 방문자들의 연결이 끊어질 수 있기 때문입니다.

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

JWT 토큰 만들기

JWT 토큰을 만들어 코드를 Chat 독립 실행형 스니펫에 추가하려면 다음과 같이 하세요.

1. JWT 토큰에 대한 데이터의 서버 측 페이로드를 구성합니다. 다음 정보가 필요합니다.
   • 이름: 고객의 이름
   • 이메일: 고객의 이메일
   • external_id: 고객을 고유하게 식별하는 영숫자 문자열로 고객에 대해 설정된 후에는 이 값을 변경할 수 없습니다. 이 필드에는 시스템의 고유한 사용자 ID를 사용하는 것이 좋습니다. 예를 들면 user-123456.
   • iat: 현재 타임스탬프의 정수 값(초 단위). 특정 언어의 일부 함수(예: JavaScript’s Date.now())는 밀리초를 리턴하므로 반드시 초로 변환하도록 하세요. Chat 인증을 위한 Iat는 최대 2분까지 시계 오차를 허용합니다.
   • exp: 현재 타임스탬프의 정수 값(초 단위). 이 값은 언제 이 JWT 토근이 만료될지 나타냅니다. iat 값에서 최대 7분까지 허용됩니다.
2. 아래의 코드 샘플을 사용하여 필요한 언어에 맞는 기본서식를 찾습니다.
3. `webWidget.authentication.chat.jwtFn` 키와 함께 zESetting JavaScript API를 사용하여 호출할 때마다 새 JWT를 제공하는 함수를 제공합니다. 다음은 코드 예입니다.

   window.zESettings = {
    webWidget: {
      authenticate: {
        chat: {
          jwtFn: function(callback) { 
            fetch('JWT_TOKEN_ENDPOINT').then(function(res) {
               res.text(jwt).then(function(jwt) {
                callback(jwt);
               });
             });
           }
         } 
       }
     }
   };

   위의 예에서 JWT_TOKEN_ENDPOINT는 새 JWT를 확보하기 위해 자체 서버에서 구현할 수 있는 엔드포인트입니다. 참고: jwtFn은 새 JWT를 확보하기 위해 채팅 세션 내내 여러 번 호출하여 세션이 지속되는 동안 방문자의 신원을 확인합니다.
   참고: jwtFn은 새 JWT를 확보하기 위해 채팅 세션 내내 여러 번 호출하여 세션이 지속되는 동안 방문자의 신원을 확인합니다.

코드 샘플

토큰은 페이지 로드 시 서버 측에서 동적으로 생성되어야 합니다. 아래에서 필요한 언어에 맞는 기본서식을 찾으세요. 필요에 따라 샘플을 수정하고 반드시 #{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,
  :external_id => "#{externalId}"
}
token = JWT.encode payload, "#{yourSecret}"

NodeJS

jsonwebtoken 설치:

npm install jsonwebtoken --save-dev

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

var jwt = require('jsonwebtoken'); 
var payload = {
  name: '#{customerName}',
  email: '#{customerEmail}',
  iat: #{timestamp},
  external_id: '#{externalId}'
};
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}, 
  'external_id': '#{externalId}'
}
token = jwt.encode(payload, '#{yourSecret}'

PHP

PHP-JWT 다운로드:

composer require firebase/php-jwt

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

use \Firebase\JWT\JWT;
$payload = {
  'name' => '#{customerName}' ,
  'email' => '#{customerEmail}',
  'iat' => #{timestamp},
  'external_id' => '#{externalId}'
};
$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}",
  external_id: "#{externalId}"
}
options = %{ key: "#{yourSecret}" }
jwt = JsonWebToken.sign data, options

로그아웃

인증된 방문자를 로그아웃하게 하려면 zE.logout JavaScript API를 사용해야 합니다. 해당 API에 대해 자세히 알아보려면 여기를 클릭하세요.

인증된 방문자와의 상담원 경험에 관한 정보

상담원이 인증된 방문자와 채팅을 시작하면 Chat 대시보드에서 몇 가지 사항이 업데이트됩니다.

첫째, 상담원은 방문자의 아바타에 녹색 인증 체크 표시 오버레이가 표시된 것을 보고 방문자가 인증되었음을 알 수 있습니다.

JavaScript API를 통해 전송되는 정보이므로 상담원은 방문자의 이름 또는 이메일을 편집할 수 없다는 사실도 인지하게 됩니다.

마지막으로 인증된 사용자를 차단하면 방문자가 장치와 브라우저에서 Chat 위젯에 액세스할 수 없게 됩니다.

인증된 방문자의 Web Widget(클래식) 경험에 대한 정보

인증된 방문자는 Chat 위젯에서 약간 다른 경험을 하게 됩니다. 첫째, 인증된 방문자의 정보는 읽기 전용이므로 위젯이나 JavaScript API를 통해 수정될 수 없습니다.

둘째, 방문자가 인증되면 진행 중인 채팅 세션이 장치들 간에 동기화됩니다. 따라서 방문자는 컴퓨터/브라우저를 편리하게 바꿔 가면서 진행 중인 채팅 세션을 계속할 수 있습니다.

셋째, 팝아웃을 통해서는 신원을 확인할 수 있는 방법이 없으므로 인증된 방문자는 팝아웃에서 채팅을 할 수 없게 됩니다(zopim.com 도메인에서 호스팅되므로).

마지막으로 인증된 방문자는 채팅 로그를 위로 스크롤하여 위젯에서 지난 대화를 볼 수 있습니다. 인증된 방문자에 대한 대화 기록 지원에 대해 자세히 알아보려면 여기를 클릭하세요.