Wie man eine SMS mit Blazor versendet

Blazor ist das neueste in einer Reihe von, wie ich es nennen würde, "großartigen" entwicklerfreundlichen Web-Frameworks, die .NET entwickelt hat. In diesem Tutorial werden wir uns ansehen, wie man eine SMS mit Blazor und der Vonage SMS API.

Direkt zum Code springen

Der gesamte Code dieses Tutorials befindet sich in GitHub.

Voraussetzungen

• Sie benötigen die neueste Version des .NET Core 3.1 SDK

• Sie benötigen entweder Visual Studio 2019, Visual Studio für Mac oder Visual Studio Code - ich werde VS Code für diese Demo verwenden.

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.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Die App erstellen

Navigieren Sie zu dem Ort, an dem Sie die Anwendung erstellen möchten, und führen Sie den folgenden Befehl in Ihrem Terminal aus:

Dadurch wird eine Blazor-Server-App für Sie erstellt, die SendSmsBlazor. Wechseln Sie in dieses Verzeichnis und geben Sie den Befehl code . um VS Code zu starten. Benutzer von Visual Studio können einfach die sln-Datei öffnen.

Das Vonage Nuget-Paket hinzufügen

Starten Sie ein Terminal in VSCode und führen Sie es aus:

Dadurch wird das Vonage-Paket in das Projekt installiert.

Erstellen Sie Ihren SmsService

Wir müssen einen SMS-Dienst in unsere Rasierklingen-Seite einfügen, also erstellen wir einen SmsService.

Fügen Sie eine neue Datei unter dem Data Ordner mit dem Namen SmsService.cs. Wenn Sie VS Code verwenden, wird nur eine leere Datei erstellt, also fügen Sie Folgendes hinzu.

using Microsoft.Extensions.Configuration;
using Vonage.Messaging;
using Vonage.Request;

namespace SendSmsBlazor.Data
{
    public class SmsService
    {

    }
}

Einen Konstruktor hinzufügen

Innerhalb der SmsService Klasse müssen wir ein Konfigurationsobjekt einfügen. Das Konfigurationsobjekt enthält unseren API-Schlüssel und unser API-Geheimnis, die wir etwas später konfigurieren werden. Im Moment müssen Sie nur eine neue Eigenschaft innerhalb der SmsService Klasse mit dem Namen Configuration vom Typ IConfiguraiton und einen Konstruktor hinzufügen, der ein IConfiguration Objekt, das einfach unsere Configuration Eigenschaft diesem Objekt zuweist.

public IConfiguration Configuration { get; set; }
public SmsService(IConfiguration config)
{
    Configuration = config;
}

Schreiben Sie Ihre SendSms-Methode

Innerhalb der SmsServicefügen wir eine SendSms Methode hinzufügen. Diese Methode nimmt drei Zeichenketten entgegen: to, from, und text die die Nummer enthalten, an die die Nachricht geht, die Vonage-API-Nummer, von der die Nachricht kommt, und den Text der Nachricht.

Aus Sicht dieses Dienstes bleibt nur noch eines zu tun:

1. Entnehmen Sie den API-Schlüssel und das Geheimnis aus der Konfiguration

2. Einen SmsClient erstellen

3. Senden Sie die SMS

All dies kann mit den folgenden Maßnahmen erreicht werden:

public SendSmsResponse SendSms(string to, string from, string text)
{
    var apiKey = Configuration["VONAGE_API_KEY"];
    var apiSecret = Configuration["VONAGE_API_SECRET"];
    var creds = Credentials.FromApiKeyAndSecret(apiKey,apiSecret);
    var client = new SmsClient(creds);
    var request = new SendSmsRequest
    {
        To= to,
        From = from,
        Text = text
    };
    return client.SendAnSms(request);
}

SmsService als Injectable konfigurieren

Nun, da wir den Dienst erstellt haben, müssen wir sicherstellen, dass wir ihn in unsere Razor-Seite einbinden können. Um dies zu tun, müssen wir in Startup.cs gehen und die ConfigureServices Funktion. Fügen Sie die folgende Zeile am Ende dieser Funktion hinzu, und der Dienst wird injizierbar sein:

services.AddSingleton<SmsService>();

Frontend hinzufügen

Wir werden die Pages/Index.razor für unser Frontend verwenden, also öffnen Sie es einfach und löschen Sie alles unterhalb von Zeile 2.

Abhängigkeitsinjektion SmsService

Das erste, was wir hier tun müssen, ist unsere SmsService. Zu diesem Zweck fügen wir ein using und eine inject Anweisung, etwa so:

@using SendSmsBlazor.Data
@inject SmsService SmsService

Hinzufügen von C#-Code zum Senden der Nachricht

Eines der wirklich tollen Dinge an Blazor ist, dass man damit C#-Code im Browser ausführen kann - wir brauchen nur einen @code{} Block, und schon kann es losgehen. Indem wir dies tun, machen wir eine anonyme Klasse in-line, also fügen wir ein To, From, Text, und MessageId zu dieser anonymen Klasse und fügen eine Methode namens SendSms die unseren SmsService aufruft. Dies wird wie folgt aussehen:

@code{
    private string To;
    private string From;
    private string Text;
    private string MessageId;
    private void SendSms()
    {
        var response = SmsService.SendSms(To, From, Text);
        MessageId = response.Messages[0].MessageId;
    }
}

Eingabefelder und Schaltfläche "Senden" hinzufügen

Jetzt, wo wir das alles hinter uns haben, fügen wir einige Eingabefelder hinzu. Die To, From, und Text werden durch Bindung an diese Eingabefelder mit dem @bind Attribut. Unten, direkt über der Schaltfläche, zeigen wir die gesendete MessageId indem wir es in einem Absatz-Tag referenzieren. Schließlich fügen wir am unteren Rand eine Schaltfläche hinzu, die die SendSms Schaltfläche in unserer anonymen Klasse aufruft, wenn sie angeklickt wird. Fügen Sie Folgendes zwischen dem @code Block und dem @inject Block ein:

<h1>Send an SMS!</h1>

Welcome to your new app Fill out the below form to send an SMS.
<br />
to:
<input id="to" @bind="@To" class="input-group-text" />
from:
<input id="from" @bind="From" class="input-group-text" />
text:
<input id="text" @bind="Text" class="input-group-text" />
<p>@MessageId</p>
<button class="btn btn-primary" @onclick="SendSms">Send SMS</button>

Konfigurieren Sie die App

Als letztes müssen wir unseren Server konfigurieren, bevor wir ihn in Betrieb nehmen. Wenn Sie sich erinnern, setzen Sie ein IConfiguration Objekt in der SmsService. Alles, was Sie tun müssen, ist appsettings.json und fügen der Konfiguration zwei Eigenschaften hinzu VONAGE_API_KEY und VONAGE_API_SECRET. Setzen Sie diese auf die Werte für den API-Schlüssel und das API-Geheimnis in der Datei Dashboard.

Ausführen unserer App

Kehren Sie nun zu Ihrem Terminal zurück und führen Sie den folgenden Befehl aus.

Ihre Anwendung teilt Ihnen mit, welchen Port sie abhört - bei mir ist es Port 5001, also navigiere ich zu localhost:5001, fülle das Formular aus und klicke auf SendSms. Sie sehen die SMS auf der Nummer, an die Sie gesendet haben, wobei die Message-ID der SMS direkt unter dem Textfeld erscheint.

Ressourcen

Den Code für diese Demo finden Sie in GitHub.