https://d226lax1qjow5r.cloudfront.net/blog/blogposts/how-to-send-whatsapp-messages-with-laravel/whatsapp_laravel.png

LaravelでWhatsAppメッセージを送信する方法

最終更新日 January 25, 2024

所要時間:1 分

Messages APIをご存知でない場合、Facebook Messenger、Viber、WhatsApp、そしてより基本的なSMSチャンネルにテキスト、画像、動画を送信することができます。このチュートリアルでは、既にセットアップしたデモLaravelアプリケーションを使って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.

This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.

リポジトリコードをクローンする方法

コマンドラインを使って、アプリケーションコードをクローンする:

git clone git@github.com:Vonage-Community/blog-messages-laravel.git

をコピーする。 .env.exampleをコピーして .envをコピーして環境変数ファイルを作成する:

cd blog-messages-laravel
cp .env.example .env

そして最後に、composerで依存関係をインストールする:

composer install

Vonage Dashboardの設定方法

まず、メッセージを送信するためのアプリケーションIDが必要です。Vonage Dashboardにアクセスし、新しいアプリケーションを作成します:

Screenshot of the Application panel in the Vonage DashboardHit 'create a new Application' to get started

アプリケーションに識別子(例:laravel-messages)をつけて、メッセージ機能をオンにします。ここで2つのウェブフックを追加する必要がありますが、実際には使用しないので、例えばダミーのプレースホルダーを置くことができます。 https://www.example.com

公開鍵と秘密鍵を生成」をクリックする。すると private.keyが生成されます。これをアプリケーション・コードのルート・ディレクトリに移動してください。作成されたアプリケーションIDに注目してください。

これでアプリケーションの設定は終わったので、次はサンドボックスの設定だ。

このページへまたは左サイドバーの Troubleshoot & Learn > Developer Tools > Messages SandboxQRコードをスキャンしてWhatsAppサンドボックスを作成します。

Screenshot of the Messages SandboxScan the QR code and follow the instructions to enable the Sandbox

本番環境で完全に統合されたソリューションを利用するには、Metaに登録されたWhatsAppビジネスアカウント(WABA)が必要です。サンドボックスでできることは、一時的なWABAを使用することです。Vonageのサーバーにリンクされたプリセット番号で、あなたの番号を許可リストに登録します。

番号を設定したら、下にスクロールして、使用する送信者番号を示すcURLコードの例を見ることができる:

Screenshot of the Sandbox code snippets section showing the from numberTake note of the from number in this panel

アプリケーション環境の設定

ファイルを作成したとき .envファイルを作成したとき、記入すべき変数が3つあることに気づくだろう:

VONAGE_APPLICATION_ID=
VONAGE_PRIVATE_KEY_PATH=
VONAGE_FROM_NUMBER=

これでこの3つが揃ったことになる。この fromは前のステップで作成したものです。 private.keyをパスとして入力します(アプリケーションコードはLaravelのヘルパー関数base_path()を使って完全修飾パスを決定します。)アプリケーションIDは、Vonageアプリケーションを作成した際に、Vonageダッシュボードから貼り付けることができます。

アプリケーションの起動

のような派手なものはない。 セイルまたは HerdLaravelがラップしている組み込みのPHPサーバーを使うだけです:

php artisan serve

にナビゲートして、素敵なランディングページを手に入れよう。 localhost:8000:

Screenshot of Laravel's default splash screenA Splash Screen for true Artisans

Vonageサーバーから着信メッセージのウェブフックを受け取る方法はないので、公開URLを取得するために、ngrokを使って実行中のLaravelアプリケーションにマッピングします:

ngrok http 8000

Screenshot of ngrok running on the command lineNgrok up and running

これで公開URLができました!コンフィギュレーションの最後の部分は、Webhooksを作成することなので、Vonage DashboardのMessages Sandboxに戻ります。私たちが持っているパブリックURLを取り、関連するフィールドに/webhooks/statusと/webhooks/inboundを追加します:

Screenshot of the webhooks section in the Messages SandboxConfigure your Webhooks here

テストしてみよう!

にアクセスして localhost:8000/messageに向かい、メッセージを送る!

Screenshot of the Laravel app running waiting for a phone number inputHit Submit to watch the magic

Screenshow of device running WhatsApp showing our messagesOur sandbox is working as expected

どうやっているのか?

コードに飛び込む時が来た。すべてのロジックは routes/web.phpファイルだけにあります。つの重要なルートがアプリの重要な部分を構成しています。まず、発信メッセージルートです:

Route::post('/message', static function(Request $request) {
   $number = $request->input('number');
   $fromNumber = config('vonage.from_number');
   $text = 'Hello from Vonage and Laravel :) Please reply to this message with a number between 1 and 100';
   $message = new Vonage\Messages\Channel\WhatsApp\WhatsAppText($number, $fromNumber, $text);

   $credentials = new Keypair(file_get_contents(config('vonage.private_key_path')), config('vonage.application_id'));
   $client = new Vonage\Client($credentials);
   $client->messages()->getAPIResource()->setBaseUrl('https://messages-sandbox.nexmo.com/v1/messages');
   $client->messages()->send($message);

   return view('thanks');
});

これは最初のメッセージを送信する際のフォームと POST リクエストです。このルートの唯一のタスクは、フォームに入力された番号を受け取り、WhatsApp メッセージを送信することです。どうやってこれを Vonage に送るのかと思ったら、答えは Vonage PHP SDK にあります。SDK Client オブジェクトはクレデンシャルオブジェクト (この場合は Keypair インスタンス) を受け取り、先ほど作成したアプリケーション ID と秘密鍵パスの環境変数をコンストラクタに渡します。

$credentials = new Keypair(file_get_contents(config('vonage.private_key_path')), config('vonage.application_id'));
$client = new Vonage\Client($credentials);

PHP SDK の使い方の詳細については、ReadMe、 をご覧ください。をご覧ください。メッセージを送信するには、WhatsAppText オブジェクトを作成し、宛先番号とサンドボックス番号を渡します。 from番号を渡します。

クライアントを使用してメッセージを送信する前に、今回のユースケース特有の重要なステップがある:

$client->messages()->getAPIResource()->setBaseUrl('https://messages-sandbox.nexmo.com/v1/messages');

この行では、PHP SDK の分離された性質 (SDK のすべてのパーツを再構成したり入れ替えたりできる) を利用して、本番環境で設定されている APIResource オブジェクトを取り出し、それをサンドボックス URL で上書きしています。つまり、クライアントが今すべきことはそれを送信することだけです:

$client->messages()->send($message);

WhatsAppメッセージ受信方法

最初のステップで作成したスレッドに誰かが返信するたびにトリガーされます。これがエンドポイントだ:

Route::post('/webhooks/inbound', static function(Request $request) {
   $data = $request->all();
   $number = (int)$data\['text'];

   if ($number > 0) {
       $randomNumber = random_int(1, 8);
       $respondNumber = $number * $randomNumber;
       $toNumber = $data\['from'];
       $fromNumber = config('vonage.from_number');
       $text = "The answer is " . $respondNumber . ", we multiplied by " . $randomNumber . ".";
       $message = new Vonage\Messages\Channel\WhatsApp\WhatsAppText($toNumber, $fromNumber, $text);

   $credentials = new Keypair(file_get_contents(config('vonage.private_key_path')), config('vonage.application_id'));
   $client = new Vonage\Client($credentials);
   $client->messages()->getAPIResource()->setBaseUrl('https://messages-sandbox.nexmo.com/v1/messages');
   $client->messages()->send($message);
});

ここで、メッセージに返信するために必要な詳細、つまり返信先の電話番号と、相手がメッセージの一部として送ってきた番号を抽出する。この情報をもとに、送信された番号に1から8の間のランダムな数を掛け合わせ、最初のメッセージの送信方法と同じ構造で返信を送ります。

結論

VonageのWhatsAppを使った対話方法です!ご想像の通り、このような設定はヘルプラインのような自動チャットボットに最適です。どんなものを作りますか? VonageコミュニティSlackにてお知らせください。 X(旧Twitter. または マストドン.

その他のリソース

シェア:

https://a.storyblok.com/f/270183/400x385/12b3020c69/james-seconde.png
James SecondeシニアPHPデベロッパー

スタンダップ・コメディーの学位論文を持つ俳優の訓練を受け、ミートアップ・シーンを経てPHP開発に携わるようになった。技術について話したり書いたり、レコード・コレクションから変わったレコードを再生したり買ったりしています。