https://s3.amazonaws.com/a.storyblok.com/f/270183/27753/abaf6ee28e/firebase_sms_1200x600.png

FirebaseファンクションでSMSを送受信する方法(チュートリアル)

最終更新日 October 31, 2023

所要時間:8 分

この記事は2025年10月に更新されました。

Firebaseプラットフォームにより、開発者はアプリケーションのバックエンドを迅速に構築できる。使い心地も良い。このチュートリアルでは、Firebaseを使ってSMSメッセージングを始めたいと思います。 Vonage.以下では、Firebaseを使ってSMSメッセージを受信・送信する方法を紹介する。これらのステップを終えると、SMSメッセージのログと送信者への返信を作成できるようになります。 Firebaseクラウドファンクションと Realtime Database を使って、Vonage SMS API と共に SMS メッセージのログと送信者へのレスポンスを作成できるようになります。

このブログ記事はFirebase Gen 1を使用しています; Firebase Gen 2のCloud Functionsを使ってSMSメッセージを送信する方法はこちらもご覧ください。

完全なコードは GitHub.

このチュートリアルはビデオでもご覧いただけます:

始める前に

始めるにはいくつかのアイテムが必要である。

このチュートリアルには3つの主要なセクションがある:

  • まず、プロジェクトにFirebaseをセットアップする方法を紹介します。

  • 次に、FirebaseでSMSメッセージを受信する関数の作り方を紹介します。

  • 最後に、FirebaseでSMSメッセージを送信する関数の作り方を説明します。

Firebaseの設定

最初のステップは、Firebaseプロジェクトをセットアップすることです。以下では、Firebase コンソールを使って新しいプロジェクトをセットアップする方法を紹介します。

Firebaseプロジェクトの作成

  1. Firebaseコンソール Firebaseコンソール

  2. Add Projectをクリックし、プロジェクト名を追加し、Continueをクリックする。

The view on how to create a project, you have the option to enter a project name, edit the project id and click continueCreate a Project

  1. このプロジェクトではGoogle Analyticsは使用しませんが、気に入った場合は自由に追加してください。

Configuring Google AnalyticsAdd analytics

3.プロジェクトが作成されるまで少し待つ。

4.課金タイプを次の項目で設定します。 ⚙️ -> 使用量と請求 -> 詳細と設定をBlazeに設定します。サードパーティAPIを使用するには、従量課金プランが必要です。 Googleでの課金に関する詳細はこちら。

  1. Dialog to select a Firebase Pricing PlanChange Billing

  2. を設定する。 Google Cloud Platform (GCP) resource location⚙️ -> Project Settings.

    Setting a resource location in the resource location dialogUpdate Location

Firebaseツールのインストール

Firebaseで行う必要のあるほとんどのことは、Firebaseが提供するツールセットを使ってコマンドラインから直接行うことができる。

  1. Firebaseツールをnpmでインストールします。

npm install -g firebase-tools
  1. を使用してFirebaseにログインします。 firebase login.ログインプロセスでは、認証のためにブラウザが開きます。

ローカル環境の設定

Firebase用のCloud Functionsを書くには、初期化作業が必要ですが、Firebase Toolsのコマンドを使うことでほとんど完了します。

  1. プロジェクトフォルダの作成 mkdir vonage-project && cd vonage-project.

  2. Firebase用クラウドファンクションの初期化 firebase init functions.

######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

 /your_folders/your-project-name


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now, we'll just set up a default project.

? Please select an option: (Use arrow keys)
❯ Use an existing project
 Create a new project
 Add Firebase to an existing Google Cloud Platform project
 Don't set up a default project

ダッシュボードですでにプロジェクトを作成しているので、「プロジェクト」を選択します。 Use an existing projectを選択すると、希望するプロジェクトを選択するプロンプトが表示されます。まだ作成していない場合は Create a new projectを使い、ユニークな名前をつけてプロジェクトを作成してください。コンソールで場所と課金を更新する必要はありますが、Firebase プロジェクトを作成するもう一つの方法です。

  1. 作成したプロジェクト名を選択します。

  2. JavaScriptを選択する。

  3. お望みならESLintはYを選んでください(私はYをお勧めします)。

  4. すべての依存関係をインストールします。

これらの手順により、Firebase Functions のビルドに必要なフォルダとファイルが作成され、すべての依存関係がインストールされます。NPM が完了したら functionsディレクトリに移動し index.jsを好きなエディタで開き、コードの追加を開始します。

SMSメッセージを受信するFirebase関数を作成する

最初に作成する関数は、Vonageからの着信SMSメッセージをキャプチャしてログに記録するためのWebhookとして動作します。この関数により、Firebase経由でSMSテキストメッセージを受信できるようになります。

この index.jsファイルには必要のないコード例があります。すべてを削除し、一番上から以下のコードを追加してください:

const functions = require("firebase-functions/v1");

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

const serviceAccount = require("./serviceAccountKey.json");

// Initialize Firebase app for database access
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://name_of_the_database.europe-west1.firebasedatabase.app",
});

呼び出し admin.initializeApp();を呼び出すと、Firebase Real-Time データベースへの読み書きができるようになります。

また サービスアカウントを追加する必要があります。 databaseURLを追加する必要があります。

次に、以下の方法で関数を作成する。

// This function will serve as the webhook for incoming SMS messages,
// and will log the message into the Firebase Realtime Database
exports.inboundSMS = functions.https.onRequest(async (req, res) => {
  let params;
  if (Object.keys(req.query).length === 0) {
    params = req.body;
  } else {
    params = req.query;
  }
  await admin.database().ref('/msgq').push(params);
  res.sendStatus(200);
});

この inboundSMSメソッドは HTTPS リクエストをリッスンします - これはまさに Vonage webhook が必要とするものです。Firebase Function は req.bodyの場合は POST Methodの場合は req.queryの場合は GET Method.それをログとして /msgqオブジェクトにログとして送られる。

コードを書いたら、ファイルを保存してFirebaseに関数をデプロイしてください:

firebase deploy --only functions

=== Deploying to 'vonage-project'...

i deploying functions
Running command: npm --prefix "$RESOURCE_DIR""

> functions@ lint /Users/kellyjandrews/Google Drive/Apps/vonage-project/functions
> eslint .

✔ functions: Finished running predeploy script.
i functions: ensuring necessary APIs are enabled...
✔ functions: all necessary APIs are enabled
i functions: preparing functions directory for uploading...
i functions: packaged functions (38.78 KB) for uploading
✔ functions: functions folder uploaded successfully
i functions: creating Node.js 18 function inboundSMS(us-central1)...
✔ functions[inboundSMS(us-central1)]: Successful create operation.
Function URL (inboundSMS): https://us-central1-vonage-project.cloudfunctions.net/inboundSMS

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/vonage-project/overview

アウトプットの重要な部分は Function URL (inboundSMS).このURLはVonageでウェブフックをセットアップするために必要です。

Vonageダッシュボードの設定から Vonageダッシュボードの設定を使用していることを確認します。 SMS APIを使用していることを確認します。を選択し postを選択し、端末コンソールから出力Function URL(受信SMS)をコピーし、VonageのWebhookに貼り付けます。

SettingsVonage Dashboard Settings携帯電話を持って、電話番号にメッセージを送る。Firebaseコンソールを開き、次のページに移動する。 databaseページに移動すると、このように表示されるはずです:

Making a Vonage database entry in real-timeReal-time Database Vonage Message Entry

着信メッセージをログに記録する方法ができたので、着信メッセージに対して何かをする関数を書くことができる。

SMSメッセージを送信するFirebase関数を作成する

ここまでで、Vonageの電話番号にリンクしたFirebase Functionを作成し、受信SMSメッセージを取得することができました。Firebase Functionはデータベースの更新にも反応します。新しい入力があると、コードは元のテキストのエコーを送信します。

以下では、FirebaseでSMSを送信する関数を作成する方法を紹介します。

依存関係リストにVonageを追加することから始めよう。 functionsディレクトリに追加してください:

npm i @vonage/server-sdk --save

次に、依存関係リストにdotenvを追加する。

npm i dotenv --save

ファイルを作成し .envファイルを作成し、環境変数を functionsディレクトリに追加する:

VONAGE_API_KEY= VONAGE_API_SECRET=

dot envを使うか、Firebaseの設定に以下の環境変数を追加します:

firebase functions:config:set vonage.api_key="YOUR_KEY" vonage.api_secret="YOUR_SECRET"

API設定ページを開く API設定ページを開き、Vonage API KeyとSecretにアクセスしてください。両者は以下のスクリーンショットのように表示されます。APIキーはページの上部にあり、APIシークレットにアクセスするには、"Account secret "サブセクションを参照してください。

注:以前に作成したAPIシークレットを覚えていない場合は、"+ Create new secret "をクリックし、安全に保存してください。

次に index.js追加 @vonage/server-sdkを開き、Vonageを初期化するための環境変数をインポートする:

require("dotenv").config();

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

const serviceAccount = require("./serviceAccountKey.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://name_of_the_database.region.firebasedatabase.app",
});

// If you are using .env
const vonage = new Vonage({
  apiKey: process.env.VONAGE_API_KEY,
  apiSecret: process.env.VONAGE_API_SECRET,
});

// If you are using the Firebase Environment Variables
const {
  api_key,
  api_secret
} = functions.config().vonage;

これで、Firebaseがレスポンスを送信するための新しい関数を作成できます:

// This function listens for updates to the Firebase Realtime Database
// and sends a message back to the original sender
exports.sendSMS = functions.database
  .ref("/msgq/{pushId}")
  .onCreate(async (message) => {
    const { msisdn, text, to } = message.val();

    const resultSnapshot = await message.ref.parent
      .child("result")
      .once("value");
    if (resultSnapshot.exists()) {
      console.log("Result already exists. Exiting function.");
      return;
    }

    try {
      const responseData = await vonage.sms.send({
        to: to,
        from: msisdn,
        text: `You sent the following text: ${text}`,
      });

      if (responseData.messages && responseData.messages[0].status === "0") {
        const result = `You sent the following text: 
 ${responseData.messages[0]["message-id"]}`;
        await message.ref.parent.child("result").set(result);
        console.log(result);
        return result;
      } else {
        const errorText =
          (responseData.messages && responseData.messages[0]["error-text"]) ||
          "Unknown error";
        const errorMessage = `Message failed with error: ${errorText}`;
        console.error(errorMessage);
        return errorMessage;
      }
    } catch (err) {
      console.error("Vonage error:", err);
      return `Vonage error: ${err.message}`;
    }
  });

新しい関数は、データベース・オブジェクトに追加された新しいメッセージを監視する。 /msgqデータベースオブジェクトに追加された新しいメッセージを監視します。トリガーされると、完全なVonageオブジェクトが message.このオブジェクトには msisdnを含んでいます。 to番号、これはあなたが購入したVonageバーチャル番号です。

電話番号とテキストメッセージが手に入れば、あとはいろいろなことができる。キーワードに基づいた特定のデータで応答するルックアップテーブルを作成したり、別のシステムに転送したり、あるいは今回のケースでは、オリジナルのメッセージを送信したりすることができる。

Firebase Functionsをコマンドラインから再度デプロイします:

firebase deploy --only functions

携帯電話を持って、もう一度メッセージを送ると、次のような返事が返ってくるはずだ。 You sent the following text: A text message sent using the Vonage SMS API.

まとめ

これでこのチュートリアルのすべてのステップが完了しました。完全なコードは を GitHub.

メッセージを送受信する最初のステップは完了したので、次の数記事ではこのコンセプトを発展させ、ホームオートメーションのいくつかをテキストメッセージでコントロールすることにする。

ご質問がある場合、またはあなたが作っているものを共有したい場合は、こちらをクリックしてください。

最新の開発者向けニュース、ヒント、イベント情報をお届けします。

さらに読む

シェア:

https://a.storyblok.com/f/270183/384x384/444c073b5e/kellyjandrews.png
Kelly J Andrews元チームメンバー

ケリー・J・アンドリュースはネクスモの開発者支持者であり、5歳で初めてBASICを使い、30年以上コンピュータをいじってきた。

1997年に初めてウェブページを作り、初めてJavaScriptを試してみて初めて、彼は真の天職を見つけた。ケリーは今、JavaScript、テスト可能なコード、そして迅速なデリバリーのために戦っている。

カラオケを歌ったり、マジックを披露したり、カブスやファイティング・アイリッシュを応援したり。