https://a.storyblok.com/f/270183/61175/afaa4f909d/sms-cloud-functions-firebase-gen2.png

Enviar mensajes SMS con funciones en la nube para Firebase Gen 2

Publicado el March 19, 2024

Tiempo de lectura: 10 minutos

Visión general

Tenemos un tutorial sobre Cómo enviar y recibir SMS con funciones Firebaseesta entrada del blog aborda el mismo caso de uso. Sin embargo, crearemos e implementaremos una función HTTP de segunda generación utilizando la consola de Google Cloud y la Mensajes API de Vonage en lugar de la SMS API.

Configurar

Necesitarás unos cuantos artículos para ponerte en marcha:

Configuración de Firebase

Crear un proyecto Firebase en la consola Firebase.

Dale a tu proyecto un nombre que generará un ID de proyecto que más tarde elegirás desde el terminal/símbolo del sistema.

project creationproject creation

Si utiliza Google Analytics, no realizaré este proyecto.

Google AnalyticsGoogle Analytics

Wait for project creationWait for project creation

Nota: Recuerde elegir el plan de facturación de pago por uso; de lo contrario, podría obtener un error similar a "Error: Tu proyecto <nombre_del_proyecto> debe estar en el plan Blaze (pago por uso) para completar este comando. La API requerida artifactregistry.googleapis.com no puede habilitarse hasta que se complete la actualización".

Instale Firebase CLI desde el símbolo del sistema/terminal:

npm install -g firebase-tools

Inicie sesión e inicialice su proyecto desde el símbolo del sistema/terminal:

firebase login firebase init

Se le pedirá que seleccione diversas opciones, como se ve a continuación.

? ¿Qué funciones de Firebase desea configurar para este directorio? Pulse la barra espaciadora para seleccionar las características y, a continuación, Intro para confirmar sus opciones. Base de datos en tiempo real: Configure un archivo de reglas de seguridad para Realtime Database y (opcionalmente) proporcione una instancia predeterminada, Funciones: Configurar un directorio Cloud Functions y sus archivos

? Seleccione una opción: Utilizar un proyecto existente ? Seleccione un proyecto Firebase por defecto para este directorio: vonage-sms-project (vonage-sms-project) (Seleccione aquí el nombre del proyecto que ha creado. En mi caso, es vonage-sms-project (vonage-sms-proyecto)

? Parece que aún no has inicializado Realtime Database en tu proyecto. ¿Quieres inicializarla? (S/N) Seleccione Y

? Elija la ubicación de su instancia de base de datos en tiempo real predeterminada:

us-central1

❯ europa-oeste1

asia-sudeste1

En mi caso, Europe-west1 es el más cercano; elige el que te resulte más lógico.

? ¿Qué archivo se debe utilizar para las reglas de seguridad de la base de datos en tiempo real? (database.rules.json)

? ¿Qué lenguaje le gustaría utilizar para escribir Funciones Cloud? (Utilice las teclas de flecha)

❯ JavaScript (Elija JavaScript)

TypeScript

Python

? ¿Desea utilizar ESLint para detectar errores probables y aplicar el estilo? (sí/no)

? ¿Desea instalar dependencias con npm ahora? (S/N) ElijaSí. Y espere a que se instalen las dependencias.

Esto configurará las carpetas y archivos necesarios para empezar.

Habilitar las API de Google Cloud

Desde Google Cloud Console, habilita las API Cloud Functions, Cloud Build, Artifact Registry, Cloud Run, Logging y Pub/Sub..

Primera función: InboundSMS

Te mostraré cómo crear y desplegar la función desde el IDE/editor de código. Como alternativa, puede crear funciones desde el panel de Google Cloud Functions.

Abrir functions/index.jsborra todo el código que puedas ver y añade el siguiente código para capturar los mensajes SMS entrantes y registrarlos en la base de datos Firebase Realtime.

const { onRequest } = require("firebase-functions/v2/https");

const admin = require("firebase-admin");

admin.initializeApp();

exports.inboundSMS = onRequest(async (request, response) => {
  params = request.body;
  await admin.database().ref("/msgq").push(params);
  response.sendStatus(200);
});

Despliegue la función desde la carpeta functions.

firebase deploy --only functions

Después de implementar la función, recibirás una URL HTTP necesaria para agregar a nuestro webhook en la configuración de Vonage en la próxima sesión. Debería ser algo parecido a https://us-central1-vonage-project.cloudfunctions.net/inboundSMSo https://inboundsms-njjebckulq-uc.a.run.app.

Nota: Anótalo porque lo necesitaremos pronto. En caso de que no lo hayas anotado, puedes ir a la página de página de descripción general de Google Cloud Functionshaz clic en la función inboundSMS y encontrarás la URL justo en la parte superior.

You can find the URL right at the top.function URL

Configuración de Vonage

Desde el panel de Vonage, establece la URL del webhook para tu número en la URL del punto final de la función desde la implementación. Debería ser algo similar a https://us-central1-vonage-project.cloudfunctions.net/inboundSMS o https://inboundsms-njjebckulq-uc.a.run.app.

Inbound SMS URL added to inbound and statusMessage capabilities webhook

Instala el SDK de servidor de Vonage para Node.js (@vonage/server-sdk).

npm install @vonage/server-sdk

A continuación, añade dotenv a la lista de dependencias.

npm install dotenv --save

Agrega un archivo llamado .env con tus credenciales de Vonage, que puedes encontrar en el Panel de Vonagey agrega las siguientes variables de entorno:

Vonage Dashboard, red arrows showing where to find the API Key and the API Secret.Vonage Dashboard: API Key and API Secret

VONAGE_API_KEY= VONAGE_API_SECRET= VONAGE_APPLICATION_ID= VONAGE_PRIVATE_KEY=

Añade Vonage a tu functions/index.js archivo.

const { Vonage } = require("@vonage/server-sdk");

const vonage = new Vonage({
  apiKey: VONAGE_API_KEY,
  apiSecret: VONAGE_API_SECRET,
  applicationId: VONAGE_APPLICATION_ID,
  privateKey: VONAGE_PRIVATE_KEY
});

Asegúrate de que hay un número de teléfono vinculado a esta aplicación.

Envía un SMS al número de teléfono virtual que compraste y vinculaste a esta aplicación.

Si te diriges a tu base de datos Firebase Realtime en el dashboard, podrás ver que el msgq se ha actualizado con el mensaje que enviaste desde tu teléfono.

Segunda función: EnviarSMS

Agrega la función send que nos permitirá enviar el mensaje SMS usando la API de Messages de Vonage que será registrado en la base de datos Firebase Realtime.

const { SMS } = require("@vonage/messages");

const { onValueCreated } = require("firebase-functions/v2/database"); 

exports.sendSMS = onValueCreated("/msgq/{pushId}", async (message) => {
  const { from, text } = message.data.val();

  vonage.messages
    .send(
      new SMS({
        text: text,
        to: from,
        from: "Vonage APIs",
      })
    )
    .then((resp) => console.log(resp))
    .catch((err) => console.error(err));
});

Vuelva a desplegar las funciones desde la carpeta functions.

firebase deploy --only functions

Envía un SMS al número de teléfono virtual que compraste y vinculaste a esta aplicación.

Si te diriges a tu base de datos Firebase Realtime en el dashboard, podrás ver que el msgq se ha actualizado con el mensaje que enviaste desde tu teléfono.

Cuando se añada un nuevo mensaje a /msgqse activará esta función. Utilizará la API Messages API de Vonage para responder al usuario. Los mensajes enviados y enviados se registrarán en nuestra base de datos Firebase Realtime.

Nota: Si recibe un mensaje de error "Error: secretOrPrivateKey debe ser una clave asimétrica cuando se utiliza ES256" asegúrese de que su clave privada es válida y correcta y se está importando correctamente.

Pruébelo

Una vez implementada, pruébala enviando un mensaje SMS al número vinculado a la aplicación de Vonage y verás el mensaje agregado a la base de datos de Firebase Realtime.

Realtime database containing three nodes under msgqFirebase Real Time Database

Conclusión

Ahora puedes enviar y recibir mensajes SMS usando Firebase Cloud Functions Gen 2 y la API Messages API de Vonage. Ya has completado todos los pasos de este tutorial. Puedes ver el código completo en GitHub.

¿Tiene alguna pregunta sobre esta entrada del blog? Únete a nuestra Slack de la comunidad de Vonage o envíanos un mensaje en X.

Compartir:

https://a.storyblok.com/f/270183/400x400/3f6b0c045f/amanda-cavallaro.png
Amanda CavallaroDefensor del Desarrollador