Activation des visiteurs authentifiés dans le Web Widget (Classique)

Si vous utilisez le Web Widget (Classique) avec votre compte Chat, vous pouvez configurer votre widget afin d’authentifier les visiteurs à chaque chargement de page en utilisant l’API JavaScript et le token JWT.

Cet article s’applique aux clients qui utilisent versions suivantes du chat en direct :

• Zendesk Chat Phase 4 - Chat uniquement ou avec Support
• Zendesk Chat Phase 3 - avec l’expérience Chat intégrée au Web Widget (Classique)

Si vous utilisez Zendesk Chat Phase 3 (Chat uniquement), consultez Activation des visiteurs authentifiés dans le widget Chat.

Pour savoir quelle version de Chat vous utilisez, consultez Comment savoir quelle version Zendesk Chat vous utilisez.

Cet article aborde les sujets suivants :

• Vue d’ensemble
• Génération d’un secret partagé Chat
• Création d’un token JWT
• Exemples de code
• Déconnexion
• À propos de l’expérience des visiteurs authentifiés pour les agents
• À propos de l’expérience du Web Widget (Classique) pour les visiteurs authentifiés

Vue d’ensemble

Vous pouvez configurer votre widget afin d’authentifier les visiteurs à chaque chargement de page en utilisant une nouvelle API Javascript API et un token JWT.

Quand vous configurez le Web Widget (Classique) pour utiliser les visiteurs authentifiés, vous bénéficiez des avantages suivants :

• Vous êtes plus sûr que le visiteur/client auquel vos agents parlent est vraiment qui il dit être.
• Prise en charge du trafic sur plusieurs domaines. Si vous incorporez le widget à plusieurs domaines ou le liez à des services hébergés en externe (Shopify par ex.), l’authentification du visiteur permet qu’il soit vu comme un seul visiteur sur tous les domaines et la plateforme Chat et les agents bénéficient ainsi d’un contexte supérieur.
• Prise en charge de l’identification sur plusieurs appareils/navigateurs. Le visiteur est vu comme la même personne si et quand il choisir d’utiliser un différent appareil ou navigateur quand l’ID personnalisé est spécifié dans l’appel d’authentification.
• Possibilité de présenter les anciennes conversations au visiteur dans le widget

Génération d’un secret partagé Chat

Remarque – Ce secret partagé est différent de celui qui est disponible dans les paramètres du Web Widget (Classique) pour un contenu du centre d’aide restreint.

Pour créer un secret partagé

1. Dans le tableau de bord de Chat, cliquez sur Paramètres > Widget > Sécurité du widget.
2. Dans la section Authentification des visiteurs, cliquez sur Générer.

   

Comme il s’agit d’un paramètre de sécurité, votre secret partagé est conçu pour être immédiatement généré, copié et collé dans un message à votre équipe d’ingénierie ou directement dans votre code base. Vous ne devez pas le saisir dans un navigateur.

Remarque – Le secret partagé doit rester confidentiel. Par conséquent, il ne s’affichera dans sa totalité qu’une seule fois. Si vous n’avez pas accès au secret partagé et si vous en avez besoin pour créer votre token, vous pouvez le réinitialiser en cliquant sur Régénérer.

Si vous régénérez le secret partagé, le token précédent est révoqué. Si vous pensez que le secret partagé a été compromis, régénérez-le pour en créer un nouveau. Si vous devez le faire, faites-le quand Chat est hors ligne, car la régénération du secret peut déconnecter les visiteurs du widget pendant 5 minutes.

Une fois le secret partagé généré, utilisez-le pour créer un token JWT (En savoir plus au sujet de JWT) que vous ajouterez au snippet de votre Web Widget.

Création d’un token JWT

Pour créer un token JWT et ajouter le code au snippet du widget Chat autonome

1. Construisez une charge de données côté serveur pour le token JWT. Vous devez y inclure les informations suivantes :
   • name : nom du client.
   • email : adresse e-mail du client.
   • external_id : chaîne alphanumérique, qui identifie le client de façon unique. Une fois définie pour le client, cette valeur ne peut pas être modifiée. Nous vous conseillons d’utiliser l’ID utilisateur unique de votre système pour ce champ, par ex. user-123456.
   • iat : valeur entière de l’horodatage actuel, en secondes. Certaines fonctions dans des langages spécifiques comme Date.now() de JavaScript renvoie des millisecondes, n’oubliez donc pas de convertir en secondes. L’authentification Iat pour Chat permet un décalage d’horloge de deux minutes.
   • exp : valeur entière de l’horodatage actuel, en secondes. Cette valeur indique quand le token JWT arrivera à expiration. Elle peut être supérieure de 7 minutes maximum à la valeur iat.
2. Utilisez les exemples de code ci-dessous pour trouver un modèle adapté à vos besoins.
3. Utilisez l’API Javascript zESetting avec la clé `webWidget.authentication.chat.jwtFn` pour offrir une fonction qui fournit un nouveau token JWT à chaque invocation. Voici un exemple de code :

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

   Dans l’exemple ci-dessus, JWT_TOKEN_ENDPOINT est un point de terminaison qui peut être implémenté sur votre propre serveur pour obtenir un nouveau token JWT. Remarque - jwtFn peut être appelé plusieurs fois au cours d’une session de chat afin d’obtenir un nouveau token JWT pour valider l’identité du visiteur pendant toute la durée de la session.
   Remarque – jwtFn peut être appelé plusieurs fois au cours d’une session de chat afin d’obtenir un nouveau token JWT pour valider l’identité du visiteur pendant toute la durée de la session.

Exemples de code

Votre jeton doit être généré dynamiquement côté serveur au chargement de la page. Cherchez ci-dessous le modèle adapté à vos besoins. Personnalisez l’exemple de code en fonction de vos besoins, en n’oubliant pas de remplacer #{details} par vos informations.

Si aucun de ces exemples ne répond à vos besoins, JWT a une liste plus complète de bibliothèques JWT.

• Ruby
• NodeJS
• Python
• PHP
• Elixir

Ruby

Commencez par installer ruby-jwt.

Si vous utilisez Rubygems :

gem install jwt

Si vous utilisez Bundler, ajoutez ce qui suit à votre fichier gem :

gem 'jwt'

Ensuite, générez un token en utilisant le secret partagé :

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

NodeJS

Installez jsonwebtoken :

npm install jsonwebtoken --save-dev

Ensuite, générez un token en utilisant le secret partagé :

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

Python

Installez python-jose :

pip install python-jose

Ensuite, générez un token en utilisant le secret partagé :

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

PHP

Téléchargez PHP-JWT:

composer require firebase/php-jwt

Ensuite, générez un token en utilisant le secret partagé :

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

Elixir

Ajoutez « json_web_token_ex » à votre fichier « mix.exs » :

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

Ensuite, générez un token en utilisant le secret partagé :

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

Déconnexion

Si vous voulez déconnecter le visiteur authentifié, vous devez utiliser l’API Javascript zE.logout Javascript. Pour en savoir plus au sujet de l’API, cliquez ici.

À propos de l’expérience des visiteurs authentifiés pour les agents

Quand un agent commence à chatter avec un visiteur authentifié, certains éléments du tableau de bord Chat sont mis à jour.

D’abord, l’agent peut voir que le visiteur est authentifié grâce à la coche d’authentification verte qui s’affiche sur l’avatar du visiteur :

L’agent remarquera aussi qu’il ne peut pas modifier le nom ou l’adresse e-mail du visiteur, car ces données proviennent des informations envoyées via l’API Javascript.

Enfin, si un agent interdit un visiteur authentifié, le visiteur ne peut accéder au widget Chat sur aucun appareil ni dans aucun navigateur.

À propos de l’expérience du Web Widget (Classique) pour les visiteurs authentifiés

Les visiteurs authentifiés auront également une expérience légèrement différente du widget Chat. D’abord, leurs informations sont en lecture seule et ils ne peuvent pas les modifier via le widget ou l’API Javascript.

Deuxièmement, quand un visiteur est authentifié, les sessions de chat en cours sont synchronisées sur tous les appareils. Cela permet au visiteur de changer d’ordinateur ou de navigateur et de poursuivre se session de chat en cours, ce qui n’est pas possible à l’heure actuelle.

Troisièmement, les visiteurs authentifiés ne peuvent pas se faire dans une fenêtre contextuelle, car il est impossible de vérifier leur identité via la fenêtre contextuelle (car l’expérience est hébergée sur notre domaine, zopim.com).

Enfin, le visiteur authentifié peut voir ses anciennes conversations dans le widget en faisant défiler le journal de chats. Pour en savoir plus au sujet de la prise en charge de l’historique des conversations pour les visiteurs authentifiés, cliquez ici.