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

Wie man WhatsApp-Nachrichten mit Laravel sendet

Zuletzt aktualisiert am January 25, 2024

Lesedauer: 4 Minuten

Wenn Sie mit der Nachrichten-API nicht vertraut sind, können Sie Text, Bilder und Videos an Facebook Messenger, Viber, WhatsApp und den einfachen SMS-Kanal senden. Vonage verfügt über eine Sandbox-Testumgebung, in der Sie damit spielen können. In diesem Tutorial werden wir diese nutzen, um mit WhatsApp Messaging zu spielen, indem wir eine Demo-Laravel-Anwendung verwenden, die ich bereits eingerichtet habe.

Voraussetzungen

Wir werden dies so einfach wie möglich halten. Sie benötigen:

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

In diesem Lernprogramm wird auch eine virtuelle Telefonnummer verwendet. Um eine zu erwerben, gehen Sie zu Rufnummern > Rufnummern kaufen und suchen Sie nach einer Nummer, die Ihren Anforderungen entspricht.

So klonen Sie den Repository-Code

Klonen Sie den Anwendungscode über die Befehlszeile:

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

Kopieren Sie die .env.example als .env um unsere Umgebungsvariablendatei zu erstellen:

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

Und schließlich installieren Sie die Abhängigkeiten mit Composer:

composer install

So richten Sie das Vonage Dashboard ein

Zunächst benötigen wir eine Anwendungs-ID, um Nachrichten zu versenden. Rufen Sie das Vonage Dashboard auf und erstellen Sie eine neue Anwendung:

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

Benennen Sie Ihre Anwendung mit einem Bezeichner (z. B. laravel-messages) und aktivieren Sie die Nachrichtenfunktion. Sie müssen hier zwei Webhooks hinzufügen, aber wir werden diese nicht wirklich verwenden, also können Sie Dummy-Platzhalter einfügen, z. B. https://www.example.com

Klicken Sie auf "Öffentlichen und privaten Schlüssel generieren". Sie werden feststellen, dass ein private.key generiert wird: Verschieben Sie diesen in das Stammverzeichnis Ihres Anwendungscodes. Notieren Sie sich die erstellte Anwendungs-ID: Wir werden sie in Kürze benötigen.

Damit sind die Anwendungseinstellungen erledigt, und wir müssen nun die Sandbox einrichten.

Besuchen Sie diese Seite oder navigieren Sie zu ihr über die linke Seitenleiste unter Troubleshoot & Learn > Developer Tools > Messages Sandboxund folgen Sie den Anweisungen, um eine WhatsApp-Sandbox zu erstellen, indem Sie den QR-Code scannen.

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

Für eine vollständig integrierte Lösung in der Produktion benötigen Sie einen bei Meta registrierten WhatsApp Business Account (WABA). In der Sandbox können Sie ein temporäres WABA verwenden - Ihre Nummer steht nun auf einer Liste mit erlaubten Nummern, die mit den Servern von Vonage verknüpft sind.

Sobald die Nummer eingerichtet ist, können Sie nach unten scrollen, um einen cURL-Beispielcode zu sehen, der Ihnen die zu verwendende Absendernummer angibt:

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

Konfigurieren Sie die Anwendungsumgebung

Als wir die Datei .env Datei erstellt haben, werden Sie feststellen, dass es drei Variablen gibt, die ausgefüllt werden müssen:

VONAGE_APPLICATION_ID=
VONAGE_PRIVATE_KEY_PATH=
VONAGE_FROM_NUMBER=

Wir sollten jetzt alle drei haben. Die from Nummer wurde im vorherigen Schritt erstellt, geben Sie private.key als unseren Pfad ein (der Anwendungscode verwendet die Laravel-Hilfsfunktion base_path(), um den voll qualifizierten Pfad zu ermitteln; wenn Sie also den Schlüssel in eine andere Verzeichnisstruktur verschieben wollten, müssten Sie dies relativ zum Stammverzeichnis tun). Unsere Anwendungs-ID kann aus dem Vonage Dashboard eingefügt werden, wenn wir eine Vonage-Anwendung erstellt haben.

Starten Sie die Anwendung

Keine ausgefallenen Sachen wie Segel oder Herde hier: Wir verwenden einfach den eingebauten PHP-Server, der von Laravel umschlossen wird:

php artisan serve

Und wir sollten die schöne Landing Page erhalten, indem wir zu folgender Adresse navigieren localhost:8000:

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

Wir haben keine Möglichkeit für die Vonage-Server, um uns eingehende Nachrichten-Webhooks zu geben, so dass wir eine öffentliche URL zu bekommen, werden wir ngrok verwenden, um unsere laufende Laravel-Anwendung zu mappen:

ngrok http 8000

Screenshot of ngrok running on the command lineNgrok up and running

Sie haben jetzt eine öffentliche URL! Der letzte Teil der Konfiguration besteht darin, unsere Webhooks zu erstellen. Gehen Sie also zurück zur Messages Sandbox auf dem Vonage Dashboard. Nehmen Sie die öffentliche URL, die wir haben, und fügen Sie /webhooks/status und /webhooks/inbound in die entsprechenden Felder ein:

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

Testen Sie es!

Gehen Sie zu localhost:8000/message und senden Sie eine Nachricht!

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

Wie macht sie das?

Es ist an der Zeit, in den Code einzutauchen. Die gesamte Logik befindet sich nur in der routes/web.php Datei und nicht in den Controllern, um die Dinge einfach zu halten. Es gibt zwei wichtige Routen, die die wesentlichen Teile der App ausmachen. Erstens, die Route für ausgehende Nachrichten:

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

Dies ist das Formular und die POST-Anfrage beim Versenden der ersten Nachricht. Die einzige Aufgabe dieser Route besteht darin, die im Formular eingegebene Nummer zu übernehmen und eine WhatsApp-Nachricht zu versenden. Wenn Sie sich fragen, wie wir dies an Vonage senden, finden Sie die Antwort im PHP-SDK von Vonage. Das SDK-Client-Objekt benötigt ein Credentials-Objekt (in diesem Fall eine Keypair-Instanz), dem wir die Umgebungsvariablen Application ID und Private Key Path übergeben, die wir zuvor im Konstruktor erstellt haben.

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

Weitere Informationen darüber, wie Sie das PHP SDK verwenden können, finden Sie in der ReadMe, finden Sie in der ReadMe das Beispiele für die Verwendung der Nachrichten-API enthält. Um eine Nachricht zu senden, erstellen wir ein WhatsAppText-Objekt, geben die Zielnummer und die zuvor konfigurierte Sandbox from Nummer, die wir zuvor konfiguriert haben.

Bevor wir die Nachricht über den Client senden, gibt es einen wichtigen Schritt, der speziell für unseren Anwendungsfall gilt:

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

Diese Zeile hier nutzt die entkoppelte Natur des PHP-SDK (alle Teile des SDK können neu konfiguriert oder ausgetauscht werden), um das für die Produktion konfigurierte APIResource-Objekt herauszuziehen und es mit der Sandbox-URL zu überschreiben. Alles, was der Client jetzt tun muss, ist sie zu senden:

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

Wie man eine eingehende WhatsApp-Nachricht empfängt

Der zweite Teil besteht darin, eine Route zu programmieren, die auf eingehende Webhooks von Vonage wartet - diese werden jedes Mal ausgelöst, wenn jemand auf den im ersten Schritt erstellten Thread antwortet. Hier ist der Endpunkt:

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

Hier extrahieren wir die Details, die wir benötigen, um auf die Nachricht zu antworten - nämlich die Telefonnummer, an die geantwortet werden soll, und die Nummer, die als Teil der Nachricht gesendet wurde. Mit diesen Informationen wird die gesendete Nummer mit einer Zufallszahl zwischen 1 und 8 multipliziert, und wir senden eine Antwort mit der gleichen Struktur wie bei der ursprünglichen Nachricht.

Schlussfolgerung

Und da haben wir es: Möglichkeiten zur Interaktion über WhatsApp in Vonage! Wie Sie sich vorstellen können, ist diese Art von Einrichtung ideal für automatisierte Chatbots, wie z. B. eine Helpline, aber was werden Sie bauen? Lassen Sie es uns wissen auf dem Vonage Community Slack, rjeder auf X, früher bekannt als Twitter. oder melde dich bei mir auf Mastodon.

Weitere Ressourcen

Share:

https://a.storyblok.com/f/270183/400x385/12b3020c69/james-seconde.png
James SecondeSenior PHP Entwickler Advocate

Als ausgebildeter Schauspieler mit einer Dissertation in Standup-Comedy bin ich über die Meetup-Szene zur PHP-Entwicklung gekommen. Man findet mich, wenn ich über Technik spreche oder schreibe, oder wenn ich seltsame Platten aus meiner Vinylsammlung spiele oder kaufe.