Permitir visitantes autenticados en el Web Widget (clásico)

Si está utilizando el Web Widget (clásico) con su cuenta de Chat, puede configurar el widget para autenticar a los visitantes cada vez que se cargue una página utilizando la API de Javascript y el token JWT.

Este artículo se aplica a los clientes que usan las siguientes versiones de chat en vivo:

• Zendesk Chat Fase 4 (solo Chat o con Support)
• Zendesk Chat Fase 3 (con la experiencia de Chat integrado en el Web Widget (clásico))

Si usa Zendesk Chat Fase 3 (solo Chat), consulte Permitir visitantes autenticados en el widget de Chat .

Para saber cuál es la versión de Chat que está utilizando, consulte Determinar la versión de la cuenta de Zendesk Chat.

Este artículo contiene los siguientes temas:

• Información general
• Generar un secreto compartido de Chat
• Crear un token JWT
• Ejemplos de código
• Cerrar sesión
• Acerca de la experiencia de los agentes con visitantes autenticados
• Acerca de la experiencia del Web Widget (clásico) para los visitantes autenticados

Información general

El widget se puede configurar para autenticar a los visitantes cada vez que se cargue una página usando una nueva API de JavaScript y un token JWT.

Si configura el Web Widget (clásico) para que use visitantes autenticados, obtendrá las siguientes ventajas:

• Un nivel más alto de confianza y seguridad de que el visitante o cliente con el que usted y sus agentes están hablando es un cliente verdadero.
• Soporte para el tráfico en todos los dominios. Si el widget está incrustado en varios dominios o hay un vínculo a servicios con hosts externos (por ejemplo, Shopify), un usuario autenticado pasa a ser un solo visitante en todos los dominios de la plataforma de Chat, lo que permite que los agentes tengan más contexto.
• Soporte para la identificación en todos los dispositivos y navegadores. Si la ID personalizada se especifica en la llamada de autenticación, el visitante es considerado como la misma persona aunque decida usar un dispositivo o navegador diferente.
• La capacidad de presentar conversaciones de chat anteriores al visitante en el widget.

Generar un secreto compartido de Chat

Nota: Este secreto compartido es diferente al que está disponible en la configuración del Web Widget (clásico) para el contenido restringido del centro de ayuda.

Para generar un secreto compartido:

1. En el panel de Chat, vaya a Configuración > Widget > pestaña Seguridad del widget.
2. Haga clic en el botón Generar en la sección Autenticación de visitantes:

   

Puesto que se trata de una configuración de seguridad, el secreto compartido está concebido para ser generado, copiado y pegado en una comunicación con el equipo de ingeniería o directamente en el código base todo a la vez. No se debe ingresar en un navegador.

Nota: El secreto compartido se debe mantener seguro. Como resultado, solo aparecerá una sola vez en su totalidad. Si no tiene acceso al secreto compartido y necesita el secreto completo para crear el token, puede restablecer el secreto haciendo clic en el botón Volver a generar.

Si se vuelve a generar un nuevo secreto compartido, se revocará el token anterior. Si cree que el secreto compartido puede haber sido comprometido, debería volver a generarlo. Si necesita rotar las claves, debería programarlo para cuando Chat esté desconectado porque si se vuelve a generar el secreto, los visitantes podrían ser desconectados del widget por 5 minutos.

Una vez generado el secreto compartido, se puede usar para crear un token JWT (Más información sobre JWT) que se agregará al fragmento del Web Widget.

Crear un token JWT

Para crear un token JWT y agregar el código al fragmento de la versión autónoma de Chat

1. Cree una carga de datos del lado del servidor para el token JWT. Debe tener la siguiente información:
   • name: nombre del cliente
   • email: Correo electrónico del cliente
   • external_id: cadena alfanumérica única para identificar al cliente. Una vez que este valor se ha definido para un cliente, no se puede cambiar. Se recomienda usar la ID de usuario única del sistema para este campo. Por ejemplo, usuario-123456.
   • iat: valor entero de la marca de tiempo actual, en segundos. Algunas funciones en idiomas específicos, es decir Date.now() de JavaScript, devuelven milisegundos, de modo que asegúrese de hacer la conversión a segundos. Iat para la autenticación de Chat permite un sesgo de reloj de hasta dos minutos.
   • exp: valor entero de la marca de tiempo actual, en segundos. Este valor indica cuándo vencerá el token JWT. El valor puede tener hasta un máximo de 7 minutos a partir del valor iat.
2. Utilice los ejemplos de código a continuación para buscar una plantilla que coincida con sus necesidades de idioma.
3. Utilice la API de JavaScript zESetting con la clave “webWidget.authentication.chat.jwtFn” para proporcionar una función que suministre un nuevo JWT cada vez que se invoque. El siguiente es un ejemplo de código:

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

   En el ejemplo de arriba, JWT_TOKEN_ENDPOINT es un extremo que se puede implementar en su propio servidor para obtener un nuevo JWT.Nota: Es posible llamar al jwtFn varias veces durante una sesión de chat para obtener un nuevo JWT y validar la identidad del visitante a lo largo de la vida útil de la sesión.
   Nota: Es posible llamar al jwtFn varias veces durante una sesión de chat para obtener un nuevo JWT y validar la identidad del visitante a lo largo de la vida útil de la sesión.

Ejemplos de código

El token se debe generar dinámicamente del lado de servidor durante la carga de la página. Busque la plantilla a continuación que coincida con sus necesidades de idioma. Personalice la muestra si es necesario, y no olvide reemplazar #{details} con su propia información.

Si ninguna de las muestras coincide con sus necesidades, JWT tiene una lista más extensa de bibliotecas JWT que puede explorar.

• Ruby
• NodeJS
• Python
• PHP
• Elixir

Ruby

Primero, instale ruby-jwt.

Si está usando Rubygems:

gem install jwt

Si está usando Bundler, agregue lo siguiente al archivo gem:

gem 'jwt'

A continuación, genere un token usando el secreto compartido:

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

NodeJS

Instale jsonwebtoken:

npm install jsonwebtoken --save-dev

A continuación, genere un token usando el secreto compartido:

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

Python

Instale python-jose:

pip install python-jose

Genere un token usando el secreto compartido:

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

PHP

Descargue PHP-JWT:

composer require firebase/php-jwt

Genere un token usando el secreto compartido:

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

Elixir

Agregue `json_web_token_ex` al archivo `mix.exs`:

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

Genere un token usando el secreto compartido:

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

Cerrar sesión

Si desea cerrar la sesión del visitante autenticado, tendrá que usar la API de JavaScript zE.logout. Si desea más información sobre la API, haga clic aquí.

Acerca de la experiencia de los agentes con visitantes autenticados

Cuando un agente comienza a chatear con un visitante autenticado, algunas cosas se actualizan en el panel de Chat.

Primero, el agente sabrá que el visitante está autenticado por la marca verde de verificación de la autenticación que aparece sobre el avatar del visitante.

El agente también observará que no puede editar ni el nombre ni el correo electrónico del visitante, puesto que la fuente de datos verdaderos es la información que se está enviando a través de la API de JavaScript.

Por último, si se prohíbe a un visitante autenticado, el visitante no tendrá acceso al widget de Chat en ninguno de los dispositivos y navegadores.

Acerca de la experiencia del Web Widget (clásico) para los visitantes autenticados

Los visitantes autenticados también tendrán una experiencia ligeramente distinta en el widget de Chat. Primero, su información es de solo lectura y no la pueden modificar a través del widget o las API de JavaScript.

Segundo, cuando el visitante ha sido autenticado, sus sesiones de chat en curso se sincronizan en todos los dispositivos. Eso le da al visitante la flexibilidad de cambiar de equipo o de navegador, y continuar sus sesiones de chat en curso, algo que no se puede hacer en la actualidad.

Tercero, los visitantes autenticados ya no pueden tener el chat abierto en una ventana emergente, porque no hay manera de verificar su identidad a través de la ventana emergente (porque la experiencia está hospedada en nuestro dominio, zopim.com).

Por último, el usuario autenticado podrá ver sus conversaciones anteriores en el widget con solo desplazarse hacia arriba en el registro de chat. Si desea más información sobre el historial de conversaciones para los visitantes autenticados, haga clic aquí.