1. はじめに
SignUp時（アカウント登録時）、認証リンクを送信したり認証コードを入れたメールを送信したりして、登録されたメールアドレスが実際に使われているかを判定する必要があります。
トークンを含めた認証リンクを送るにしろ認証コードを送るにしろ、大抵は認証用の値をデータベースに控えておいて、ユーザーのアクセスやフォームへ入力されたコードとの比較に基づいてメールを認証することになります。
Next.jsを用いたアプリでメールを送るとき、nodemailerを用いて自動メール送信機能を実装したので、忘備録も兼ねて紹介します。
目次
2. nodemailerの下準備
今回は、Gmailを使います。
自前のGmailアカウントを使う時は、事前に二段階認証を設定しておき、アプリケーション用のパスワードも登録しておく必要があります。手順は次の通りです。
①：二段階認証を設定する。
②：アプリパスワードを設定する。
googleアカウントから以下のような画面を見つけることができると思います。
もし見つけられなければ、検索窓から探してみるとよいと思います。
※黒塗りのところはプロジェクト名を表しています
環境変数にメールアドレスとパスワードを設定したうえで、Next.jsで次のように変数を設定します。
MAIN_ACCOUNT=public.example.info@gmail.com
MAIN_PASS=****************
3. コードの設定と保存
基本的なコードは以下のような感じです。
nodemailerオブジェクトのcreateTransportメソッドを用いてtransporterを作ります。サービス名はgmailで、authのところに環境変数として設定した値を入力していきます。
async function sendGmail(email: string, code: number, name: string): Promise<string | undefined> {
const transporter = nodemailer.createTransport({
service: "gmail",
auth: {
user: process.env.MAIL_ACCOUNT,
pass: process.env.MAIL_PASS,
},
});
const mailOptions = {
from: process.env.MAIL_ACCOUNT,
to: email,
subject: "メール認証",
text: `${name}さん、こんにちは！認証コードは${code}です！お早めに登録を完了させてください。`,
};
try {
const info = await transporter.sendMail(mailOptions);
console.log(info);
} catch (error) {
console.log(error);
return "Failed to send Gmail.";
}
}
transporterのsendMailメソッドの引数にメールオプションを渡してあげると、無事メールを送ることができます。
メールオプションにはメールを送信する際の設定をそのまま定義するようなイメージです。fromプロパティに自前のGmailアドレスを、toプロパティにフロントで受け取ったユーザーのメールアドレスを、subjectにメールの件名を、そしてtextにメール本文を入力します。
ちなみに、sendMailメソッドの返り値は以下の通りです。
{
accepted: [ 'public.example.recipient@gmail.com' ],
rejected: [],
ehlo: [
'SIZE 35882577',
'8BITMIME',
'AUTH LOGIN PLAIN XOAUTH2 PLAIN-CLIENTTOKEN OAUTHBEARER XOAUTH',
'ENHANCEDSTATUSCODES',
'PIPELINING',
'CHUNKING',
'SMTPUTF8'
],
envelopeTime: 1420,
messageTime: 1433,
messageSize: 59463,
response: '250 2.0.0 OK 1709120014 j11-20020a170902f24b00b001dbcf7f7752sm3118597plc.46 - gsmtp',
envelope: {
from: 'public.example.info@gmail.com',
to: [ 'public.example.recipient@gmail.com' ]
},
messageId: '<78c3125f-6bd0-21a8-cb2e-dd2be10c1132@gmail.com>'
}
4. リッチなメール設定
さて、これだけの設定でメール送信機能を実装することができました。かなりの手間を省いてメール送信を自動化することができ、それだけでもこのライブラリーは大変有用ですが、メールの内容がテキスト本文だけというのも味気ありません。
実は、このメールはhtml形式で、画像データも差し挟んで送ることができます。
以下が、具体的なコードです。
async function sendGmail(email: string, code: number, name: string): Promise<string | undefined> {
const transporter = nodemailer.createTransport({
service: "gmail",
auth: {
user: process.env.MAIL_ACCOUNT,
pass: process.env.MAIL_PASS,
},
});
+ const sendHTML = `
+ <!DOCTYPE html>
+ <html lang = "ja">
+ <head>
+ <title>Inquiry In College</title>
+ <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type"/>
+ <meta content = "width = device-width" name = "viewport"/>
+ </head>
+ <body>
+ <div class = "main">
+ <div><img src="cid:logo" alt="logo"></div>
+ <h2>${name}様、ようこそ！</h2>
+ <p>ご登録くださり、ありがとうございます。認証コードは${code}です。お早めにご入力ください。</p>
+ <br/>
+ <p>もし身に覚えのないメールであれば、ご放念ください。</p>
+ <br/>
+ </div>
+ </body>
+ </html>
+ `;
const mailOptions = {
from: process.env.MAIL_ACCOUNT,
to: email,
subject: "メール認証",
text: "No reply",
html: sendHTML,
+ attachments: [
+ {
+ filename: "PublicLogo.jpg",
+ path: "public/PublicLogo.jpg",
+ cid: "logo",
+ },
+ ],
};
try {
const info = await transporter.sendMail(mailOptions);
console.log(info);
} catch (error) {
console.log(error);
return "Failed to send Gmail.";
}
}
ポイントは二つです。
一つ目は、mailOptionにhtmlプロパティをつけて、そこにhtml形式で書いたコードをあてたこと。
二つ目は、画像を差し挟んだことです。mailOptionのattachmentプロパティにおいて、ファイルの名前とそのパス、そしてhtml内のimgタグからの参照に対応する値を入力しました。実際に、htmlのimgタグのsrcは"cid:logo"となっています。
attachmentのファイルパスは、Next.jsの場合においてはルートディレクトリからのパスになります。たいていの場合、画像を保存しているpublicディレクトリはデフォルトで、appディレクトリないしsrcディレクトリと同階層になると思うので、そのままpublic/someImage.pngと指定してあげたら大丈夫です。
5. おわりに
体感、結構サクサク進めて驚きでした。メールの自動送信はもっと面倒なイメージがあったので、予想よりもすらすら実装できてうれしかったです。ライブラリー様様って感じです。