こんにちは。小川智也です。
本日はDay22ということで、Ringeeのログイン機能あたりの実装をしていこうと思います！
この2～3日くらいログイン実装の記事ばっかになると思いますが、最後までぜひご覧ください。
今回はその中でも、 ログインフローの作成とAmazon SESの設定をメインにおこなっていきます。
この記事は夏休み毎日投稿2025として執筆されたものです。
夏休み毎日投稿2025のすべての記事は下記から閲覧いただけます。
小川智也と申します。Webプログラマーな中学2年生です。
このブログでは主にITやガジェット系の情報を発信しています！
▼ おすすめリンク ▼
【 X(旧Twitter)・いえPay・個人事業主・ITパスポート・お問い合わせ 】
ログイン機能の概要
まず始めに、今回Ringeeに導入するログイン機能を解説していきます。
Ringeeではログイン方法として、メールアドレスとパスワードを用いた一般的なログイン方法と、Googleログインを実装しようと思います。
正直Googleログインだけでも良かったのですが、念の為メールアドレスとパスワードを用いた一般的な認証も導入しておきます。
ログインフロー
次に、実際にログイン・登録する際のフローを考えていきます。
大まかにログインフローはこんな感じになりました。
メルアド&パスワード方式の場合
- Ringeeトップページにアクセス (/index.php)
- 新規登録ページにアクセス (/register.php)
- メールアドレスを入力
- 入力メールアドレス宛にリンク送信 (POST /api/register-temp.php)
- (サーバー) Amazon SESでメール送信
- メールを開き各種情報を入力 (/register-mail.php?token=xxxxx)
- 登録 (POST /api/register-mail.php→/success.phpにリダイレクト)
- ログインページに進み、登録した情報でログイン
Googleログインの場合
- Ringeeトップページにアクセス (/index.php)
- 新規登録ページにアクセス (/register.php)
- Googleアカウントで登録をクリック (/register-google.php)
- Googleのログインページにリダイレクト→コールバック (/api/register-google.php)
- 諸々登録の処理 (→/success.phpにリダイレクト)
- ホーム画面へ
やっぱちゃんとしたログイン処理つけると結構長くなりますね...
Auth0とかFirebase Authenication使おうかとも考えましたが諸事情で断念したため気合で実装します。
Amazon SESを使ってみる
今回は折角なのでメールの送信にAmazon SES(Simple Email Service)を使ってみようと思います。
ブログのお問い合わせフォームの自動送信メールとかにはさくらのメールボックスを使っていて、Ringeeも同じようにさくらのメールボックスで動かしても良かったのですが、AWSに慣れとくためにも今回はSESを使います。
ちなみにクラウドは破産とか諸々が怖くてあまり手を出せていません
使用料金
Amazon SESの利用料金はだいたいこんな感じになっています。
今回のメール認証のような送信メール（＝アウトバウンドメール）だと1,000件につき0.10USD、1$=150円換算だとたったの15円です。安い！！
以前はこれに加え、月62,000件の無料枠があったみたいなのですが、現在は最初の12ヶ月は月3,000件まで無料に改悪されているみたいです。多分今までがエグすぎたんでしょうね。
実際にメールを送ってみる
色々下準備は裏でやったのでWebUIから早速テストメールを送ってみようと思います。
下準備といっても、使いたいドメインのDNSにCNAMEとDMARKを設定するだけで特段難しいことはありませんでした。
普段のメインメールはOutlookなのですが、今回はDKIMとかそのへんの検証もするためにあえてGmailに送ってみます。
結果
おー！ちゃんとGmailにも届きました。届いてもらわなきゃ困りますが
ちゃんとDKIMあたりの認証も通ってました。
ちなみに滅茶苦茶今更ですが ringee.net というドメイン取りましたー！
お名前.comがしょっちゅうメールでクーポンを送りつけてくるのでそれで買いました()
本番稼働のときはこのドメインで動かす予定です。
PHPで送ってみる
最後に実際にPHP上からSESを使ってメールを送信してこの記事は終わりたいと思います。
AWS DFK for PHPなるものがあるらしいののでComposerでインストールしてChatGPTに聞きながらゴニョゴニョします。
ちなみに上のテスト送信用コードは全部ChatGPTが書いてくれました。
久しぶりに1回で動いて逆にちょっと困惑した
結果
結果はもちろんちゃんと届きました。
やっぱ公式のSDKは使いやすくていいですね。
送信者名をつけてみる
ちょっとこのままでは味気無いので送信者名をつけてみます。
付け方は簡単で、送信元メールアドレスの部分を「Ringeeサポート <[email protected]>」のように送信者名と半角スペースの後に山括弧で送信元メールアドレスを書くだけです。
もちろんこれでもちゃんと届きました。
まとめ
いかがだったでしょうか。今回はDay22ということで、ログイン機能実装の第一歩としてログインフローの作成とAmazon SESの設定を行ってみました。
Amazon SESが思った以上に使いやすくて驚きです。APIで送ったメールが届くだけなのに滅茶苦茶感動しました(意味不明)
次回はデータベース連携＋メールログインをちょっと実装しようと思います。乞うご期待！
最後まで見ていただき、ありがとうございました。
この記事がいいと思った方はぜひ他の記事も見ていってください！
X(旧Twitter)のフォローもよろしくお願いします！
