Quelle est mon édition?

Disponible avec toutes les éditions Chat

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.

Cet article s’applique aux clients qui utilisent versions suivantes de Zendesk Chat :

  • Zendesk Chat Phase 3 (Chat uniquement)

Consultez Activation des visiteurs authentifiés dans le Web Widget (Classique) si vous utilisez l’une des versions suivantes :

  • Zendesk Chat Phase 4 (Chat uniquement ou avec Support)
  • Zendesk Chat Phase 3 [avec le chat en direct dans le Web Widget (Classique)]

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
  • À propos de l’expérience des visiteurs authentifiés pour les agents
  • À propos de l’expérience du widget pour les visiteurs authentifiés

Vue d’ensemble

Quand vous configurez le widget Chat 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.

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

Pour configurer votre widget pour l’authentification des visiteurs, il vous faut un secret partagé. Un secret partagé est un paramètre de sécurité, 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, en une seule fois. Vous ne devez pas le saisir dans un navigateur.

Seuls les administrateurs Chat peuvent configurer les paramètres d’authentification des visiteurs.

Pour générer le secret partagé requis pour les visiteurs authentifiés

  1. Ouvrez votre tableau de bord Chat et allez à Paramètres > Widget.
  2. Cliquez sur l’onglet Sécurité du widget.
  3. Allez à la section Authentification des visiteurs et cliquez sur Générer.
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. Spécifiez HS256 comme algorithme JWT dans l’en-tête de votre charge JWT :
    {
  "typ":"JWT",
  "alg":"HS256"
}

    HS256 signifie HMAC SHA 256, un algorithme de chiffrement 256 bits conçu par la NSA (US National Security Agency).

    Remarque – Zendesk ne prend pas en charge les algorithmes JWT RS256 et ES256.
  3. Utilisez les exemples de code ci-dessous pour trouver un modèle adapté à vos besoins.
  4. Utilisez l’API Javascript $zopim.livechat.authenticate pour offrir une fonction qui fournit un nouveau token JWT à chaque invocation. Voici un exemple de code :
    $zopim(function() {
  $zopim.livechat.authenticate({
    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.
  5. Vous pouvez utiliser l’API $zopim.livechat.clearAll() pour déconnecter l’utilisateur du widget quand il se déconnecte de l’application/du site Web hôte.

    Notez que pour les applications d’une seule page, il est impossible d’authentifier à nouveau un visiteur après utilisation de l’API $zopim.livechat.clearAll(). Vous devriez recharger la page pour que le visiteur soit à nouveau authentifié.

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

À 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 widget 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 continuer sa session de chat en cours si, par exemple, il passe du widget d’un navigateur Web de bureau à celui d’un navigateur Web mobile.

Remarque – Comme les Mobile SDK Chat actuels ne prennent pas en charge l’authentification des visiteurs, les visiteurs ne peuvent pas continuer une session de chat quand il passe du widget de bureau à une application mobile en utilisant le SDK Chat.

Enfin, 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).

Réalisé par Zendesk