Lightning Blog
Blazor記事イメージ画像

【Blazor】 Gmailからメール送信するサンプル

更新日:2023/06/06

BlazorServerからGmailでメール送るサンプルです。事前準備としてGmailアカウントのアプリパスワードを用意する必要があるので、 まずはその手順を説明します。設定には2段階認証を設定が必要になります。そのため、 SMSを受信するためのデバイスと電話番号が必要になります。Gmailアカウントのアプリパスワードがある方は飛ばして大丈夫です。

BlazorServerからGmailでメール送るために必要なもの

  • Gmailアカウントのアプリパスワード(これからの手順で取得)
  • SMSを受信するためのデバイスと電話番号(アプリパスワードの取得に必要)

それでは、ますアプリパスワードの取得手順を説明していきます。

    目次

  • アプリパスワードを取得する
  • メール送信するプログラムを作成する

アプリパスワードを取得する

セクション画像

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

Googleアカウントを管理
Googleアカウントを管理

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

2段階認証プロセス
2段階認証プロセス

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

使ってみる
使ってみる

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

パスワード入力
パスワード入力

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

メッセージ取得デバイス確認
メッセージ取得デバイス確認

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

認証
認証

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

コード入力
コード入力

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

2段階認証プロセス有効
2段階認証プロセス有効

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

2段階認証プロセス有効確認
2段階認証プロセス有効確認

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 = "送信失敗";
        }
    }
}

実行して、ボタンを押してみましょう。[送信完了]と表示されていれば、メールが送れているはずです。

アプリパスワード生成
アプリパスワード生成

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

受信したメール
受信したメール

ブログ内の記事で書かれているサンプルコードは、GitHubから確認する事ができます。 是非参考にしてみてください。

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

合わせて読みたい

カード画像
カレンダー(DatePicker)から値を取得する

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

更新日:2024/06/25

カード画像
ページをリロードする

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

更新日:2024/08/29

An error has occurred. This application may no longer respond until reloaded. Reload 🗙