
【Blazor】 Gmailからメール送信するサンプル
BlazorServerからGmailでメール送るサンプルです。事前準備としてGmailアカウントのアプリパスワードを用意する必要があるので、 まずはその手順を説明します。設定には2段階認証を設定が必要になります。そのため、 SMSを受信するためのデバイスと電話番号が必要になります。Gmailアカウントのアプリパスワードがある方は飛ばして大丈夫です。
BlazorServerからGmailでメール送るために必要なもの
- Gmailアカウントのアプリパスワード(これからの手順で取得)
- SMSを受信するためのデバイスと電話番号(アプリパスワードの取得に必要)
それでは、ますアプリパスワードの取得手順を説明していきます。
- アプリパスワードを取得する
- メール送信するプログラムを作成する
目次
アプリパスワードを取得する

1. PCでブラウザ(GoogleChrome)を開き、右上のプロフィールから[Googleアカウントを管理]をクリックします。

2. [セキュリティ] → [2段階認証プロセス]が無効になっていることを確認し、クリックします。

3. [使ってみる]をクリックします。

4. パスワード入力して、[次へ]をクリックします。

5. [続行]をクリックします。

6. [電話番号]を入力して、今回は[コード取得方法]を選択します(この記事ではテキストメッセージを選択します)。その後、[送信]をクリックします。

7. 送信されたSMSのメッセージに記載してあるコードを入力して、[次へ]をクリックします。

8. [有効にする]をクリックします。

9. 有効になっていることを確認します。

10. 同ページ内で下スクロールし、[アプリパスワード]をクリックします。

11. [アプリを選択]を[メール]にし、[デバイスを選択]を[その他(名前入力)]で設定します。その後、名前を任意で設定します。今回は[Test]で設定しました。

12. [生成]をクリックします。

13. アプリパスワードの生成完了です。このパスワードをソースコード書く際に使いますので、控えておきましょう。

メール送信するプログラムを作成する

取得したアプリパスワードを使って、メールを送信するコードは以下の通りです。
@page "/gmailtest", @using System.Net.Mail, <h3>GmailTest</h3> <button @onclick="SendGmail">Gmail送信テスト</button> <div>@Message</div> @code { private string Message{ get; set; } /// <summary> /// メール送信 /// </summary> private void SendGmail() { try { // 送信元Gmailアドレス string gmailAddress = "送信元アドレス@gmail.com"; // 先ほど作成したアプリパスワード string applicationPassword = "アプリパスワード"; // 送信先のメールアドレス // 送信元の同じでも別でも可能。複数送信する場合はカンマで区切って指定する string toAddress = "送信先アドレス@gmail.com"; MailMessage mail = new MailMessage(gmailAddress, toAddress); mail.Subject = "メールのタイトル"; mail.IsBodyHtml = true; mail.Body = "<h1>メール本文</h1>"; // 固定でOK SmtpClient smtp = new SmtpClient("smtp.gmail.com", 587); smtp.EnableSsl = true; smtp.UseDefaultCredentials = false; smtp.Credentials = new System.Net.NetworkCredential(gmailAddress, applicationPassword); smtp.Send(mail); Message = "送信完了"; } catch { Message = "送信失敗"; } } }
実行して、ボタンを押してみましょう。[送信完了]と表示されていれば、メールが送れているはずです。

以下のようなメールが受信できていれば、成功です。

この本では、Blazorの基本から高度なテクニックまで、実際のプロジェクトに役立つ知識を網羅しています。 初心者から経験者まで、Blazorを扱うすべての開発者にとっての必読書です。 この記事の執筆者も参考にした「Blazor入門」で、あなたのBlazorスキルを飛躍的に向上させませんか?
合わせて読みたい

カレンダー(DatePicker)から値を取得する
Blazorで<input type="date">を使いカレンダー(DatePicker)から日付を取得する方法を解説。サンプルコード、日付範囲設定を紹介。
更新日:2024/06/25

ページをリロードする
Blazorでページをリロードする方法について解説します。JavaScriptのlocation.reloadを利用する方法や、NavigationManager.NavigateToメソッドでforceLoadオプションを使ったリロード方法を紹介します。使い分けにより、ページの状態を適切に管理できます。
更新日:2024/08/29