){kind=small}
Mejora tu autenticación multifactor con las API de Vonage y Firebase
Tiempo de lectura: 7 minutos
Última actualización de este artículo: 4 de marzo de 2026
En esta entrada de blog, te mostraré cómo mejorar tu autenticación multifactor utilizando nuestra API Vonage Identity Insights API, SIM Swap insighty Verify API. También usamos Firebase Services para almacenar nuestras funciones con Funciones en la nubeLos datos se almacenan en Cloud Firestore y nuestra aplicación web usando alojamiento Firebase.
El código fuente de la aplicación se puede encontrar en nuestro repositorio de GitHub.
Nota: Esta entrada de blog añade Firebase Services a la ya existente Mejore su autenticación multifactor con Verify API y SIM Swap Insight. El tutorial cubre tanto la creación del servidor usando Express como su despliegue en la nube. Puede consultar esta entrada de blog anterior y el repositorio de GitHub para obtener explicaciones detalladas.
Una cuenta de desarrollador de Vonage
Node.js y npm están instalados en su máquina
Un proyecto Firebase se configura en la Consola Firebase (he llamado al mío account-recovery-demo)
Firebase CLI instalado
Un editor de código/texto
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.
Este tutorial de recuperación de Account muestra cómo los usuarios pueden iniciar sesión, restablecer contraseñas o verificar su identidad accediendo a la página web front-end. Esta página interactúa con el back-end de Firebase Functions para almacenar y recuperar credenciales de usuario en Firebase Cloud Firestore.
Una vez que el usuario intente restablecer su contraseña, recibirá un código de verificación de un solo uso generado por Verify API de Vonage. Sin embargo, eso solo sucederá una vez que los detalles de intercambio de SIM se verifiquen con los proveedores de servicios de comunicación mediante la API de intercambio de SIM de Vonage Identity Insights.
Overview DiagramLa aplicación sigue una arquitectura cliente-servidor. El cliente gestiona las interacciones del usuario a través de HTML y JavaScript, incluida la introducción de números de teléfono y el envío de códigos de verificación. Firebase Hosting sirve la aplicación web, Firebase Functions gestiona la lógica del lado del servidor y Firestore almacena los datos del usuario y el estado de la verificación.
Anteriormente, la aplicación Express gestionaba las rutas y las llamadas a la API directamente en un entorno de servidor. Usando Firebase Cloud Functions, cada endpoint previamente definido en la app Express es mapeado a una función cloud específica reescribiendo las reglas en el archivo firebase.json en el archivo firebase.json. Esta configuración desacopla el mecanismo de enrutamiento de la lógica de la aplicación, permitiendo que cada función sea escalada y gestionada de forma independiente. Firebase gestiona automáticamente las solicitudes entrantes y las dirige a la función en la nube apropiada basándose en las reglas de reescritura, tales como enviarcódigo a sendCode o /inicio de sesión a iniciar sesión. Dado que el cliente web reside ahora en un dominio diferente del servidor, también estamos utilizando CORS (Cross-Origin Resource Sharing).
Puedes trabajar en este proyecto utilizando tu editor de código favorito. En mi caso, he utilizado Visual Studio Code, y Firebase Studio soporta proyectos Firebase, por lo que es fácil desarrollar allí. ¡Elige el editor que más te guste!
Puede empezar clonando el repositorio de GitHub.
Instale las dependencias necesarias:
npm install.
A continuación se muestran los pasos para configurar el proyecto; puedes puede crear un proyecto Firebase desde la consola Firebase o usando la línea de comandos. Los servicios de Firebase que usaremos son funciones, hosting y Firestore.
En la consola, haz clic para crear un nuevo proyecto, dale un nombre y haz clic en continuar.
Seleccione si va a utilizar análisis.
Espere a que se cree el proyecto.
Establece el tipo de facturación en el engranaje ⚙ -> Uso y facturación -> Detalles y configuración a Blaze (el plan de pago por uso debe utilizar una API de terceros).
Establezca la ubicación de los recursos de Google Cloud en ⚙ -> Configuración del proyecto.
Establezcamos los objetivos de despliegue. Cree un archivo .firebaserc en la carpeta de tu proyecto y actualiza 'PROJECT_ID' con el ID de tu proyecto. Hay un .firebaserc.example que indica dónde encontrarlo en la carpeta.
// .firebaserc
{
"projects": {
"default": "PROJECT_ID"
}
}
Es hora de añadir las variables de entorno a tu proyecto.
Del archivo /funciones/.env.ejemplo puede crear el archivo /functions/.env e incluir las siguientes variables de entorno:
# .env
VONAGE_API_KEY=your_api_key VONAGE_API_SECRET=your_api_secret VONAGE_APPLICATION_ID=your_application_id VONAGE_APPLICATION_PRIVATE_KEY=/path/to/your/private.key
PERIOD=72
Nota: El Gestor de Secretos es una forma segura de importar variables de entorno. Este tutorial utiliza dotenv, ya que Cloud Functions para Firebase soporta dotenv.
Para realizar pruebas locales, puede utilizar Firebase Local Emulator Suite.
Inicializar los emuladores
firebase init emulators.Iniciar los emuladores
firebase emulators:start.Encontrará la URL para abrir la aplicación web local y la instancia de Firestore en la línea de comandos. Abra ambas páginas y rellene la instancia de Firestore. Recuerda que esta es tu instancia local de Firestore. Por lo tanto, diferirá de la que puedes encontrar en el proyecto real en la consola en la nube.
Nota: Para este proyecto, los he incluido en el archivo
firebase.jsonpara que puedas encontrar tu emulador en el puerto 5001 y Firestore en el puerto 8080.
Despliegue sus archivos estáticos (HTML, CSS, JavaScript) en Firebase Hosting. Asegúrese de que tiene el Firebase CLI instalado e inicializado en su proyecto. Ejecute el siguiente comando para desplegar:
firebase deploy --only hosting
Puede ver que se generará una página HTML para usted en la línea de comandos. En mi ejemplo, mi ID de proyecto es ' account-recovery-demo', y mi URL generada es 'https://account-recovery-demo.web.app'. Adelante, abra la suya.
Despliega tu lógica del lado del servidor usando Firebase Functions. Asegúrese de que tiene el Firebase CLI instalado e inicializado en su proyecto. Ejecute el siguiente comando para desplegar:
firebase deploy --only functions
Si vas a la pestaña 'funciones' de tu consola Firebase puedes ver las cuatro funciones: sendCode, login, verify y simSwap. Si necesita comprobar el versionado y los registros, puede hacerlo para cada una de las funciones creadas.
Utiliza Firestore para almacenar los datos de usuario y el estado de verificación. Crea una colección "credenciales" y rellena los campos de Firestore con los nodos de credenciales.
Crea cada nodo de evento que contenga los siguientes campos de tipo cadena: contraseña, número de teléfono, request_id y nombre de usuario. Hemos almacenado estos campos sensibles en el Firestore para esta aplicación de ejemplo. Idealmente, en una aplicación real, estos deberían ser asegurados mejor usando, por ejemplo, Gestor de secretos.
Cloud Firestore Database Instance
Es hora de ir a la aplicación web que has desplegado utilizando el alojamiento Firebase.
El flujo de trabajo de la prueba debería ser el siguiente: imagine que ha olvidado su contraseña. Haz clic en "He olvidado la contraseña" para iniciar la recuperación. Se te pedirá que introduzcas tu número de teléfono y solicites la verificación.
Si la aplicación detecta un cambio reciente de SIM, aparece una advertencia: ¡Advertencia! Se ha producido un cambio reciente de emparejamiento de SIM relacionado con la Account móvil del Usuario. ¿Proceder?" Si no has sido tú quien ha realizado el cambio y eliges "No, no he sido yo", es señal de que puede haber fraude con tu número. Esta es la señal para que te pongas en contacto con tu proveedor de telefonía móvil.
Nota: en la demostración del tutorial, se le pide que confirme que ha cambiado la tarjeta SIM; en un escenario real, probablemente se invitaría al usuario a ponerse en contacto directamente con el proveedor de servicios para realizar comprobaciones de identidad adicionales. De forma similar, este enfoque podría aplicarse a la autenticación multifactor en el inicio de sesión, donde se realizaría una comprobación antes de enviar el token de un solo uso. Si se detecta un cambio reciente de SIM, el usuario puede ponerse en contacto directamente con el proveedor de servicios para realizar comprobaciones de identidad adicionales.
Por otro lado, si cambias tu SIM y seleccionas 'Sí, era yo'la aplicación utiliza Verify API para enviar un código de verificación a tu teléfono. Introduce este código en la siguiente pantalla y establece una nueva contraseña. Una vez hecho esto, puedes utilizar tus nuevas credenciales para acceder a tu cuenta bancaria simulada.
Has llegado al final de este tutorial. Hoy has visto cómo mejorar tu aplicación multifactor añadiendo Firebase Services a tu aplicación web.
¿Tienes alguna pregunta o algo que compartir? Únete a la conversación en Slack de la comunidad de Vonagey mantente actualizado con el Boletín para desarrolladoressíguenos en X (antes Twitter)suscríbete a nuestro canal de YouTube para ver tutoriales en video, y sigue la página de página para desarrolladores de Vonage en LinkedInun espacio para que los desarrolladores aprendan y se conecten con la comunidad. Mantente conectado, comparte tu progreso y entérate de las últimas noticias, consejos y eventos para desarrolladores.