Chat 위젯에서 인증된 방문자 사용 설정하기

사용 중인 플랜

Support(다음 포함)

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

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

이 문서는 다음 버전의 Chat을 사용하는 고객에게 적용됩니다.

• Zendesk Chat Phase 3(Chat 전용)

다음 버전 중 하나를 사용하는 경우에는 Web Widget(클래식)에서 인증된 방문자 사용 설정하기를 참조하세요.

• Zendesk Chat Phase 4(Chat 전용 또는 Support와 함께 사용)
• Zendesk Chat Phase 3(Web Widget(클래식)의 실시간 채팅과 함께 사용)

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

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

• 개요
• Chat 공유 비밀키 생성하기
• JWT 토큰 만들기
• 코드 샘플
• 인증된 방문자와의 상담원 경험에 관한 정보
• 인증된 방문자의 위젯 경험에 관한 정보

개요

인증된 방문자 기능을 사용하도록 Chat 위젯을 구성하면 다음과 같은 이점이 있습니다.

• 상담원과 방문자/고객의 대화에 있어 높은 신뢰도 및 철저한 보안 유지

• 여러 도메인에 걸친 트래픽 지원. 여러 도메인에 위젯을 임베드하거나 외부에 호스팅된 서비스(예: Shopify)에 링크하는 경우 방문자를 인증하면 여러 도메인을 거쳐 Chat 플랫폼에 오는 방문자에 대해 상담원이 전후상황을 더 잘 파악할 수 있습니다.

• 여러 장치/브라우저에 걸친 신원 확인 지원. 방문자가 다른 장치 또는 브라우저를 사용할 때 인증 호출에서 사용자 지정 ID를 지정하면 동일한 사람으로 간주될 수 있습니다.

Chat 공유 비밀키 생성하기

방문자 인증을 위한 위젯을 구성하려면 공유 비밀키가 필요합니다. 공유 비밀키는 엔지니어링팀과 상의하여 또는 코드베이스에 직접 생성, 복사 및 붙여넣을 수 있는 보안 설정으로 브라우저에 입력해서는 안 됩니다.

Chat 관리자만 방문자 인증 설정을 구성할 수 있습니다.

인증된 방문자를 위해 필요한 공유 비밀키를 생성하려면 다음과 같이 하세요.

1. Chat 대시보드를 열고 설정 > 위젯으로 이동합니다.
2. 위젯 보안 탭을 클릭합니다.
3. 방문자 인증 섹션으로 내려가 생성 버튼을 클릭합니다.

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

새 공유 비밀키를 다시 생성하면 이전 토큰은 취소됩니다. 공유 비밀키가 손상 또는 유출되었다고 우려되는 경우 다시 생성해야 합니다. 키를 순환해야 하는 경우 일정을 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. JWT 페이로드의 헤더에서 JWT 알고리즘으로 HS256을 지정하세요.

   {
     "typ":"JWT",
     "alg":"HS256"
   }

   HS256은 미국 국가 안보국에서 디자인한 256비트 암호화 알고리즘인 HMAC SHA 256을 나타냅니다.

   참고: Zendesk는 RS256 및 ES256 JWT 알고리즘을 지원하지 않습니다.
3. 아래의 코드 샘플을 사용하여 필요한 언어에 맞는 기본서식를 찾습니다.
4. $zopim.livechat.authenticate Javascript API를 사용하여 호출할 때마다 새 JWT를 제공하는 함수를 제공합니다. 다음은 코드 예입니다.

   $zopim(function() {
     $zopim.livechat.authenticate({
       jwtFn: function(callback) {
         fetch('JWT_TOKEN_ENDPOINT').then(function(res) {
           res.text().then(function(jwt) {
             callback(jwt);
           });
         });
       }
     });
   });

   위의 예에서 JWT_TOKEN_ENDPOINT는 새 JWT를 확보하기 위해 자체 서버에서 구현할 수 있는 엔드포인트입니다.

   참고: jwtFn은 새 JWT를 확보하기 위해 채팅 세션 내내 여러 번 호출하여 세션이 지속되는 동안 방문자의 신원을 확인합니다.
5. $zopim.livechat.clearAll() API를 사용하여 사용자가 호스트 앱/웹사이트에서 로그아웃할 때 위젯에서 로그아웃되게 할 수 있습니다.

   단일 페이지 앱의 경우 $zopim.livechat.clearAll() API를 사용한 후에는 방문자를 다시 인증할 수 없습니다. 방문자를 다시 인증하려면 페이지를 다시 로드해야 합니다.

코드 샘플

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

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

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

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

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

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

인증된 방문자의 위젯 경험에 관한 정보

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

둘째, 방문자가 인증되면 진행 중인 채팅 세션이 장치들 간에 동기화됩니다. 이로써 방문자가 컴퓨터/브라우저를 전환할 수 있고, 예를 들어 데스크톱 웹 브라우저와 모바일 웹 브라우저 사이에서 Chat 위젯을 이동하는 경우 채팅 세션을 이어서 계속할 수 있습니다.

참고: 현재 Chat 모바일 SDK는 방문자 인증을 지원하지 않으므로 방문자가 데스크톱 위젯과 Chat SDK를 사용하는 모바일 앱 사이를 이동할 때에는 채팅 세션을 이어서 계속할 수 없습니다.

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