Cómo agregar la autenticación de clientes a Twilio Flex

July 22, 2020
Redactado por
Revisado por
Phil Nash
Twilion

autenticación de clientes en el encabezado de Flex

La seguridad del centro de llamadas es un punto débil conocido para muchas empresas. Esto se debe a que la mayoría de los centros de llamadas solo identifican y no autentifican realmente a los usuarios cuando llaman.

La información de identidad suele ser un dato estático, como el número de teléfono o la fecha de nacimiento, cosas que mucha gente sabe sobre mí y sobre usted. La información de identidad suele ser fácil de encontrar o comprar y probablemente no cambia. Con un poco de búsqueda, los hackers pueden utilizar la ingeniería social para eludir la “verificación” común basada en el conocimiento de la identidad de un usuario. La autenticación es la forma de probar la identidad con un factor que puede ser algo que se conoce como una contraseña, algo que se tiene como una clave, o algo que se es como una huella digital.

Las opciones para autenticar realmente a los usuarios que se comunican con el sistema de asistencia incluyen el envío de códigos de acceso de un solo uso (OTP) a un usuario a través de SMS o correo electrónico, devoluciones de llamadas, PIN de seguridad, contraseñas verbales, reconocimiento de voz, etc. Para obtener más ideas, consulte este publicación de blog sobre las prácticas recomendadas de seguridad en los centros de contacto.

En esta publicación encontrará cómo agregar un plugin de Twilio Flex que puede enviar OTP por SMS para autenticar usuarios con la API Twilio Verify.

Gif que muestra cómo funciona el plugin para autenticar a las personas que llaman

¿Ya está familiarizado con los plugin de Flex? Consulte el código del plugin en GitHub.

Configuración

Para codificar junto con esta publicación necesitará:

  1. Una cuenta Twilio. Obtenga un crédito de $10 si se actualiza con este enlace.
  2. Un proyecto de Flex. Cree un nuevo proyecto de Flex en la consola.
  3. Un servicio de Verify. Cree un servicio nuevo de Verify en la consola.
  4. La CLI de Twilio. Instale la CLI para el sistema operativo e inicie sesión con las credenciales de su cuenta de Flex mediante .
  5. El plugin serverless de Twilio. Instale desde la línea de comandos con . Para obtener más detalles, consulte la documentación.
  6. El plugin Twilio Flex. Instale desde la línea de comandos con . Para obtener más detalles, consulte GitHub.

Requisitos previos para desarrollar un plugin de Flex React

Flex y sus plugin utilizan React, por lo que necesitará algunas dependencias de JavaScript:

  • NPM versión 5.0.0 o posterior instalada (escriba en la terminal para comprobarlo).
  • Node versión 10.19.0 o posterior instalada (escriba  en la terminal para comprobarlo). Recomiendo utilizar  para administrar las versiones de Node.

Obtenga más información sobre el desarrollo de plugin de Flex en la sección inicio rápido.

Clone (o descargue) el plugin desde GitHub:

git clone https://github.com/twilio-labs/plugin-verify.git && cd plugin-verify

Instale todas las dependencias del proyecto con:

npm install

 

Implementar las funciones de verificación serverless

Este plugin utiliza dos puntos finales de la API Verify: uno para iniciar la verificación y otro para comprobarla. Hemos envuelto esas llamadas a la API en funciones serverless que se encuentran en la carpeta serverless. Puede obtener más información sobre estas funciones en la sección publicación de blog de verificación de teléfono serverless.

Copie el archivo de ejemplo de configuración serverless .env.serverless.example en .env:

cp serverless/.env.serverless.example serverless/.env

Abra el nuevo archivo .env y complete las variables:

# Find in: twilio.com/console
ACCOUNT_SID=
AUTH_TOKEN=

# Create in: twilio.com/console/verify/services
VERIFY_SERVICE_SID=

Implemente las funciones con la CLI de Twilio y el kit de herramientas serverless de Twilio. Nota: debe estar dentro del directorio serverless para ejecutar este comando.

 

twilio serverless:deploy

 

Captura de pantalla de las URL de las funciones implementadas

Guarde las URL de las funciones que se muestran con los detalles de implementación que se muestran arriba. También puede encontrar las funciones en la consola.

Copie .env.example en la raíz del proyecto en .env:

# in the project root
cp .env.example .env

Actualice REACT_APP_SERVICE_BASE_URL para que sea la nueva url de función.

REACT_APP_SERVICE_BASE_URL="http://verify-plugin-1234-dev.twil.io"

La URL será ligeramente diferente.

Iniciar el plugin de forma local

Desde la raíz del proyecto, inicie el plugin de forma local:

twilio flex:plugins:start

Esto abrirá una nueva ventana del navegador. Haga clic en Login with Twilio (Iniciar sesión con Twilio) para autentificarse como agente. Una vez que sea redirigido a la aplicación Flex, asegúrese de que su agente está configurado como Available.

Captura de pantalla que muestra cómo iniciar sesión con Twilio cuando inicia Flex

Después, llame o envíe un mensaje al número de Flex para probar el plugin (puede encontrar el número de Flex en la consola o en el panel de la unidad de prueba de la instancia de Flex alojada). Una vez que acepte la tarea, active la verificación con el botón rojo.

Enviar token de verificación al botón de usuario

Esto llamará a la función start-verify que implementamos antes para enviar un código de acceso de un solo uso (OTP) al número de teléfono del cliente. El plugin envía el código de acceso al número de teléfono desde el que el cliente llamando o envía un mensaje de texto, lo que ayuda a verificar que la persona que llama no está falsificando el número de teléfono. También puede hacer una búsqueda en CRM con otra información del usuario o incluso puede enviar el OTP por correo electrónico.

El agente puede entonces ingresar el OTP proporcionado por el cliente. Dos cosas suceden cuando se verifica al cliente:

  1. Flex muestra un banner con el mensaje que el cliente está verificado.
  2. Flex muestra los datos en la pestaña “INFO” (Información).

Esto último es un ejemplo de cómo limitar la información de la persona que llama a disposición del agente hasta que se autentique correctamente. Esto puede ayudar a limitar los ataques de ingeniería social mediante la creación de barandas para los agentes.

Desplegar el plugin Flex

Podemos desplegar este plugin mediante la CLI. Tenga en cuenta que esto no despliega las funciones serverless, eso se hace en un paso separado descrito anteriormente.

twilio flex:plugins:deploy

Debería ver una nota en la que se indica que 🚀 Tu plugin ha sido desplegado con éxito en tu proyecto Flex y puede probarlo al iniciar la instancia de Flex alojada. Puede encontrar más detalles sobre la implementación de los plugin de Flex en la documentación.

Pasos siguientes

Esta es una gran opción para la verificación manual, pero existen otras opciones para la autenticación del centro de llamadas. También puede hacer lo siguiente:

  • Construir un sistema de código pin para los usuarios con una sesión web autenticada.
  • Enviar y verificar el OTP antes de que el agente y el usuario se conecten.
  • Devolver la llamada al usuario al número de teléfono registrado.

Puede consultar otras recomendaciones en la publicación de blog sobre las prácticas recomendadas de seguridad en los centros de contacto o ver esta charla que di sobre el tema el año pasado.

¿Tiene otras preguntas sobre la seguridad de los centros de contacto? Ingrese a mi cuenta de Twitter @kelleyrobinson.

Este artículo ha sido traducido del original "How to add customer authentication to Twilio Flex". Mientras continuamos con los procesos de traducción, nos encantaría recibir sus comentarios en help@twilio.com - Buenas contribuciones pueden generar regalos de Twilio.