Compartir:
){kind=small}
Julia está comprometida con la capacitación de los desarrolladores mediante la creación de tutoriales, guías y recursos prácticos. Con experiencia en divulgación y educación, su objetivo es hacer que la tecnología sea más accesible y mejorar la experiencia general de los desarrolladores. A menudo se la puede encontrar en eventos de la comunidad local.
Verify Phone Numbers with Node-RED (Verificar números de teléfono con Node-RED)
Tiempo de lectura: 15 minutos
Nota: Es posible que algunas de las herramientas o métodos descritos en este artículo ya no reciban soporte o no estén actualizados. Para obtener contenido actualizado o soporte, consulta nuestras últimas publicaciones o contáctanos en el Slack de la comunidad de Vonage
En tutoriales anteriores has aprendido sobre las APIs Nexmo SMS y Voice, te has familiarizado con el envío y recepción de mensajes y llamadas, y con suerte, también has tenido la oportunidad de experimentar y jugar con la personalización de estas experiencias en Node-RED.
En este tutorial, veremos la Verify API y exploraremos una forma práctica de validar los números de teléfono de tus usuarios.
Para que el proceso sea lo más sencillo posible, muchas aplicaciones incorporan a los usuarios sólo un número de teléfono, que luego deben utilizar para autenticarse.
Así que vamos a ver cómo podemos hacerlo, además de asegurarnos de que no hay cuentas duplicadas y de que los usuarios están realmente localizables en los números de teléfono facilitados por ellos.
Antes de empezar, necesitarás algunas cosas:
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
Para interactuar con Verify API, deberá tener en cuenta un par de cosas. Una vez que haya creado una Account de Nexmo, vaya al panel de control para encontrar tu clave y secreto API. Utilizarás estas credenciales más adelante para autenticarte con la API.
En primer lugar, tendrá que instalar el tiempo de ejecución y el editor. Puedes hacerlo en tu equipo local, en un ordenador monoplaca (por ejemplo, Raspberry Pi) o en una serie de opciones alojadas en la nube.
Este ejemplo utilizará su máquina local, así que una vez que haya instalado Node-RED globalmente, escriba el siguiente comando en su terminal para empezar.
A continuación, puede acceder al editor Node-RED dirigiendo su navegador a http://localhost:1880.
Una vez que tengas tu editor abierto, necesitarás instalar los nodos Nexmo. Puedes hacerlo en la Gestionar paleta buscando el paquete node-red-contrib-nexmo y haciendo clic en instalar.
install node red
A continuación, repita el paso anterior para el paquete node-red-dashboard paquete.
Después de reiniciar Node-RED, ahora debería ver todos los nodos Nexmo y Dashboard aparecer en el lado izquierdo de su pantalla, entre los otros nodos por defecto en la paleta de nodos.
Para este tutorial necesitarás una interfaz de usuario sencilla para recoger las entradas de los usuarios. Hay un par de maneras de hacerlo, incluyendo escribir tu propio HTML y CSS, pero una alternativa mucho más rápida es usar los nodos del panel de control de Node-RED.
Un campo de texto que recoge el número de teléfono
Un campo de texto que recoge el código PIN
A Cancelar verificación botón
A Llámame Esto le dará al usuario la opción de solicitar una llamada telefónica además de un SMS, como medio para recibir el código PIN.
Acelere el proceso Importar desde el portapapeles el siguiente fragmento, o experimente usted mismo con los nodos del cuadro de mandos.
[
{
"id": "463e8e92.d82a78",
"type": "tab",
"label": "Verify Demo",
"disabled": false,
"info": ""
},
{
"id": "fb7955ef.0e5fd8",
"type": "ui_form",
"z": "463e8e92.d82a78",
"name": "",
"label": "Verify your phone number:",
"group": "91563061.fc448",
"order": 1,
"width": 0,
"height": 0,
"options": [
{
"label": "eg. 447401234567",
"value": "number",
"type": "text",
"required": true
}
],
"formValue": {
"number": ""
},
"payload": "",
"submit": "Send me a code",
"cancel": "delete",
"topic": "",
"x": 430,
"y": 140,
"wires": [
[]
]
},
{
"id": "b60bf0b2.9a839",
"type": "ui_button",
"z": "463e8e92.d82a78",
"name": "",
"group": "91563061.fc448",
"order": 2,
"width": "0",
"height": "0",
"passthru": false,
"label": "Call me",
"tooltip": "",
"color": "",
"bgcolor": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "",
"x": 520,
"y": 580,
"wires": [
[]
]
},
{
"id": "b182a10d.c8f08",
"type": "ui_button",
"z": "463e8e92.d82a78",
"name": "",
"group": "91563061.fc448",
"order": 3,
"width": 0,
"height": 0,
"passthru": false,
"label": "Cancel Verification",
"tooltip": "",
"color": "",
"bgcolor": "red",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "",
"x": 550,
"y": 760,
"wires": [
[]
]
},
{
"id": "a2251664.3ba2f",
"type": "comment",
"z": "463e8e92.d82a78",
"name": "Start Verification - Collect phone number to be verified",
"info": "",
"x": 520,
"y": 80,
"wires": []
},
{
"id": "7185f18d.87142",
"type": "comment",
"z": "463e8e92.d82a78",
"name": "Check if received code matches the generated one",
"info": "",
"x": 510,
"y": 280,
"wires": []
},
{
"id": "7f30e.60359cf28",
"type": "comment",
"z": "463e8e92.d82a78",
"name": "Next Verification - Escalate to TTS Call",
"info": "",
"x": 610,
"y": 520,
"wires": []
},
{
"id": "c46fa301.4eb0d8",
"type": "comment",
"z": "463e8e92.d82a78",
"name": "Cancel Verification",
"info": "",
"x": 550,
"y": 700,
"wires": []
},
{
"id": "ab7fb094.d7d1f8",
"type": "ui_form",
"z": "463e8e92.d82a78",
"name": "",
"label": "Check code:",
"group": "91563061.fc448",
"order": 4,
"width": 0,
"height": 0,
"options": [
{
"label": "Enter the PIN code you received",
"value": "code",
"type": "text",
"required": true
}
],
"formValue": {
"code": ""
},
"payload": "",
"submit": "submit",
"cancel": "delete",
"topic": "",
"x": 390,
"y": 340,
"wires": [
[]
]
},
{
"id": "91563061.fc448",
"type": "ui_group",
"z": "",
"name": "Verify Demo Input Fields",
"tab": "fdce8e2a.f4364",
"disp": false,
"width": "8",
"collapse": false
},
{
"id": "fdce8e2a.f4364",
"type": "ui_tab",
"z": "",
"name": "Verify Demo",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]Cuando esté listo, su editor debería tener un aspecto similar al siguiente:
verify UI template
Para ver su interfaz de usuario, vaya a http://127.0.0.1:1880/ui.
verify UI
Una vez que hemos recopilado el número de teléfono de un usuario, podemos iniciar el proceso de verificación enviando una solicitud de verificación a la Verify API.
Para iniciar una verificación, necesitará un nodo sendverify conectado al formulario que capture el número de teléfono del usuario. Por defecto, esto enviará un breve texto personalizado y un código PIN en un mensaje SMS al número de teléfono del usuario, seguido de dos llamadas telefónicas de texto a voz en caso de que no envíen el código recibido.
Abra las sendverify haciendo doble clic sobre él. Allí encontrará los tres campos obligatorios que deberá rellenar: Nexmo Credentials, To {} y Brand {}.
Observe el símbolo {} junto a las etiquetas, lo que significa que esos campos soportarán Plantillas Mustache y podrás pasar valores dinámicamente.
En el menú Nexmo Credentials seleccione Añadir nuevo nexmobasic y haga clic en el botón Editar. A continuación, se le pedirá que introduzca su API Key y API Secret para autenticarte con la Verify API - ambos se pueden encontrar en tu Panel Nexmo.
Una vez que haya terminado, haga clic en añadir. Junto a la etiqueta Nexmo Credentials verás un nodo nodo configque almacenará tus credenciales.
A continuación, tendrá que introducir el número de teléfono de su usuario en el campo To {} campo. Si ha importado el fragmento de interfaz de usuario anterior, será {{msg.payload.number}}ya que en el primer nodo form que el valor de entrada se recogerá en la clave number de msg.payload. Puede cambiar esto abriendo las propiedades del nodo form y eligiendo una clave Name.
Por último, puede personalizar el cuerpo del SMS de solicitud de verificación en Brand {} para ayudar a los usuarios a identificar el nombre de su empresa o aplicación. Toma una cadena alfanumérica de 18 caracteres que se antepondrá al número PIN generado por Verify API.
Por ejemplo: "Su PIN de Acme Inc es ..."
send verify configuration
El nodo sendverify da salida a la respuesta API recibida de Nexmo, que contiene un request_id y un parámetro status parámetro. Más información sobre los códigos de estado en la Referencia de Verify API.
La dirección request_id se utilizará para todos los pasos siguientes, por lo que tenemos que hacerlo accesible por todos los demás nodos del flujo actual. Para ello, conecte un nodo change a sendverifyabra sus propiedades de nodo y establezca flow.request_id a msg.payload.request_id.
verify set request ID
Para tener un poco más de idea de lo que está pasando, también puedes conectar un debug nodo en sendverify. De esta forma puedes seguir la respuesta de la API en la barra lateral de depuración.
La solicitud ha sido aceptada con éxito por Nexmo, su usuario ha recibido un código de verificación y ya lo ha enviado a través del formulario correspondiente. ¿Ha sido un éxito? Casi.
Ahora tenemos que averiguar si el código enviado es realmente el generado y enviado por la Verify API.
Para este paso necesitaremos el nodo checkverify que tomará como entrada el ID de solicitud y el Código proporcionados por el usuario, los comparará y, a continuación, enviará la respuesta de la API a la carpeta msg.payload.
Después de arrastrarlo a tu espacio de trabajo, conéctalo al formulario que captura el código PIN enviado por el usuario, luego conecta un nodo debug para ver el objeto de respuesta en la barra lateral de depuración.
Abra las checkverify propiedades del nodo. En el menú Nexmo Credentials seleccione el nodo de configuración creado por sendverifyy rellene el campo Request ID {} con {{flow.request_id}} y pase el código enviado por su usuario al campo Code {} campo.
Si ha importado el fragmento de interfaz de usuario anterior, será {{msg.payload.code}}ya que en el segundo nodo form que el valor de entrada se recogerá en el nodo code de msg.payload. Puede cambiar esto abriendo las propiedades del nodo form y eligiendo una clave Name.
check verify
Felicidades!🎉 Su flujo Verify está en marcha, vaya a http://localhost:1880/ui y ¡pruébalo!
Después de enviar el código PIN recibido, vuelva a su Editor Node-RED y eche un vistazo más de cerca a la barra lateral de depuración.
El objeto de respuesta contendrá detalles sobre su solicitud, incluyendo statusque indica si ha tenido éxito o no. Si el PIN enviado por el usuario coincide con el generado por la Verify API, status tendrá un valor de "0".
Aunque el número de teléfono del usuario se ha validado correctamente, en este momento no hay ninguna señal de este evento aparte de la barra lateral de depuración.
Para definir qué debe ocurrir una vez finalizado el proceso de verificación, podemos utilizar la propiedad status de msg.payload para separar los distintos escenarios.
Es posible que desee conceder acceso a este usuario a una determinada página web o aplicación, guardar los detalles del usuario verificado con éxito en una base de datos, o hacerles saber cuál fue el resultado y pedirles que vuelvan a intentarlo en caso de que hubiera fallado. Todo depende de su caso de uso y de por qué está intentando verificar a sus usuarios en primer lugar.
Para simplificar las cosas, vamos a evaluar la propiedad status y, en función de su valor, indicaremos al usuario si la verificación se ha realizado correctamente o no. Si desea ser más preciso con sus mensajes de error, siéntase libre de añadir más rutas para otros códigos de estado también.
Para ello, necesitaremos:
a
switchpara comprobar el valor demsg.payload.statusa
notificationnodo del salpicadero para informar al usuariodos
changenodos para preparar el mensaje que elnotificationuno en caso de éxito y otro en caso de intento fallido.
Añade estos nodos a tu espacio de trabajo y conéctalos como se ve en la imagen de abajo.
check verify switch
Veamos ahora con más detalle cada uno de estos nodos:
switch
El nodo switch enruta los mensajes basándose en los valores de sus propiedades o en su posición secuencial. En este caso, queremos crear dos rutas basadas en el valor de msg.payload.status.
Cuando llega un mensaje, el nodo evalúa cada una de las reglas definidas en sus propiedades y reenvía el mensaje a las salidas correspondientes de las reglas coincidentes.
En primer lugar, haga doble clic en el nodo switch para acceder a sus propiedades. En el campo Property sustituya "payload" por "status", de modo que sea msg.payload.status lo que se evalúa.
A continuación, tenemos que definir reglas basadas en su valor. Haga clic en el botón añadir para añadir una segunda regla, ya que necesitaremos dos:
éxito: en la primera regla, seleccione "==" en el primer desplegable y escriba un "0" en el campo de texto situado junto a ella;
fallo: en la segunda regla, seleccione "!=" en el primer desplegable y escriba un "0" en el campo de texto situado junto a él. Esto cubrirá todos los casos en los que la verificación no sea un éxito.
Obsérvese que las reglas tienen un -> 1 y un -> 2 junto a ellas. Esto indica que si la primera afirmación es verdadera, se dispararán los nodos conectados a la primera salida. En los demás casos, se dispararán los conectados a la segunda salida.
notification
El nodo notification nodo se muestra msg.payload como una notificación emergente o un OK/Cancelar en la interfaz de usuario. Puede elegir el tipo de notificación en el menú desplegable Layout en las propiedades del nodo y, en el caso de una notificación emergente, también puede configurar su posición.
Establezca la duración en el campo Timeout (S) introduciendo el número de segundos que desea mantenerlo visible en la interfaz de usuario.
Si desea establecer un título, puede hacerlo en el campo Topic o, en caso de que haya un msg.topic se utilizará como título.
Es posible personalizar aún más la experiencia definiendo un color de borde, ya sea en el campo Border o introduciéndolo dinámicamente en el campo msg.highlight.
change
En los change utilizaremos la operación Set para especificar los valores de msg.payload y msg.highlight.
Abramos las propiedades del primer nodo change (asegúrate de que está conectado a la primera salida del nodo switch nuestro escenario de éxito). Establece msg.payload a un mensaje de éxito como "¡Verificación exitosa!", haz clic en el botón añadir para definir una segunda regla y configure msg.highlight a "verde".
Repite los mismos pasos para el segundo change pero esta vez ponga como valor msg.payload "¡Verificación fallida!" como valor y ponga msg.highlight a "rojo". Además, asegúrate de que está conectado a la segunda salida del nodo switch nodo.
Visite Despliegue y vuelve a intentarlo. Cuando finalice el proceso de verificación, aparecerá una ventana emergente con el resultado.
Una vez iniciado el proceso de verificación, Nexmo realizará tres intentos de enviar el código PIN al número de teléfono indicado: un mensaje SMS y dos llamadas telefónicas de texto a voz (TTS).
Hay ocasiones en las que una llamada telefónica es la mejor opción, ya sea por razones de accesibilidad o por pura preferencia personal. Siempre es un buen detalle dar a nuestros usuarios la opción de elegir un método de entrega alternativo, así que vamos a echar un vistazo a la implementación de un botón que escalaría el proceso de verificación a una llamada TTS al instante.
En la plantilla de flujo proporcionada, busque el campo Llámame y conecte un nodo nextverify nodo en él. Abra las nextverify propiedades del nodo, seleccione Nexmo Credentials en el menú desplegable y rellena el campo Request ID {} con {{flow.request_id}}. También puede añadir un nodo debug para obtener más información, y un nodo change seguido de un nodo notification para que el usuario sepa qué está pasando, como en el paso anterior, pero es completamente opcional.
En un mundo ideal nos detendríamos aquí, pero siempre surge algo, ¿no? Te has equivocado al rellenar un formulario y le has dado a enviar... demasiado tarde para cambiar de opinión y darle a que Borrar ahora, la verificación ya ha comenzado.
Quizá pienses que puedes esperar y volver a intentarlo una vez que haya fallado. Sí, eso también funciona, pero no es la forma ideal de hacerlo. Además de dar una experiencia frustrante a sus usuarios, piense en la pobre alma desprevenida que termina recibiendo dos llamadas telefónicas, además de ese mensaje de verificación inicial - a las 2 am. Vaya.
Afortunadamente, existe una forma rápida y sencilla de implementar una Cancelar verificación Cancelar verificación.
Si ha importado el fragmento de interfaz de usuario proporcionado, todo lo que tiene que hacer es conectar un nodo cancelverify en el nodo Cancelar verificación y abrir las propiedades del nodo cancelverify propiedades del nodo, seleccione su Nexmo Credentials en el menú desplegable y rellenar el campo Request ID {} con {{flow.request_id}}.
También podría añadir un nodo debug para ver el objeto de respuesta en la barra lateral de depuración, y un nodo change seguido de un nodo notification para que el usuario sepa que se ha cancelado correctamente.
Ahora pulsa Despliegue y pruébalo. Ten en cuenta que para que una solicitud de cancelación sea válida, debe iniciarse al menos 30 segundos después de que se haya enviado el número de teléfono. Todavía hay tiempo de sobra para evitar que se inicie esa llamada TTS.
¡Et voilà! Una vez colocada la protección de seguridad, podrá dormir mejor por la noche, al igual que todos los desprevenidos desconocidos a los que vaya a verificar. Buen trabajo.
Ya puede seguir el flujo del proceso de verificación en la barra lateral de depuración, ya que cada objeto de retorno recibido de la API Nexmo es registrado por un nodo de depuración, y proporciona una valiosa visión de lo que está sucediendo.
A veces el área de depuración puede estar un poco abarrotada, dificultando la localización de la pieza de información que estás buscando. Además de eso, es posible que desee comprobar en su verificación entre los eventos, no tener que esperar a que el próximo que se produzca con el fin de otro objeto de retorno a la pupila para arriba. Puede que ya se haya completado, pero no estás exactamente seguro de si falló o se completó con éxito.
La buena noticia es que existe un searchverify nodo Nexmo que se ocupa de todas estas preocupaciones. Al ser activado por, digamos, un nodo inject emitirá toda la información disponible sobre una solicitud de verificación pasada o actual identificada por un nodo request_id.
Añada un nodo searchverify a su área de trabajo, conéctelo entre un nodo inject y un nodo debug nodo. En las searchverify propiedades del nodo seleccione su Nexmo Credentials en el menú desplegable y rellene el campo Request ID {} con {{flow.request_id}} para obtener detalles sobre la verificación actual. También puede pegar un request_id en este campo, en caso de que quisieras comprobar una verificación anterior a la actual.
Ahora, cuando mires la barra lateral de depuración, después de darle una vuelta a tu aplicación, te darás cuenta de que cada vez que hagas clic en el botón del nodo inject en tu editor devolverá un objeto con todos los detalles disponibles sobre la petición en cuestión. Echa un vistazo a los campos de respuesta y dirígete a la Referencia API Nexmo para saber más sobre cada uno de ellos.
Nexmo Verify Referencia API
Verify Documentación
Prueba con otro tutorial:
Compartir:
Julia está comprometida con la capacitación de los desarrolladores mediante la creación de tutoriales, guías y recursos prácticos. Con experiencia en divulgación y educación, su objetivo es hacer que la tecnología sea más accesible y mejorar la experiencia general de los desarrolladores. A menudo se la puede encontrar en eventos de la comunidad local.