Compartir:
){kind=small}
Chris es el director de herramientas de relaciones con los desarrolladores y dirige el equipo que crea sus herramientas favoritas. Lleva más de 15 años programando en varios lenguajes y tipos de proyectos, desde trabajos para clientes hasta sistemas de big data a gran escala. Vive en Ohio, donde pasa el tiempo con su familia y jugando a Video y TTRPG.
Uso de las API de Vonage con MongoDB Atlas - Parte 2
Tiempo de lectura: 10 minutos
En esta serie:
Continuamos nuestra inmersión en MongoDB Atlas y su uso con varias API de Vonage. En la Parte 1 vimos exactamente qué es MongoDB Atlas y algunos de los servicios que ofrece. En la Parte 2, nos sumergiremos en la aplicación de muestra para ver cómo podemos usar MongoDB para respaldar nuestro proceso de registro, así como conectar Vonage Verify para mayor seguridad del usuario.
Vonage Verify es una autenticación de dos factores que Vonage ofrece como API. Te permite realizar una simple llamada a la API para enviar un código a un usuario y luego verificar su validez con otra llamada a la API. Esto brinda seguridad adicional al garantizar que no sólo el usuario conozca su contraseña, sino que también tenga un dispositivo físico que nos haya indicado para recibir el código. Dado que la mayoría de la gente tiene un dispositivo móvil, es bastante seguro asumir que tendrán acceso a recibir el código en él.
Vonage Verify genera el código y se comunica con el cliente en tu nombre. También intentaremos comunicarnos con el cliente varias veces de diversas maneras. Por ejemplo, si no intentas validar el código de un cliente dentro de un plazo determinado, intentaremos llamar al cliente con un mensaje automatizado para proporcionarle el código. Si sigue sin introducirlo o no contesta al teléfono, volveremos a intentarlo por SMS. Puedes controlar cómo intentamos ponernos en contacto con el cliente a través de lo que se conoce como flujos de trabajo.
Nuestro producto Verify admite SMS y Voice para ponerse en contacto con el cliente. Verify admite SMS, Voice, WhatsApp, correo electrónico y canales de autenticación basados en dispositivos con flujos de trabajo totalmente personalizables. Ambos productos le liberan de tener que enviar manualmente notificaciones a sus clientes y hacer un seguimiento de sus respuestas. ni tener que preocuparse por enviar mensajes de reclamación o quedar atrapado en los filtros de spam de las compañías telefónicas.
Sólo tiene que enviarnos una solicitud de API, nosotros le enviamos el código y usted lo verifica.
Para que nuestra demo funcione, ¡necesitamos que los usuarios pidan comida! Añadir información a una base de datos MongoDB es un poco diferente a añadir datos a un Sistema de Gestión de Bases de Datos Relacionales tradicional como Postgres o MySQL. MongoDB es un sistema basado en documentos, así que en lugar de crear una base de datos con tablas, crearemos una base de datos con Colecciones. Estas Colecciones almacenarán documentos, que son documentos especiales de tipo JSON que podemos buscar y utilizar.
Vamos a crear nuestra primera base de datos. Desde el panel de control de MongoDB Atlas, haz clic en el botón Examinar colecciones para tu cluster.
MongoDB Dashboard
Esto te llevará a una vista de toda la información de tu cluster. En este momento está bastante vacío, ya que no tenemos bases de datos o información. Vamos a añadir algunos alimentos para que los usuarios los compren. Haz clic en Mis propios datos .
Adding Data
A continuación, le pedirá el nombre de la base de datos y el nombre de la colección. Para nuestra demostración queremos "restaurant_pos_demo" como nombre de la base de datos. nombre de la base de datos e "inventario" para el nombre de la colección. La demostración ya está configurado para buscar esta base de datos y la colección, así que asegúrese de utilizar estos nombres en lugar de algo personalizado. Una vez introducidos, haga clic en el botón Crear Crear.
Create new Collection
Ahora podemos introducir algunos datos. Haga clic en el botón Insertar documento . Aparecerá el editor de documentos. Aunque ofrece un pequeño conjunto de menús desplegables para introducir información, también podemos simplemente pegar algunos documentos. Haga clic en el botón {} en la parte superior para cambiar al modo de entrada de texto y pegar el pequeño bloque de JSON para el documento Hamburguesa. Haz clic en Insertary se guardará el elemento del inventario. Haz esto de nuevo, pero la segunda vez pega el documento Soda.
// Document 1
{
"name": "Hamburger",
"price": 995
}
// Document 2
{
"name": "Soda",
"price": 199
}
Document Editor
Una vez que haya introducido los dos documentos, podrá verlos en la vista de la base de datos. Este editor es una gran manera de jugar con los documentos y los datos, mientras que usted construye su base de datos, y puede ahorrar mucho tiempo durante la fase de desarrollo de depuración de datos. En un entorno de producción más grande puede ejecutar consultas para filtrar los datos, pero por ahora esta es una buena manera rápida de introducir nuestros datos.
Documents
Ahora que tenemos algunos datos, podemos cablear nuestra demo. Clona la demo de https://github.com/Vonage-Community/sample-mongodb-vonage-integration-restaurant-demo. Hay dos carpetas, ambas "webapp" con el código fuente y una carpeta "app-service" con algunas configuraciones de MongoDB que usaremos más tarde. Por ahora, ve a la carpeta "webapp" y ábrela en tu editor favorito.
Necesitamos añadir algunos detalles de configuración para que la aplicación sepa cómo hablar con tu cluster MongoDB. Haz una copia del archivo .env.dist en el repositorio, y nómbralo .env. Este archivo tendrá toda la información personalizada para tu instalación dentro de él.
Abra .env y realice los siguientes cambios:
Cambia "ENABLE_VERIFY" a "1" para que podamos ver la Verify API de Vonage en acción.
Establece "VONAGE_API_KEY" como la clave API de Vonage disponible en tu panel de cliente de Vonage.
Establece "VONAGE_API_SECRET" como el secreto de API de Vonage disponible en tu panel de cliente de Vonage.
Cambia la "JWT_SIGNING_KEY" por algún valor aleatorio. La cadena no importa realmente, pero la usaremos más adelante para validar las llamadas a la API.
También necesitaremos establecer el valor de "MONGODB_DSN" a la cadena de conexión de tu cluster. Para encontrar este valor, ve a tu panel de control de MongoDB Atlas, y haz clic en el botón Conectar de su clúster. En la ventana emergente, haga clic en Conecte su aplicación. Esto le llevará a una pantalla que tiene su cadena de conexión. Copie ese valor y péguelo en el valor de "MONGODB_DSN" en .env. Asegúrese de cambiar la parte <password> por la contraseña de su cluster.
Connecting to the application
Ya deberíamos poder ejecutar la demo.
La demo en sí está construida usando Vite, Vue.js y Typescript. Para ejecutar la demo, necesitamos ejecutar tanto la aplicación cliente front-end como una aplicación servidor back-end. Abre dos terminales de línea de comandos.
En el primer terminal, en la carpeta webapp/ ejecute npm ci para instalar todas las dependencias y, a continuación, ejecute npm run dev. Si todo va correctamente, usted debe obtener una pantalla que dice "Vite <version>" y luego un enlace para Localprobablemente apuntando a http://localhost:5173. Su enlace puede ser ligeramente diferente si tiene otras cosas escuchando en el puerto 5173.
En el segundo terminal, navegue hasta webapp/server. Como en la otra ventana ejecuta npm ci para instalar todas las dependencias y, a continuación, ejecute npm run dev. Esta pantalla debería mostrar nodemon start y finalmente decir "Server Started". Si ves un error sobre que no se puede conectar, comprueba la cadena de conexión de tu cluster MongoDB.
Starting the demo
Abra su navegador y vaya a http://localhost:5173/website/login (sustituye el número de puerto por el que Vite te diga que está ejecutando). ¡Usted debe ser recibido con la siguiente pantalla de inicio de sesión!
Login Page
Actualmente no tenemos usuarios, así que vamos a crear uno. Haz clic en O regístrate en flavor de la página. Introduzca un nombre de usuario, una contraseña y un número de teléfono móvil. Su número debe incluir el prefijo del código de país y no debe tener guiones. Enviaremos un código de autenticación de dos factores a este número de móvil como parte del inicio de sesión del usuario, así que asegúrate de utilizar un número de móvil real, no un número de Google Voice. Si estás en EE.UU., un ejemplo sería "15556661234".
Una vez que haya introducido su información de usuario, haga clic en Regístrese en.
Ahora debería poder iniciar sesión. Introduzca el nombre de usuario y la contraseña con los que se acaba de registrar. Si la autenticación se ha realizado correctamente, aparecerá un pequeño formulario pidiéndote que introduzcas tu código 2FA.
2FA Form
Al cabo de unos segundos, debería recibir un SMS con un código de cuatro dígitos. Introduzca ese código en el formulario y haga clic en Enviar. Si todo funciona, verás una pantalla de pedido con nuestra hamburguesa y nuestro refresco.
Cuando el usuario inicia sesión, nuestra aplicación cliente Vue.js envía el nombre de usuario y la contraseña a nuestro servidor backend, concretamente a /api/website/authenticate. Esta ruta se conecta directamente a nuestro clúster MongoDB y encuentra al usuario a partir de una users colección. Cuando registramos un nuevo usuario, MongoDB creó automáticamente la colección por nosotros y almacenó un documento para el usuario. Recuperamos este documento y comparamos la contraseña con la copia hash almacenada en el documento.
El cliente Node.js de MongoDB es un cliente fluido, lo que significa que podemos encadenar llamadas a métodos para generar una consulta. La línea:
const userRecord = await client.db('restaurant_pos_demo').collection('users').findOne({ username });le dice al cliente MongoDB que use nuestra base de datos "restaurant_pos_demo", busque en la colección "users", y encuentre un documento con el "username" que se proporcionó en la petición. Dado que almacenamos la contraseña como un hash bcrypt, podemos usar bcrypt.compare() para comprobar la contraseña proporcionada por el usuario con la que almacenamos en el documento del usuario. Si coinciden, ¡el usuario ha introducido la contraseña correcta!
// webapp/server/server.ts
app.all('/api/website/authenticate', async (req, res) => {
const { username, password } = req.body
const userRecord = await client.db('restaurant_pos_demo').collection('users').findOne({ username });
if (userRecord) {
await bcrypt.compare(password, userRecord.password)
.then(async (match) => {
if (match) {
const token = jwt.sign({user_id: userRecord._id }, process.env.JWT_SIGNING_KEY, { expiresIn: '15m'})
let verifyId = {request_id: 'abcd'};
if (process.env.ENABLE_VERIFY === "1") {
verifyId = await vonage.verify.start({number: userRecord.phone, brand: 'Vonage Restaurant'})
console.log(verifyId);
} else {
console.log('Verify Disabled');
}
res.status(200).json({ token, verifyId: verifyId.request_id })
} else {
res.status(401).send()
}
})
return
}
res.status(401)
res.send()
return
})A continuación, generamos un JWT temporal para enviarlo de vuelta a la aplicación Vue.js. Nuestra aplicación Vue.js utilizará este JWT temporal cuando el usuario introduzca el código en la aplicación del lado del cliente. Si Verify está habilitado en la demostración con "ENABLE_VERIFY", usamos la función Vonage Node.js SDK para llamar a Verify API. Pasamos el número de teléfono del usuario y establecemos la marca como "Vonage Restaurant". Cuando el usuario reciba un mensaje SMS o una llamada de voz, se identificará como "Vonage Restaurant" al recibirlo.
La API de Vonage devuelve un "ID de solicitud", que también enviaremos al front-end y usaremos para verificar el código del usuario. A continuación, enviamos el token JWT temporal y el ID de solicitud de vuelta a la aplicación Vue.js.
Una vez verificado que el usuario era quien decía ser, cambiamos el formulario de Vue.js para que pidiera el código 2FA. Cuando el usuario introduce el código, la aplicación Vue.js envía una solicitud a /api/website/authenticate/verify con el token, Verify Request ID y el código introducido por el usuario.
El JWT contiene el ID del documento del usuario, así que decodificamos el token y volvemos a buscar al usuario en MongoDB. Si lo encontramos, llamamos a la Verify API, pero esta vez usamos el método check() y enviamos el ID y el código de la solicitud. La API devolverá un éxito si el código coincide. Si coincide, generamos un JWT real con una caducidad más larga y lo devolvemos a la aplicación Vue.js.
// webapp/server/server.ts
app.all('/api/website/authenticate/verify', async (req, res) => {
const { token, verifyId, tfaPin } = req.body
const decodedToken = jwt.decode(token)
const userRecord = await client.db('restaurant_pos_demo').collection('users').findOne({ _id: new ObjectId(decodedToken.user_id) });
if (userRecord) {
if (process.env.ENABLE_VERIFY === "1") {
await vonage.verify.check(verifyId, tfaPin)
.then(resp => {
console.log(resp)
const token = jwt.sign({user_id: userRecord._id }, process.env.JWT_SIGNING_KEY, { expiresIn: '2h'})
res.status(200).json({ token })
})
.catch(err => {
console.error("there was an error", err);
})
return
} else {
const token = jwt.sign({user_id: userRecord._id }, process.env.JWT_SIGNING_KEY, { expiresIn: '2h'})
res.status(200).json({ token })
}
}
res.status(500)
res.send()
return
})La aplicación Vue.js sabe que estamos completamente autenticados una vez que recibe el JWT apropiado. Almacena este token dentro de un almacén global llamado "authenticationStore", y el resto de la aplicación utilizará este JWT para autenticar al usuario para cualquier otra llamada a la API.
// src/views/Website/Login.vue
const verify = async() => {
fetch(import.meta.env.VITE_API_URL + '/api/website/authenticate/verify', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
token: tempJWT.value,
verifyId,
tfaPin: tfaPin.value
})
})
.then(resp => resp.json())
.then(async (json) => {
console.log(json)
authStore.setToken(json.token)
router.push({ name: 'website.order' });
return
})
.catch(err => console.log(err));
}
Si ya tienes un paso de autenticación en tu aplicación, agregar Vonage Verify es sólo unas pocas líneas adicionales de código. Para nuestra aplicación Vue.js, significó una llamada adicional a nuestro backend y un nuevo formulario, y del lado del servidor, solo necesitábamos hacer la llamada a la API para enviar el código y luego una nueva ruta para verificar el código. Como Vonage se encarga de todo el trabajo pesado de generar, enviar y verificar el código, el impacto en nuestra base de código es mínimo. La flexibilidad del almacenamiento basado en documentos de MongoDB significaba que no necesitábamos ejecutar ninguna migración de base de datos y que podíamos escribir rápidamente el código para insertar un nuevo usuario y realizar las búsquedas.
Ahora que nuestros usuarios pueden conectarse, ¡deberían pedir algo de comida!
En la siguiente sección, veremos cómo usar MongoDB para almacenar el pedido y la SMS API de Vonage para enviar una confirmación de pedido. También echaremos un vistazo al uso de la Meetings API de Vonage para agregar rápidamente videoconferencias a nuestra aplicación para resoluciones de servicio al cliente.
Compartir:
Chris es el director de herramientas de relaciones con los desarrolladores y dirige el equipo que crea sus herramientas favoritas. Lleva más de 15 años programando en varios lenguajes y tipos de proyectos, desde trabajos para clientes hasta sistemas de big data a gran escala. Vive en Ohio, donde pasa el tiempo con su familia y jugando a Video y TTRPG.