){kind=small}
Node.jsでWhatsAppメッセージを送信する方法（チュートリアル）
所要時間：1 分
このチュートリアルでは、Vonage APIを使用してメッセージを送受信するアプリケーションの作成方法について説明します。 Messages APIを使用してメッセージを送受信するアプリケーションを作成する方法を学びます。 Vonage Node SDKそして WhatsApp Sandbox. このプロジェクトのGitHubリポジトリコードはこちらです。.
Node.jsでWhatsAppメッセージの送信を開始するには、以下の前提条件が必要です：
Vonage API Account 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.
オプション WhatsApp ビジネスアカウント追加機能
以下の手順は、ダッシュボードから新しいVonageアプリケーションを作成する方法を示しています。または CLIを使用してアプリケーションを作成することもできます。.
次へ お客様のアプリケーションをクリックし、新しいアプリケーションを作成します。
API認証用の公開鍵と秘密鍵のペアを作成します。公開鍵と秘密鍵の生成」をクリックして秘密鍵を取得します。ブラウザで設定したダウンロードファイルの場所にファイルがダウンロードされます。そのファイルをプロジェクト・フォルダーに追加してください。
もしまだngrokを使ったことがないのなら、 ここから始められる.画像の下にインスタンスを実行する手順を追加した。
以下のコマンドを実行して、ngrokトンネリング・インスタンスを開始する。
ngrok http 8000出力
ngrok (Ctrl+C to quit)
👋 Goodbye tunnels, hello Agent Endpoints: https://ngrok.com/r/aep
Session Status online
Account plan name
Version 3.19.1
Region Europe (eu)
Latency 31ms
Web Interface http://127.0.0.1:4040
Forwarding https://xyz.ngrok.app -> http://localhost:8000
Connections ttl opn rt1 rt5 p50 p90
14 0 0.03 0.03 6.10 7.79
Vonage API Dashboardに戻って、Appsの下の メッセージオプションを切り替えて、受信メッセージとイベントのエンドポイントとしてngrokからサーバーの公開URLを設定します。https://xyz.ngrok.com/inbound は受信用、https://xyz.ngrok.com/status はステータス用です。 ウェブフックについて Webhooksについてもっと知りたい方は、Vonageのドキュメントをご覧ください。.
Messages capability
私たちは WhatsAppサンドボックス を使用します。このチュートリアルでは ビジネスアカウントを使用することができます。WhatsApp以外にもViber、Facebook Messenger、Instagram等と統合することができます。
次のページに移動します。 Vonage Messages API Sandboxページそして Messages API WhatsApp Sandbox を設定します。.
ngrok が生成した URL をアプリケーションに追加して メッセージAPIサンドボックスに追加する。 /webhooks/inbound-messageそして /webhooks/message-status,をそれぞれ追加し、'Save webhooks' をクリックする。
Webhooks
を作成し、必要な環境変数を追加しなければならない。 .env fileを作成し、必要な環境変数を追加しなければならない。以前にもいくつか生成したことがあるが、それぞれの変数の場所を説明しよう。
# Vonage API keys
VONAGE_APPLICATION_ID=
VONAGE_PRIVATE_KEY=
VONAGE_WHATSAPP_NUMBER=
VONAGE_API_SIGNATURE_SECRET=
# Server port (optional; default is 8000)
PORT=8000は VONAGE_WHATSAPP_NUMBERは メッセージサンドボックスページ。これはWhatsAppメッセージの送信先番号です。サンドボックステストでは14157386102となります。
その VONAGE_APPLICATION_IDは、作成したアプリケーション内で見つけることができます。
Application id
その VONAGE_PRIVATE_KEYへのパスです。 private.keyファイルへのパスです。
VONAGE_API_SIGNATURE_SECRETは、JWTクレームに含まれるapi_keyに関連付けられた署名秘密に対応するリクエストに署名するために使用される秘密です。署名の秘密は ダッシュボードの設定.
> 注：電話番号を入力する際は、先頭に+や00を付けず、次のように国番号から入力してください。 16600700000
ポート番号はエクスプレス・サーバーで使用するポート番号です。私は8000に設定しましたが、自由に変更してください。
私たちは ボンテージ・サーバーSDK, Node.js用VonageメッセージSDK, Node.js 用 Vonage JWT SDK, エクスプレスおよび Dotenv.これらをこのコマンドでインストールする：
npm install @vonage/server-sdk @vonage/messages @vonage/jwt express dotenv
ファイルを作成する server.jsファイルを作成する。
このプロジェクトで使用するパッケージを要求し、初期化する。
// src/server.js
require("dotenv").config();
const express = require("express");
const { Vonage } = require("@vonage/server-sdk");
const { WhatsAppText } = require("@vonage/messages");
const { verifySignature } = require("@vonage/jwt");
const app = express();
app.use(express.json());process.envから読み込まれる値は、あなたが以前 .env file.
この apiHostはVonageのメッセージングサービスのサンドボックス環境URLです。
const vonage = new Vonage(
{
applicationId: process.env.VONAGE_APPLICATION_ID,
privateKey: process.env.VONAGE_PRIVATE_KEY,
},
{
apiHost: "https://messages-sandbox.nexmo.com",
}
);着信メッセージがVonageからのものであるかどうかを検証するJWT検証機能があります。リクエストの検証については リクエストのVerify.
const verifyJWT = (req) => {
// Verify if the incoming message came from Vonage
const jwtToken = req.headers.authorization.split(" ")[1];
if(!verifySignature(jwtToken, process.env.VONAGE_API_SIGNATURE_SECRET)) {
console.error("Unauthorized request");
throw new Error('Not a messages API request');
}
console.log('JWT verified');
}
ユーザーがWhatsAppメッセージを送信することで会話が始まります。WhatsAppメッセージを'Message received'というテキストと共に送信する関数を作成しましょう。
// Function to send a message via Vonage
const sendMessage = async (to_number) => {
const text = "Message received."; // The reply message
try {
const { messageUUID } = await vonage.messages.send(
new WhatsAppText({
from: process.env.VONAGE_WHATSAPP_NUMBER,
to: to_number,
text: text,
})
);
console.log(`Message sent with messageUUID: ${messageUUID}`);
} catch (error) {
console.error(
"Error sending message:",
error.response ? error.response.body : error.message
);
}
};受信メッセージを処理する /inboundVonageのダッシュボードでWebhookとして追加されたものです。メッセージが受信されるとログに記録され、Sandboxにリストされた許可されたユーザーにこう返されます：「メッセージを受信しました。
app.post("/inbound", async (req, res) => {
const { from: requesterNumber } = req.body;
console.log(`Received message from ${requesterNumber}`);
try {
// Send the "Message received" reply
await sendMessage(requesterNumber);
res.status(200).send(); // Acknowledge the received message
} catch (error) {
console.error("Error handling incoming message:", error);
res.status(500).send("An error occurred while processing the message.");
}
});を作成する。 /statusリクエストデータを記録し、JWTを使用してユーザーが認証されているかどうかをチェックし、成功メッセージで応答するエンドポイントを作成します。
app.post('/status', (req, res) => {
console.log(req.body);
verifyJWT(req);
console.log('Received status update');
res.status(200).send();
});サーバーは指定されたポートをリッスンする。
// Start the server
const PORT = process.env.PORT || 8000;
app.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});
その後、WhatsAppサンドボックスから許可リストに登録したWhatsApp番号へメッセージを送信することができます。ファイルを保存したディレクトリから実行：
> $ node src/server.js
Server is listening on port 8000
Received message from <Number>
JWT verified
Message sent with messageUUID: e295613c-a2fc-40f4-a9ae-fa16f5c685cfこの時点で、許可されたデバイスのWhatsAppにテストメッセージの返信が表示されます。これで様々なタイプのメッセージをテストし、以下について詳しく知ることができます。 WhatsAppのコンセプト.
私のアンドロイド携帯のPlayストアで確認したところ、イギリスで最もダウンロードされているアプリのひとつだった。休暇で母国ブラジルに戻ったとき、WhatsAppがビジネス間でどれだけ普及しているかに気づいた。アサイーを買ったり、カスタマーサポートに連絡したり、店が開いているかチェックしたり、友人や家族と話したり。WhatsAppメッセージで送受信を学ぶ可能性は無限大です。
質問や共有したいことがありますか？Vonageコミュニティ VonageコミュニティSlackまたは 開発者向けニュースレターでフォローしてください。 X（旧Twitter）YouTubeチャンネル YouTubeチャンネルビデオチュートリアルを購読する。 LinkedInのVonage開発者ページ開発者が学び、コミュニティとつながるためのスペースです。つながりを維持し、進捗状況を共有し、最新の開発者向けニュース、ヒント、イベントを把握してください！
