認証済み訪問者を統合されたWeb Widget（従来版）で有効にする方法

現在のプランを確認

すべてのChatプランで利用可能

Web Widget（従来版）をChatアカウントで使用する場合、Javascript APIとJWTトークンを使用して、ページを読み込むたびに訪問者を認証するようにウィジェットを設定することができます。

この記事は、次のバージョンのオンラインチャットをお使いの方を対象としています。

Zendesk Chatフェーズ4（Chat単体またはSupportとChatの併用）
Zendesk Chatフェーズ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（従来版）の設定で利用可能なシークレットとは異なります。

共有シークレットを生成するには

ダッシュボードから、「設定」>「ウィジェット」>「ウィジェットのセキュリティ」タブを選択します。
「訪問者の認証」セクションの「生成」ボタンをクリックします。

共有シークレットはセキュリティ設定なので、生成したら間をおかずに、エンジニアリングチームとのコミュニケーションまたはコードベースに直接貼り付けてください。ブラウザに入力するものではありません。

メモ：共有シークレットはセキュリティを保つためのものです。そのため、生成されるのは一度きりです。共有シークレットにアクセスできない場合に、トークンの作成に完全なシークレットが必要なときは、「再生成」ボタンをクリックしてシークレットをリセットできます。

新しい共有シークレットを再生成すると、前回のトークンは無効になります。共有シークレットにセキュリティ侵害の懸念がある場合は、新しいシークレットを再生成する必要があります。キーを回転させる必要がある場合は、Chatがオフラインのときにスケジュールを設定してください。シークレットを再生成すると、訪問者が5分程度ウィジェットから切断される可能性があるためです。

共有シークレットを生成したら、それを使用してWeb Widgetスニペットに追加するJWTトークン（JWTの詳細はこちらを参照）を作成します。

JWTトークンを作成する

JWTトークンを作成してChatスタンドアローンスニペットにコードを追加するには

JWTトークン用にサーバー側のデータペイロードを構築します。これには以下の情報が必要です。
- name：カスタマーの名前
- email：カスタマーのメールアドレス
- external_id：カスタマーに固有の英数字による文字列。いったん設定したら、このIDは変更できません。このフィールドには、システム内で一意のユーザーIDを使用することをお勧めします。たとえば、「user-123456」と指定します。
- iat：現在のタイムスタンプの整数値（秒単位）。言語によっては、たとえばJavaScript's Date.now()のようにミリ秒を返す関数があるので、秒単位に換算する必要があります。Chat認証用のiatで許可されるクロックスキューは最大2分です。
- exp：現在のタイムスタンプの整数値（秒単位）。この値は、このJWTトークンがいつ期限切れになるかを示します。この値は、iat値から最大7分まで許容されています。
下のコードサンプルの中から言語の要件に合ったテンプレートを探してください。
`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

`json_web_token_ex`を`mix.exs`ファイルに追加します。

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を介してこれらの情報を変更することはできません。

次に、訪問者が認証されると、進行中のチャットセッションがデバイス間で同期されます。これにより、訪問者はコンピュータ/ブラウザを切り替えたときにも、進行中のチャットセッションを継続することができます（現時点では継続できません）。

3つ目は、ポップアウト経由でIDを確認する手段がないため、認証済み訪問者はチャットのポップアウト機能を利用できません（このエクスペリエンスは当社のドメインzopim.comでホストされます）。

最後に、認証済み訪問者はチャットログを上にスクロールすることで、ウィジェット内に過去の会話を表示できます。認証済み訪問者に対する会話履歴のサポートについて詳しくは、こちらをクリックしてください。