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

Envie mensagens SMS com o Cloud Functions para Firebase Gen 2

Publicado em March 19, 2024

Tempo de leitura: 10 minutos

Visão geral

Temos um tutorial sobre Como enviar e receber SMS com o Firebase Functions; esta postagem do blog aborda o mesmo caso de uso. No entanto, vamos criar e implantar uma função HTTP de segunda geração usando o console do Google Cloud e a Messages API for Vonage , em vez da SMS API.

Configuração

Você vai precisar de alguns itens para começar:

Configuração do Firebase

Crie um projeto do Firebase no console do Firebase.

Dê ao seu projeto um nome que gere um ID de projeto, o qual você poderá selecionar posteriormente no terminal/linha de comando.

project creationproject creation

Se você usar o Google Analytics, não vou realizar esse projeto.

Google AnalyticsGoogle Analytics

Wait for project creationWait for project creation

Observação: Lembre-se de escolher o plano de cobrança pré-pago; caso contrário, você poderá receber uma mensagem de erro semelhante a “Erro: Seu projeto <nome_do_projeto> deve estar no plano Blaze (pré-pago) para concluir este comando. O artefato de API necessário, artifactregistry.googleapis.com, não pode ser ativado até que a atualização seja concluída.”

Instale a CLI do Firebase a partir do prompt de comando/terminal:

npm install -g firebase-tools

Faça login e inicialize seu projeto no prompt de comando/terminal:

firebase login firebase init

Será solicitado que você selecione diversas opções, conforme mostrado abaixo.

? Quais recursos do Firebase você deseja configurar para este diretório? Pressione a barra de espaço para selecionar os recursos e, em seguida, Enter para confirmar suas escolhas. Banco de Dados em Tempo Real: Configure um arquivo de regras de segurança para o Banco de Dados em Tempo Real e (opcionalmente) provisionar uma instância padrão; Funções: Configure um diretório do Cloud Functions e seus arquivos

? Selecione uma opção: Usar um projeto existente ? Selecione um projeto padrão do Firebase para este diretório: vonage-sms-project (vonage-sms-project) (Selecione aqui o nome do projeto que você criou. No meu caso, é vonage-sms-project (vonage-sms-project))

? Parece que você ainda não inicializou o Realtime Database no seu projeto. Deseja configurá-lo? (S/n) Escolha S

? Escolha o local para sua instância padrão do Realtime Database:

us-central1

❯ europa-oeste1

asia-southeast1

No meu caso, o “Europe-west1” é o mais próximo de mim; escolha aquele que fizer mais sentido para você.

? Qual arquivo deve ser usado para as regras de segurança do Realtime Database? (database.rules.json)

? Qual linguagem você gostaria de usar para escrever funções no Cloud Functions? (Use as setas do teclado)

❯ JavaScript (Escolha JavaScript)

TypeScript

Python

? Você quer usar o ESLint para detectar possíveis erros e garantir a conformidade com as normas de estilo? (s/N)

? Deseja instalar as dependências com o npm agora? (S/n) Escolha Sim. E aguarde até que as dependências sejam instaladas.

Isso criará as pastas e os arquivos necessários para você começar.

Ativar as APIs do Google Cloud

No Google Cloud Console, ative as APIs do Cloud Functions, Cloud Build, Artifact Registry, Cloud Run, Logging e Pub/Sub.

Primeira função: InboundSMS

Vou mostrar como criar e implantar a função a partir do IDE/editor de código. Como alternativa, você pode criar funções a partir do painel do Google Cloud Functions.

Abrir functions/index.js, apague todo o código que estiver visível e adicione o código a seguir para capturar as mensagens SMS recebidas e registrá-las no Firebase Realtime Database.

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);
});

Implemente a função a partir da pasta “functions”.

firebase deploy --only functions

Após a implantação da função, você receberá uma URL HTTP necessária para adicionar ao nosso webhook na configuração do Vonage na próxima sessão. Ela deve ter um formato semelhante a https://us-central1-vonage-project.cloudfunctions.net/inboundSMS; ou https://inboundsms-njjebckulq-uc.a.run.app.

Observação: Anote isso, pois vamos precisar em breve. Caso você não tenha anotado, pode acessar a página de visão geral do Google Cloud Functions, clicar na função inboundSMS e encontrar a URL bem no topo.

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

Configuração do Vonage

No Painel da Vonage, configure a URL do webhook para seu número para a URL do endpoint da função da implantação. Ela deve ter um formato semelhante a este: https://us-central1-vonage-project.cloudfunctions.net/inboundSMS ou https://inboundsms-njjebckulq-uc.a.run.app.

Inbound SMS URL added to inbound and statusMessage capabilities webhook

Instale o SDK do servidor Vonage para Node.js (@vonage/server-sdk).

npm install @vonage/server-sdk

Em seguida, adicione o dotenv à lista de dependências.

npm install dotenv --save

Adicione um arquivo chamado .env com suas credenciais da Vonage, que podem ser encontradas no Painel do Vonage, e adicione as seguintes variáveis de ambiente:

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=

Adicione a Vonage ao seu functions/index.js arquivo.

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
});

Certifique-se de que haja um número de telefone vinculado a este aplicativo.

Envie um SMS para o número de telefone virtual que você comprou e vinculou a este aplicativo.

Se você acessar seu banco de dados Firebase Realtime no painel, poderá ver que o msgq nó foi atualizado com a mensagem que você enviou do seu celular.

Segunda função: SendSMS

Adicione a função de envio que nos permitirá enviar a mensagem SMS usando a Messages API do Vonage , que será registrada no banco de dados 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));
});

Implemente as funções novamente a partir da pasta “functions”.

firebase deploy --only functions

Envie um SMS para o número de telefone virtual que você comprou e vinculou a este aplicativo.

Se você acessar seu banco de dados Firebase Realtime no painel, poderá ver que o msgq nó foi atualizado com a mensagem que você enviou do seu celular.

Quando uma nova mensagem é adicionada a /msgq, essa função será acionada. Ela utilizará a Messages API da Vonage para responder ao usuário. As mensagens enviadas e registradas serão registradas em nosso banco de dados Firebase Realtime.

Observação: Se você receber a mensagem de erro “Erro: secretOrPrivateKey deve ser uma chave assimétrica ao usar ES256”, certifique-se de que sua chave privada seja válida e correta e de que esteja sendo importada corretamente.

Experimente

Após a implantação, teste o sistema enviando uma mensagem SMS para o número vinculado ao aplicativo da Vonage; você verá a mensagem ser adicionada ao banco de dados Firebase Realtime.

Realtime database containing three nodes under msgqFirebase Real Time Database

Conclusão

Agora, você pode enviar e receber mensagens SMS usando o Firebase Cloud Functions Gen 2 e a Messages API do Vonage! Você concluiu todas as etapas deste tutorial. Você pode ver o código completo no GitHub.

Você tem alguma dúvida sobre esta postagem do blog? Participe da nossa Slack da Comunidade Vonage ou envie uma mensagem para a gente no X.

Compartilhar:

https://a.storyblok.com/f/270183/400x400/3f6b0c045f/amanda-cavallaro.png
Amanda CavallaroRepresentante de Desenvolvedores