シェア:
){kind=small}
スティーブは、かつてVonageチームの一員でした。彼はVonageで.NET開発者アドボケートを務め、フルスタックかつ多言語対応のソフトウェアエンジニアであり、AI/MLの専門家でもありました。
BlazorでSMSを送信する方法
Blazorは、.NET が構築した "壮大な "開発者フレンドリーな Web フレームワークの最新作です。このチュートリアルでは、BlazorとVonageを使ってSMSを送信する方法を説明します。 SMS API.
このチュートリアルのコードはすべて GitHub.
最新バージョンの .NET Core 3.1 SDK
Visual Studio 2019、Visual Studio for Mac、またはVisual Studio Codeのいずれかが必要です。
アプリをビルドしたい場所に移動し、ターミナルで以下のコマンドを実行する：
というblazorサーバーアプリが作成されます。 SendSmsBlazor.というアプリが作成されます。 code .でVS Codeを起動します。Visual Studio ユーザーは、sln ファイルを開くだけです。
VSCodeでターミナルを立ち上げて実行する：
これでプロジェクトにVonageパッケージがインストールされます。
SMSサービスをrazorページに注入する必要があるので、SmsServiceを作成しましょう。
新しいファイルを Dataという名前の新しいファイルを追加する。 SmsService.cs.VS Codeを使用している場合、これは空白のファイルを作成するだけなので、そこに以下を追加する。
using Microsoft.Extensions.Configuration;
using Vonage.Messaging;
using Vonage.Request;
namespace SendSmsBlazor.Data
{
public class SmsService
{
}
}
クラスの内部に SmsServiceクラスの中に、コンフィギュレーション・オブジェクトを注入しなければならない。このコンフィギュレーションにはAPIキーとAPIシークレットが含まれる。今のところ、必要なのは SmsServiceクラス内に Configurationというプロパティを追加し IConfiguraitonオブジェクトを取るコンストラクタを追加します。 IConfigurationオブジェクトを取るコンストラクタを追加するだけです。 Configurationプロパティをそのオブジェクトに代入します。
public IConfiguration Configuration { get; set; }
public SmsService(IConfiguration config)
{
Configuration = config;
}
の中に SmsServiceの中に SendSmsメソッドを追加します。このメソッドは3つの文字列を受け取ります： to, fromと textという3つの文字列を受け取ります。この文字列には、メッセージの送信先の番号、メッセージの送信元の Vonage API の番号、そしてメッセージのテキストが含まれます。
このサービスからすれば、あとはやるだけだ：
コンフィギュレーションからAPIキーとシークレットを取り出す
SmsClientの作成
SMSを送信する
これらはすべて、以下の方法で実現できる：
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);
}
サービスをビルドしたので、それをrazorページにインジェクトできるようにする必要がある。そのためには Startup.csに入って ConfigureServices関数を探します。この関数の最後に次の行を追加すると、サービスがインジェクト可能になります：
services.AddSingleton<SmsService>();
フロントエンドには Pages/Index.razorをフロントエンドに使うので、それを開いて2行目以下をすべて削除してください。
まず、ここでやるべきことは SmsService.そのために usingと injectステートメントを追加する：
@using SendSmsBlazor.Data
@inject SmsService SmsService
Blazorの素晴らしいところは、ブラウザ上でC#コードを実行できることです。 @code{}ブロックさえあればいいのです。こうすることで、無名クラスをインライン化することになります。 To, From, Textそして MessageIdというメソッドを追加します。 SendSmsというメソッドを追加します。これは次のようになります：
@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;
}
}
さて、これですべて片付いたので、いくつかの入力フィールドを追加していこう。入力フィールドは To, Fromと Textフィールドは、これらの入力フィールドに @bind属性でこれらの入力フィールドにバインドすることで入力されます。一番下、ボタンのすぐ上に、段落タグで参照することによって、送信された MessageIdを表示します。最後に、クリックされたときに匿名クラスの SendSmsボタンを呼び出します。ブロックと @codeブロックと @injectブロックの間に以下を追加します：
<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>
サーバーを稼働させる前にしなければならない最後のことは、サーバーの設定である。思い出してみてほしい。 IConfigurationオブジェクトを SmsService.を開き appsettings.jsonを開き、2つのプロパティを設定に追加します。 VONAGE_API_KEYそして VONAGE_API_SECRET.のAPIキーとAPIシークレットの値に設定します。 ダッシュボード.
これが終わったら、ターミナルに戻って以下のコマンドを実行する。
アプリケーションがリッスンしているポートを教えてくれるだろう。 localhost:5001に移動し、フォームに記入し、SendSmsを押す。送信先の番号にSMSが表示され、テキスト・フィールドのすぐ下にSMSのMessage-IDが表示されます。
このデモのコードは GitHub.