本日はVonate APIを使ってWhatsAppにメッセージを送受信してみます。
参照したドキュメントはこちらです。
https://developer.vonage.com/ja/messages/overview
事前にFacebookのビジネスマネージャーアカウントが必要となりますので、開設方法はこちらを参照してください。
https://ja-jp.facebook.com/business/help/1710077379203657
WhatsAppにつなげる仕組み自体はVonage管理画面にて新しいアプリケーションとなるので、アプリケーション登録をする必要もあります。
WhatsAppには下記の通り送信できるメッセージの型があります。
- Message Template
- Media Message Template
- Audio Message
- Link Button
- Quick Reply Button
- Contact
- File Message
- Location
- Multiple Item Products
- Single Item Products
- Text Message
- Video Message
今日のところでは一旦メッセージを送る部分のみを紹介します。また別の機会に各フォーマットごとの送信方法を書くようにします。
Text Message
WhatsAppで送れるテキストメッセージは最大で4096文字になります。
ドキュメントにあるサンプルコードはこちらです。
curl -X POST $MESSAGES_API_URL \
-H 'Authorization: Bearer '$JWT\
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-d $'{
"message_type": "text",
"text": "Nexmo Verification code: 12345. Valid for 10 minutes.",
"to": "'$TO_NUMBER'",
"from": "'$WHATSAPP_NUMBER'",
"channel": "whatsapp"
}'
事前に準備しておくべき項目は下記です。SDKを使う場合は要らない項目もあります。C# SDK利用の場合はAppIdとPrivate Keyへのパスのみとなります。
| Key | Description |
|---|---|
| VONAGE_APPLICATION_ID | アプリケーションID |
| VONAGE_APPLICATION_PRIVATE_KEY_PATH | アプリケーションのプライベートキー |
| VONAGE_PRIVATE_KEY_PATH | プライベートキー |
| BASE_URL | 本番環境 https://api.nexmo.com/. テスト環境 https://messages-sandbox.nexmo.com/. |
| MESSAGES_API_URL | 本番環境 https://api.nexmo.com/v1/messages. 開発環境 https://messages-sandbox.nexmo.com/v1/messages
|
| WHATSAPP_NUMBER | 割当されたWhatsApp番号、テスト環境の時は14157386102. |
| VONAGE_WHATSAPP_NUMBER | ↑と一緒 |
| VONAGE_NUMBER | ↑と一緒 |
| TO_NUMBER | 送信先の番号 |
WhatsAppビジネスアカウントの紐づけ
下記管理画面から、WhatsAppビジネスアカウント紐づけします。
下記のような注意が表示されますので、一度読んでから進みます。
FB側の設定と紐づけが終わると下記のように最終確認が表示されますので、進めてください。
完了すると有効なWhatsapp番号が下記のようにリスト表示されます。
次にアプリケーションとWhatsAppを紐づけます。アプリの登録は管理画面左側のメニューから「アプリケーション」を選択して進めてください。下記、紐づけ完了した状態です。
実装
ここからはC#のコードで先ほどのCurlと同じようにしてテストしてみます。
まずは、アプリ内で利用しやすいようにキャプセレートします。
public async Task SendWhatsAppMessageAsync(string number, string text)
{
var appId = _config.Value.Vonage.AppId;
var privateKeyPath = _config.Value.Vonage.PrivateKeyPath;
var credentials = Credentials.FromAppIdAndPrivateKeyPath(appId, privateKeyPath);
var vonageClient = new VonageClient(credentials);
var request = new WhatsAppTextRequest
{
To = number,
From = "{YOUR WHATSAPP NUM}",
Text = text
};
var response = await vonageClient.MessagesClient.SendAsync(request);
Debug.WriteLine(JsonSerializer.Serialize(response));
}
そのあとはコントローラーとビューを作ります。
Controller
[Route("/whatsapp/test")]
public IActionResult Test()
{
return View();
}
[HttpPost,AutoValidateAntiforgeryToken]
[Route("/whatsapp/test/send")]
public async Task<IActionResult> TestSend(string num, string text)
{
await _notificationHandlers.SendWhatsAppMessageAsync(num, text);
return RedirectToAction("Test");
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="~/css/site.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<title>Index</title>
</head>
<body>
<div class="container p-5">
<form action="/whatsapp/test/send" method="post">
@Html.AntiForgeryToken()
<div class="mb-3">
<input type="text" name="num" class="form-control" placeholder="number" />
</div>
<div class="mb-3">
<textarea class="form-control" placeholder="Enter text" name="text"></textarea>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary rounded-0">Send</button>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
テスト
実際のテスト画面はこちら。ここに番号とメッセージを入力。
実際のWhatsApp内で確認
最後に
以上です、VonageのAPIを使うと簡単にWhatsAppにも接続することができました。 別のメッセージタイプに関しても今後書いていきます。 次はメッセージを受取り処理を書きます。