새로운 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 위젯을 구성하면 다음과 같은 이점이 있습니다.
-
상담원과 방문자/고객의 대화에 있어 높은 신뢰도 및 철저한 보안 유지
-
여러 도메인에 걸친 트래픽 지원. 여러 도메인에 위젯을 임베드하거나 외부에 호스팅된 서비스(예: Shopify)에 링크하는 경우 방문자를 인증하면 여러 도메인을 거쳐 Chat 플랫폼에 오는 방문자에 대해 상담원이 전후상황을 더 잘 파악할 수 있습니다.
-
여러 장치/브라우저에 걸친 신원 확인 지원. 방문자가 다른 장치 또는 브라우저를 사용할 때 인증 호출에서 사용자 지정 ID를 지정하면 동일한 사람으로 간주될 수 있습니다.
Chat 공유 비밀키 생성하기
방문자 인증을 위한 위젯을 구성하려면 공유 비밀키가 필요합니다. 공유 비밀키는 엔지니어링팀과 상의하여 또는 코드베이스에 직접 생성, 복사 및 붙여넣을 수 있는 보안 설정으로 브라우저에 입력해서는 안 됩니다.
Chat 관리자만 방문자 인증 설정을 구성할 수 있습니다.
인증된 방문자를 위해 필요한 공유 비밀키를 생성하려면 다음과 같이 하세요.
- Chat 대시보드를 열고 설정 > 위젯으로 이동합니다.
- 위젯 보안 탭을 클릭합니다.
- 방문자 인증 섹션으로 내려가 생성 버튼을 클릭합니다.
새 공유 비밀키를 다시 생성하면 이전 토큰은 취소됩니다. 공유 비밀키가 손상 또는 유출되었다고 우려되는 경우 다시 생성해야 합니다. 키를 순환해야 하는 경우 일정을 Chat이 오프라인일 때 순환하도록 예약해야 하는데, 그 이유는 비밀키를 다시 생성하면 5분간 위젯에서 방문자들의 연결이 끊어질 수 있기 때문입니다.
공유 비밀키를 생성했으면 Web Widget 스니펫에 추가할 JWT 토큰(JWT에 대해 자세히 알아보기)을 만드는 데 사용하세요.
JWT 토큰 만들기
JWT 토큰을 만들어 코드를 Chat 독립 실행형 스니펫에 추가하려면 다음과 같이 하세요.
- JWT 토큰에 대한 데이터의 서버 측 페이로드를 구성합니다. 다음 정보가 필요합니다.
- 이름: 고객의 이름
- 이메일: 고객의 이메일
- external_id: 고객을 고유하게 식별하는 영숫자 문자열로 고객에 대해 설정된 후에는 이 값을 변경할 수 없습니다. 이 필드에는 시스템의 고유한 사용자 ID를 사용하는 것이 좋습니다. 예를 들면 user-123456.
- iat: 현재 타임스탬프의 정수 값(초 단위). 특정 언어의 일부 함수(예: JavaScript’s Date.now())는 밀리초를 리턴하므로 반드시 초로 변환하도록 하세요. Chat 인증을 위한 Iat는 최대 2분까지 시계 오차를 허용합니다.
- exp: 현재 타임스탬프의 정수 값(초 단위). 이 값은 언제 이 JWT 토근이 만료될지 나타냅니다. iat 값에서 최대 7분까지 허용됩니다.
- JWT 페이로드의 헤더에서 JWT 알고리즘으로 HS256을 지정하세요.
{ "typ":"JWT", "alg":"HS256" }
HS256은 미국 국가 안보국에서 디자인한 256비트 암호화 알고리즘인 HMAC SHA 256을 나타냅니다.
참고: Zendesk는 RS256 및 ES256 JWT 알고리즘을 지원하지 않습니다. - 아래의 코드 샘플을 사용하여 필요한 언어에 맞는 기본서식를 찾습니다.
- $zopim.livechat.authenticate Javascript API를 사용하여 호출할 때마다 새 JWT를 제공하는 함수를 제공합니다. 다음은 코드 예입니다.
위의 예에서 JWT_TOKEN_ENDPOINT는 새 JWT를 확보하기 위해 자체 서버에서 구현할 수 있는 엔드포인트입니다.$zopim(function() { $zopim.livechat.authenticate({ jwtFn: function(callback) { fetch('JWT_TOKEN_ENDPOINT').then(function(res) { res.text().then(function(jwt) { callback(jwt); }); }); } }); });
참고: jwtFn은 새 JWT를 확보하기 위해 채팅 세션 내내 여러 번 호출하여 세션이 지속되는 동안 방문자의 신원을 확인합니다. - $zopim.livechat.clearAll() API를 사용하여 사용자가 호스트 앱/웹사이트에서 로그아웃할 때 위젯에서 로그아웃되게 할 수 있습니다.
단일 페이지 앱의 경우 $zopim.livechat.clearAll() API를 사용한 후에는 방문자를 다시 인증할 수 없습니다. 방문자를 다시 인증하려면 페이지를 다시 로드해야 합니다.
코드 샘플
토큰은 페이지 로드 시 서버 측에서 동적으로 생성되어야 합니다. 아래에서 필요한 언어에 맞는 기본서식을 찾으세요. 필요에 따라 샘플을 수정하고 반드시 #{details}를 자체 정보로 바꾸세요.
필요에 맞는 샘플이 없다면 JWT 라이브러리에서 찾아 보세요.
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 위젯을 이동하는 경우 채팅 세션을 이어서 계속할 수 있습니다.
마지막으로 팝아웃을 통해서는 신원을 확인할 수 있는 방법이 없으므로 인증된 방문자는 팝아웃에서 채팅을 할 수 없게 됩니다(zopim.com 도메인에서 호스팅되므로).